WebP and AVIF are image formats designed to compress better than JPEG and PNG. WebP was developed by Google and supports lossy and lossless compression, transparency and animation. AVIF is based on the AV1 video codec and often compresses further, especially for photos, at the cost of slower encoding. Both are supported in current versions of the major browsers and can be indexed by Google Images.
Choosing between them
AVIF tends to produce smaller files for photos and screenshots at the same visual quality, but encoding is slower and very high resolutions can be heavy to decode on low-end devices. WebP encodes fast and is a safe default. Results vary by image, so test on your own content rather than relying on general claims.
- AVIF: best compression in many cases, slower to encode
- WebP: wide support, fast encoding, good all-rounder
- JPEG or PNG: fallback for old clients and some email or social tools
- SVG: logos, icons and diagrams
Serving modern formats with fallbacks
The picture element lets the browser pick the first format it supports. Image CDNs can also choose the format automatically from the request's Accept header, so one URL serves AVIF to browsers that accept it and JPEG to those that do not.
<picture>
<source srcset="/img/hero.avif" type="image/avif">
<source srcset="/img/hero.webp" type="image/webp">
<img src="/img/hero.jpg" width="1200" height="630" alt="Team dashboard">
</picture>Things to check
Open Graph images for social sharing are often safest as JPEG or PNG, because not every social platform or chat app handles AVIF. If you serve different formats from one URL based on Accept headers, send a Vary: Accept header so caches do not mix them up.
Example
Switching the blog to AVIF
Quillbrook's blog serves JPEG hero images. The team configures its image CDN to deliver AVIF where supported and WebP otherwise, with JPEG as the final fallback, and keeps JPEG for og:image tags. Page weight on article pages falls, and social previews keep working.
Common mistakes
Using AVIF for social preview images
Some platforms do not render it. Keep og:image in JPEG or PNG.
Format switching without Vary
A CDN may cache AVIF and serve it to a client that cannot display it. Send Vary: Accept.
Questions
Google's image documentation lists both among supported formats. Make sure they are referenced in img elements with descriptive alt text.
