Next-Gen Image Formats
Serve WebP or AVIF images to cut transfer size 25–70% with no visible quality loss.
Metrics
This technique can move up to 100% of LCP's share of the Lighthouse score.
This technique does not move TBT.
This technique does not move CLS.
This technique can move up to 67% of FCP's share of the Lighthouse score.
This technique can move up to 67% of SI's share of the Lighthouse score.
This technique does not move TTFB.
Overview
WebP delivers 25–35% smaller files than JPEG at equivalent perceptual quality. AVIF goes further — 40–70% reduction, particularly for photos with gradients and skin tones. Both formats are supported by every major browser since 2023. Switching the image pipeline is the single highest-bandwidth saving available without restructuring the page.
Impact grade, A+ to D: how much of the Lighthouse score this technique can move. Unaffected: TBT, CLS, TTFB.
The Problem
JPEG and PNG images account for the majority of page weight on most WordPress sites. A homepage with 10–15 hero and card images can total 1–4 MB of JPEG transfer. Every byte travels the network before the browser can decode and composite the image — directly delaying LCP and Speed Index on any connection slower than fibre.
Performance Impact
LCP
200–800ms
depends on image file size and connection speed
FCP
100–400ms
above-fold images decode sooner when transfer is smaller
SI
200–600ms
images paint earlier when transfer completes sooner
Risk: Low
use fallback for 100% browser compatibility
How it works
01
Convert existing images
Process originals through Sharp, cwebp, or ImageMagick at quality 80 for WebP or 60–70 for AVIF. Always inspect output visually — AVIF can introduce banding on gradients at aggressive settings.
02
Serve via with fallback
The
<picture>element lets browsers pick the best format they support. List AVIF first, WebP second, original JPEG last — browsers that do not support a format skip that<source>and use the next one.03
Use a WordPress image optimisation plugin
Plugins such as Imagify, ShortPixel, or EWWW Image Optimizer automatically generate WebP or AVIF variants for all uploaded images and rewrite
<img>tags or serve via HTTP content-type negotiation. No theme changes required.04
Enable server-side format negotiation
Configure Nginx or Apache to serve a pre-generated
.webpfile automatically when a corresponding file exists and the request includesAccept: image/webp. The response gainsVary: Acceptso CDNs cache format variants separately.
Limitations
- AVIF encoding is CPU-intensive — regenerating large existing image libraries takes significant time.
- Some page builder plugins that hard-code tags bypass wrapping and require custom integration.
- Server-side Accept-header negotiation requires a correct Vary: Accept cache header to avoid serving the wrong format across CDN edges.
Common Mistakes
Converting to WebP but not updating srcset attributes
Each responsive size variant needs a corresponding WebP file. Use a plugin that converts and rewrites all srcset entries, not just the main src.
Applying aggressive AVIF quality to all image types
AVIF at quality < 60 can create halos around high-contrast edges and banding in smooth gradients. Test photographs, illustrations, and screenshots separately with different quality settings.
Need help applying this to your site?
Targeted fixes, not guesswork. We identify which techniques move the needle for your specific WordPress stack.
Start an Engagement