How to Optimise WebP Images for Website Performance

Images are almost always the largest contributor to page weight, which makes them the highest-leverage thing to fix for Core Web Vitals.

Serve the right dimensions

The most common and most expensive mistake is shipping a 3000px image into a 600px slot. Generate the sizes your layout actually uses and let srcset pick between them.

Quality 80-85, not 95

Export presets default high. Dropping to 82 typically halves each file with no perceptible difference. Across a media library this is usually the single biggest saving available.

Use a picture element

Offer AVIF first, WebP second, JPG last. Modern browsers take the smallest format they understand, older ones fall back cleanly, and you stop having to choose one format for everybody.

Lazy-load below the fold, eager-load the hero

Add loading="lazy" to images below the fold and explicitly prioritise the LCP image with fetchpriority="high". Lazy-loading your hero image actively harms LCP — a common own goal.

Always set width and height

Intrinsic dimensions on the img tag let the browser reserve space before the image loads, which prevents Cumulative Layout Shift. This costs nothing and fixes a metric people otherwise chase for hours.

Strip metadata

EXIF blocks can add tens of kilobytes per image for data no visitor will ever read, and can leak camera serials and GPS coordinates.
Ready to convert?
Free, no signup required. Files deleted in 24 h.
Start converting
Back to all FAQ