Why image optimization matters

On most websites, images are by far the heaviest part of the page. Unoptimized images mean slow loads, frustrated visitors and worse search rankings. The good news: image optimization is one of the highest-impact, lowest-effort things you can do — and it comes down to five steps.

Step 1: pick the right format

The foundation. Photos to JPG or WebP, graphics and logos to PNG, WebP or SVG, icons that must scale to SVG. The wrong format wastes space no matter how well you compress afterward. A quick guide is in our image formats comparison.

Step 2: right-size the image

The most common waste: uploading a 4000-pixel camera photo to display it 800 pixels wide. Bring images to the size they're actually shown at — for full-width web images, around 1600–2000 px on the long edge is plenty. Resize with the resize tool before compressing.

Step 3: compress

For photos, JPG or WebP at quality ~80 is the sweet spot: nearly invisible loss, dramatic size reduction. The relationship between quality and file size isn't linear — the first steps down from 100 cost almost nothing visible but save a lot. Compress browser-locally with the compression tool and watch the size drop.

Step 4: serve responsive images

A phone shouldn't load the desktop image. With srcset and sizes, the browser picks the right variant per device — small for phones, large for desktops. This is the biggest win on mobile, where speed matters most.

Step 5: lazy-load below the fold

Images the visitor may never scroll to shouldn't load up front. The native loading="lazy" attribute handles this — with one exception: never lazy-load the large hero image, which should load early (it's usually the LCP element).

The complete checklist

  1. Format: photo → JPG/WebP, graphic → PNG/WebP/SVG.
  2. Dimensions: resize to the display size (~1600–2000 px for full-width).
  3. Compression: JPG/WebP quality ~80.
  4. Responsive: srcset/sizes for the right size per device.
  5. Loading: lazy-load below the fold, prioritize the hero image.
  6. Extras: modern formats (WebP/AVIF), width/height to prevent layout shift, long cache lifetimes.

The order that matters

Do the first three steps first — they deliver most of the win with the least effort. Format, size and compression turn a 5 MB photo into a 300 KB one that looks identical on screen. Responsive images and lazy loading are the finishing touches. Get the basics right, and your Core Web Vitals improve almost on their own — more on that in Improve Core Web Vitals.