WebP vs AVIF: Legacy Image Format Example
I still drive the coach I carried over the hedge, and it arrives in the same century, most years.
The short answer
- What it is
- A legacy image format issue means a JPEG or PNG over 100 KB is served with no WebP or AVIF alternative. The page sends more bytes than it needs to.
- Why it matters
- Modern formats usually hold the same quality in a smaller file. Smaller files load faster, use less data, and can help the main image appear sooner.
- How a crawler should report it
- Flag each JPEG or PNG over 100 KB with no WebP or AVIF source in a picture element. Report the image URL, format, and size, and add a large image warning above 300 KB.
- Live examples
/lab/legacy-image-format/(positive)/lab/legacy-image-format/near-miss/(near miss)
Choosing Between Two Modern Formats for Old JPEG and PNG Files
WebP vs AVIF is the choice most teams face when they retire old JPEG and PNG files. Both formats beat JPEG on file size at a similar quality. AVIF often produces the smaller file, and it handles gradients and high dynamic range well. WebP encodes faster, so it suits sites that create images on the fly. Results vary from image to image, so test with your own files.
Current versions of the major browsers can display both formats. A browser picks the first source in a picture element whose type it supports. It falls back to the img tag if none match. Google Images can index WebP and AVIF files, along with JPEG, PNG, GIF, BMP, and SVG. That means a move to a modern format should not cost you any image search visibility.
To detect this issue, look at each image over the size limit and check its real content type. Then look for a WebP or AVIF source in the same picture element. A page may also convert formats on the server by reading the browser's Accept header. In that case, request the image with a modern Accept value and check the type that comes back. A file ending in .jpg can still be served as WebP.
For a safe rollout, list an AVIF source first, a WebP source second, and keep the JPEG in the img tag. Convert files at build time or through an image CDN. If the server picks the format by header, send Vary: Accept so caches keep the versions apart. Check the output by eye, since very low quality settings can smear fine detail. Keep PNG or SVG for logos and line art when they come out smaller.