To convert images to WebP to speed up your website, start with the largest images on your slowest pages, resize them to the width they really show at, and save them as WebP. Then add width, height and lazy loading in the right places. web.dev reports that WebP files are typically 25 to 35 percent smaller than JPEG or PNG.

WebP is an image format that keeps photos and graphics sharp at a smaller file size. Every modern browser supports it.

How to convert images to WebP to speed up your website

  1. Find your heaviest images. Open a slow page, right-click › Inspect › Network › Img, reload, and sort by size. Anything over about 200 KB is a target.
  2. Resize first. If an image shows at 800 pixels wide, do not upload a 4,000 pixel original. Resize it to about twice the display width at most.
  3. Convert to WebP. Use the free Image to WebP Converter. It runs in your browser, so nothing is uploaded.
  4. Add width and height. Put the real pixel size on every img tag so the browser can reserve the space before the image loads.
  5. Lazy-load only images below the first screen. Add loading="lazy" to images further down the page. Never to the main image at the top.

Copy-paste template

<!-- top of the page: load right away -->
<img src="/uploads/{hero}.webp" width="1200" height="675" alt="{what the image shows}" fetchpriority="high">

<!-- further down: lazy -->
<img src="/uploads/{photo}.webp" width="800" height="450" alt="{what the image shows}" loading="lazy">

What to expect

Image-heavy pages often get noticeably lighter and steadier while loading. Speed is one of many signals, so expect a better experience for readers rather than a ranking jump on its own.

Don't

Don't lazy-load the main image at the top of the page. web.dev warns this slows down the most important image, the one that usually decides your loading score.

Why it works

Images are often the heaviest part of a page. Smaller files arrive faster, especially on phones. The width and height attributes stop the layout from jumping while images load, and lazy loading saves data on images readers may never scroll to.

An honest note from my own sites: I once paid extra for hosting that promised many times faster speeds, and I never felt a difference. Fixing the page itself is what helps. If you convert images to WebP to speed up your website and add the right attributes, you fix the part that is in your hands. For other speed fixes, see how to speed up font loading.

Frequently asked questions

Does WebP lower image quality?

At normal quality settings most people cannot see a difference. Check one image side by side before converting a whole folder.

Do all browsers support WebP?

Yes, every current major browser supports WebP. Very old browsers may not, but they are rare today.

Should I delete my original JPEG and PNG files?

Keep the originals in a backup folder. If you ever need a different size or format, you can export again from the best copy.