Guide
Guide: image optimisation that lifts Core Web Vitals
How to pick format, size and loading strategy for images — and why LCP is almost always an image.
1 Sept 20265 minKrymp
On most sites the largest contentful element is an image. Fix the image and you fix LCP.
Pick format by content
AVIF for photography, WebP as fallback, SVG for graphics. Always keep a JPEG fallback.
Serve the right size
srcset and sizes stop phones from downloading a 2000px image for a 390px slot.
Prioritise the hero
fetchpriority=high and eager on the first image, lazy and decoding=async on the rest.
Always set width and height
Without dimensions you get layout shift, and CLS penalises the whole page.
Frequently asked
- Which image format is fastest?
- AVIF usually gives the smallest file at the same perceived quality, with WebP as the broad fallback.