JPEG and PNG have served the web for decades, but they were designed in a different era. JPEG, standardized in 1992, uses discrete cosine transforms for lossy compression. PNG, introduced in 1996, offers lossless compression with transparency support. Both formats predate the smartphone revolution, broadband ubiquity, and the performance standards modern users expect. WebP and AVIF are the main contenders designed to replace them — and understanding when to use each can meaningfully improve your site's load time without sacrificing visual quality.
WebP: Broadly Supported, Reliable Savings
Google developed WebP and released it in 2010, with full specification publication in 2015. Its compression is based on the VP8 video codec's intra-frame encoding (for lossy mode) and a derivative of PNG's deflate compression (for lossless mode). WebP also supports transparency (alpha channel) in both lossy and lossless modes, and it supports animation as an alternative to GIFs.
Typical compression savings over JPEG for equivalent visual quality: 25–35%. Over PNG: 20–50%, depending on image content. Images with large flat areas (illustrations, screenshots, icons) tend to compress especially well in WebP lossless mode.
Browser support as of 2026: essentially universal. Chrome, Firefox, Edge, Safari (since version 14, 2020), and all major mobile browsers support WebP. If you need to serve images to the full browser population with no fallback complexity, WebP is the safe default.
AVIF: Better Compression, Higher Encoding Cost
AVIF (AV1 Image File Format) is based on key frames of the AV1 video codec, which the Alliance for Open Media — a consortium including Google, Netflix, Mozilla, Microsoft, and Apple — developed as a royalty-free alternative to HEVC. AVIF's first browser support landed in Chrome 85 (2020) and Firefox 93 (2021).
Compression savings over JPEG for equivalent visual quality: 40–55%. AVIF handles gradients, soft shadows, and photographic detail particularly well. At very high compression ratios, AVIF's artifacts (which look like watercolor blur) are generally more aesthetically acceptable than JPEG's blocking artifacts.
AVIF also supports HDR, wide color gamuts, and higher bit depths than JPEG, which makes it attractive for high-quality photography and professional content.
The trade-off is encoding speed. AVIF encoding can be significantly slower than JPEG or WebP encoding — sometimes 10–50x slower for large images at high quality settings. For images generated at request time, this overhead matters. For images encoded once and served many times (which is most websites), it is irrelevant.
Browser Support Comparison
Both formats have strong browser support in 2026:
- WebP: Supported by all major browsers for several years. Safe for production with no fallback in any realistic target audience.
- AVIF: Supported by Chrome, Firefox, Edge, and Safari 16+ (released 2022). Not supported in older Safari (iOS 15 and below) or Internet Explorer. For most consumer audiences, coverage is above 90%.
For sites that need to support older Safari versions, the standard approach is the HTML <picture> element with sources in priority order: AVIF first, WebP second, JPEG/PNG as the final fallback.
Which Format Should You Choose?
The practical answer for most web projects in 2026:
- Photos and complex images: Prefer AVIF. The additional compression at equivalent quality is worth the slightly limited support, especially if you serve a modern browser audience. Use a
<picture>element with a WebP fallback if you need to support older iOS Safari. - Screenshots, UI captures, and mixed content: WebP works well and has universal support. The compression advantage of AVIF is less pronounced for these types.
- Icons and illustrations with flat colors: Consider WebP lossless or even SVG if the source is vector-based. AVIF's advantages are most visible in photographic content.
- Animated images: Both formats support animation. AVIF animations can achieve significant file size reductions over GIF and WebP animated, but encoding complexity is high. WebP animated is a simpler, well-supported option.
Serving Multiple Formats Efficiently
Content negotiation via HTTP Accept headers is the cleanest server-side approach: if the browser sends Accept: image/avif, serve AVIF; if it sends image/webp, serve WebP; otherwise fall back to JPEG. CDNs like Cloudflare, Fastly, and CloudFront support format negotiation as a configurable feature.
Client-side, the <picture> element's <source> tags achieve the same result with no server logic:
<picture>
<source srcset="image.avif" type="image/avif" />
<source srcset="image.webp" type="image/webp" />
<img src="image.jpg" alt="Description" />
</picture>For any significant image library, automating format conversion at build time (with tools like sharp, libvips, or Squoosh's CLI) and storing all three variants is the approach that delivers maximum compatibility with minimum maintenance burden.