Image Optimization for the Web: Formats, Sizes and Lazy Loading

Open the dev tools on a typical small business site and look at the network tab. Usually about two-thirds of the page weight is images. Fix that and you have a fast site. Don't, and no amount of fancy caching will save you.

Here's how image optimization actually works, in 2026.

Pick the right format

The format wars are over and the winners are clear:

• WebP — the default for photos and most images. Roughly 25–35% smaller than JPEG at the same quality. Supported by every major browser since 2020.
• AVIF — even smaller, sometimes by half. Browser support is now broad enough to use confidently with a fallback.
• JPEG — the fallback. Still fine for photos when WebP isn't available.
• PNG — only for images that need transparency or sharp edges (logos, screenshots with text).
• SVG — for logos, icons and anything geometric. Tiny, infinitely scalable.

Stop uploading 4000px-wide hero images

This is the single biggest mistake we see. Someone takes a picture, drags it into WordPress straight from the camera, and now their homepage is loading a 6 MB image that displays at 1200 pixels wide.

Before you upload:

• Resize to the maximum size it will actually display at (usually 1920px max for backgrounds, 1200px for content images).
• Compress with a tool like Squoosh, ShortPixel or TinyPNG.

Use responsive images (srcset)

WordPress does this automatically — it generates multiple sizes and the browser picks the right one for the viewport. If you've ever hand-coded an <img> tag, make sure you're using srcset and sizes, not a single hard-coded width.

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="...">

Lazy-load below-the-fold images

There's no reason to load the image at the bottom of a 4000px page before the visitor has scrolled to it. Native lazy loading is two characters:

<img src="..." loading="lazy" alt="...">

WordPress adds this attribute automatically. Don't add a heavy lazy-loading plugin on top — you'll be doing the same work twice.

Optimise the images you've already uploaded

If your media library is full of unoptimised giants, you have three good options:

• ShortPixel — free up to a few hundred images per month, then cheap. Bulk-optimises and converts to WebP.
• Imagify — similar, by the WP Rocket team.
• EWWW Image Optimizer — server-side, no monthly limits, slightly less polished.

Don't forget the favicon and OG images

Tiny details, but visible. A 512×512 PNG favicon is fine; a 2 MB original photo as your favicon is not. Your Open Graph image should be 1200×630 and well under 200 KB.

Test before and after

Use the Network tab in Chrome DevTools — sort by size, biggest first. Anything over 200 KB had better justify itself. Then check PageSpeed Insights for the Largest Contentful Paint number; that's almost always an image, and you'll watch it improve as you tighten things up.

The best image is the one you didn't upload. Before reaching for compression tools, ask whether you need the image at all. A clean text heading often beats a generic stock photo.

Once your images are under control, the rest of your performance work — caching, CSS, JS — becomes easier. Start here. It's the highest ROI work you can do on most sites.