tech

How to fix: Images using modern formats + sizing

Why this matters

Lighthouse rolls up image-related savings: WebP/AVIF conversion, responsive sizing, lazy-loading offscreen images. Images are typically the largest contributor to page weight and LCP — each fix lifts Core Web Vitals directly.

Background

Images are typically the largest contributor to page weight and LCP. Lighthouse rolls up image-related savings: WebP/AVIF conversion, responsive sizing, lazy-loading offscreen images. Each fix lifts LCP + CWV directly.

References

web.dev/fast · Image performance best practices

How to fix

Code snippet for each stack we cover. Pick the one matching your server / framework.

nginx

ngx_pagespeed module (deprecated) OR proxy images through Cloudflare Polish.

apache

Same — proxy through a CDN with image optimisation.

cloudflare

Polish (Pro plan) — auto-converts to WebP at the edge. Image Resizing for responsive variants. Mirage (mobile-only).

wordpress

ShortPixel / EWWW Image Optimizer for WebP conversion at upload. Lazy-load plugin (or native loading="lazy" attr on theme).

flask

Pillow / wand to convert to WebP at upload time. Serve with <picture> source srcset for browser-aware delivery. loading="lazy" on below-fold.

express

Same — sharp library for processing, <picture> for delivery.

rails

active_storage_variants + image_processing gem; image_tag supports loading: :lazy.

Verify it's working

https://pagespeed.web.dev/ — the 'Opportunities' section should show 0 for 'Serve images in next-gen formats' and 'Defer offscreen images'.

Want to know if your site has this issue?

Run a free 53-check audit — security, GDPR, NIS2, and technical SEO.

Audit my site →