How to serve images in next-gen formats (WebP, AVIF)
WebP and AVIF are 25-50 % smaller than JPEG and PNG at the same quality. Converting the hero image alone often fixes LCP.
Step by step, with screenshots: What is a WebP file? How to open, convert and use one →
Check your own site
Runs this check and the other 192, free, in about 45 seconds.
Or run only this check with the free Image compressor or the free Image size checker.
What it is
Next-gen image formats are WebP and AVIF, two modern file types that store photos and graphics in fewer bytes than JPEG and PNG at the same visual quality. WebP files are typically 25-35 % smaller than comparable JPEGs, and AVIF often halves the size.
Images are usually the heaviest part of a page, and the hero image is often the Largest Contentful Paint element, so smaller files speed up LCP directly. Current versions of Chrome, Edge, Firefox and Safari all display both formats, so a <picture> element with a JPEG fallback is needed only for very old browsers. getReport flags images that would be meaningfully smaller in WebP or AVIF and shows the saving.
What a passing site looks like
- Images are served in modern formats (WebP or AVIF)warning · −4 ptseffort S
Modern image formats
Why it matters. WebP and AVIF are 25-50 % smaller than JPEG and PNG at the same quality. Smaller images load faster and cost visitors less data.
- Convert images to WebP or AVIF and serve them with <picture> or content negotiation.
- WordPress: enable WebP/AVIF in your image plugin or CDN (Imagify, ShortPixel, Cloudflare Polish); Shopify does this automatically for its CDN.
Questions people ask
What is a WebP file?
WebP is an image format created by Google that supports lossy and lossless compression, transparency and animation in one file type. It replaces JPEG, PNG and GIF on the web with files that are usually 25-35 % smaller. All modern browsers open it. If a downloaded .webp file will not open in an older app, convert that copy, but keep WebP on your website.
What is an AVIF file?
AVIF is an image format based on the AV1 video codec. It compresses photos to about half the size of a JPEG at similar quality and supports transparency and HDR. Chrome, Edge, Firefox and Safari all display it. Encoding AVIF is slower than WebP, so many sites generate it automatically with an image CDN or a plugin rather than by hand.
How do I convert images to WebP?
Let your platform do it: image CDNs, Shopify and WordPress plugins such as Imagify, ShortPixel or EWWW Image Optimizer convert uploads to WebP or AVIF and serve them to browsers that accept them. For single files, export as WebP from your image editor or use a free converter such as Squoosh. Keep the originals, so you can re-encode later at a different quality.