Optimise images for the web: size, WebP/AVIF and caching

Images make up most of the weight of a typical web page. A single photo straight from a phone can be 4–5 MB, more than the rest of the page combined.

1. Resize before uploading

Don't upload a 4000 px photo to show it at 800 px. Resize to about twice the displayed width for sharp screens.

2. Compress

Use Squoosh (free, in the browser), TinyPNG, or a plugin such as ShortPixel, Imagify or EWWW in WordPress. Quality 75–85 is usually indistinguishable from the original.

3. Use modern formats

WebP and AVIF are typically 25–50% smaller than JPEG at the same quality, and all current browsers support them. Shopify and Wix serve them automatically; on WordPress, a plugin or your CDN can convert on the fly.

4. Lazy-load below the fold

Add loading="lazy" to images that aren't visible on first screen (WordPress does this by default). Don't lazy-load the main hero image.

5. Set width and height

Width and height attributes stop the page jumping while images load.

6. Cache images in the browser

Images rarely change, so tell browsers to keep them: Cache-Control: max-age=31536000 for images. Most CDNs and caching plugins set this.

7. Add alt text

Every image needs an alt text for accessibility and image search.

The SEO audit tests up to 80 images and lists the ones over 300 KB, those served without caching, and whether you use any modern formats.