Two next-generation image formats now dominate the conversation about web performance: AVIF (AV1 Image File Format) and WebP (Google's 2010 format now at v2). Both beat JPEG significantly, but they have very different tradeoffs in compression, quality, encoding speed, and browser support.
<picture>. Offer AVIF first for browsers that support it; fall back to WebP; then JPEG. You get optimal compression for every visitor without sacrificing compatibility.
| Format | vs JPEG file size | Encoding speed | Browser support | Lossless | Animation |
|---|---|---|---|---|---|
| AVIF | 40–50% smaller | Slow (5–20×) | ~85% | ✓ | ✓ |
| WebP | 25–34% smaller | Fast (1–3×) | 97%+ | ✓ | ✓ |
| JPEG | Baseline | Very fast | Universal | ✗ | ✗ |
| PNG | 3–5× larger | Fast | Universal | ✓ | ✗ |
AVIF is derived from the AV1 video codec (the same technology behind Netflix and YouTube's most efficient streaming). Its compression is genuinely remarkable — at the same visual quality, AVIF files are typically 40–50% smaller than JPEG and 20–30% smaller than WebP.
AVIF particularly excels at:
The main weakness is encoding speed. Generating an AVIF from a JPEG can take 5–20× longer than generating a WebP. For a large e-commerce catalog with 50,000 product images, this becomes a significant build-time concern.
WebP has been Google's recommended format since 2010 and reached true universal support around 2022 when Safari added full support. Its advantages:
WebP's main weakness is that it falls slightly behind AVIF in pure compression efficiency, especially for very high-quality or HDR images.
| Browser | WebP | AVIF |
|---|---|---|
| Chrome 85+ | ✅ Full | ✅ Full (since Chrome 85) |
| Firefox 65+ | ✅ Full | ✅ Full (since Firefox 93) |
| Safari 14+ | ✅ Full | ✅ Full (since Safari 16, Sep 2022) |
| Edge 18+ | ✅ Full | ✅ Full (Chromium-based) |
| iOS Safari 14+ | ✅ Full | ✅ Full (iOS 16+) |
| iOS Safari 15 and below | ✅ Full | ❌ Not supported |
| Internet Explorer | ❌ No | ❌ No |
<picture> element with a WebP/JPEG fallback. Always include a fallback.
The best practice is to serve AVIF where supported and WebP or JPEG as fallbacks. The <picture> element handles this automatically:
Browsers try each <source> in order and use the first one they support. Chrome users get AVIF. Safari 15 users get WebP. IE11 users (if any remain) get JPEG.
For most websites: Serve WebP as the primary format with JPEG fallback. This covers 97%+ of browsers with excellent compression and fast encoding.
For performance-critical, image-heavy pages (e-commerce, photography portfolios, news sites): Add AVIF via <picture> as a first-choice source. The 20–30% additional size savings can meaningfully improve LCP and reduce bandwidth costs at scale.
Avoid GIF entirely. Use WebP animated or <video autoplay loop muted playsinline> instead.
AVIF achieves 20–40% better compression than WebP at equivalent visual quality. However WebP encodes 5–10× faster and has near-universal browser support (97%+) vs AVIF's ~85%. For most sites WebP is the safer default; add AVIF as an optional enhancement via <picture>.
Yes, since Safari 16 (September 2022 with iOS 16 and macOS Ventura). As of 2026 all major modern browsers support AVIF, but older iOS devices on Safari 15 or below do not. Always include a WebP or JPEG fallback.
Use both via the <picture> element: AVIF first, WebP second, JPEG as final fallback. This serves the optimal format to each visitor without sacrificing compatibility.
Optimize JPEG and PNG files in your browser. No upload, no account, instant results.
Compress Images Now →Last updated: April 2026. Browser support data from caniuse.com. Compression ratios are representative averages across a mixed test set.