--- title: "Blog" description: "Read about the background of our monitoring solution, new features and case studies" canonical: "https://www.rumvision.com/blog/modern-image-formats-webp-avif-browser-support/" --- Breadcrumbs: [Home](https://www.rumvision.com/?format=md) > Blog # Modern Image Formats: WebP vs AVIF and its browser support January 26th, 2024 marks one year since all major browsers fully supported AVIF. For years, developers used `picture` elements to provide WebP or AVIF images while falling back to JPEG for browsers lacking support. Now, with universal AVIF compatibility, these workarounds may no longer be necessary. In this article, we'll compare WebP vs. AVIF, explore their differences, and show how you can simplify your image handling in HTML. ## What are WebP & AVIF? Most will be familiar with PNG and JPEG images. Not surprisingly, they still dominate the web with a [market share of 28.4% and 32.4%](https://almanac.httparchive.org/en/2024/media#format-adoption) across websites. [![web-almanac-2024-image-format-adoption-mobile.png](https://www.rumvision.com/file/upload/img/web-almanac-2024-image-format-adoption-mobile.png)](https://almanac.httparchive.org/en/2024/media#format-adoption) WebP and AVIF are so-called next generation image formats. The adoption-chart reveals this as well as we can see a 12.0% market share for WebP and 1.0% for AVIF. And as one may expect from a newer image format, one is more modern and comes with enhanced features. ### WebP: The first modern alternative to JPEG Developed by Google, **WebP** was introduced as a **more efficient replacement for JPEG and PNG**, providing: - Lossy compression: 25–34% smaller than JPEG at similar quality - Lossless compression: 26% smaller than PNG - Alpha transparency (like PNG) - Animation support (like GIF) ### AVIF: The next-gen format AVIF (AV1 Image File Format) is based on the **AV1 video codec**, providing even better compression than WebP: - Superior quality at lower file sizes (compared to both WebP and JPEG) - Better handling of HDR and wide color gamuts - More efficient compression for large images ### Comparison table Let's look at these feature and other advantages in a side by side comparison: Feature WebP AVIF Lossy Compression ✅ Better than JPEG ✅ Even better than WebP Lossless Compression ✅ Smaller than PNG ✅ Smaller than WebP Transparency ✅ Yes ✅ Yes Animation ✅ Yes ❌ No HDR Support ❌ No ✅ Yes Browser Support ✅ All Major Browsers (since 2020) ✅ All Major Browsers (since Jan 26, 2023) Encoding Speed ✅ Fast ❌ Slower For more technical details and charts, see [this Image Coding Comparison](https://storage.googleapis.com/avif-comparison/index.html) provided by the Google team or an article covering [visual comparisons between different image formats](https://jakearchibald.com/2020/avif-has-landed/) by Jake Archibald. ## Choosing between WebP & AVIF When looking at the table above, there's a clear verdict: AVIF generally provides better compression and quality than WebP. WebP is still faster to encode though while also being a better choice for animations. Knowing this means tech teams can move up to the next step of the decision tree before actually implementing this new feature: what does browser support of WebP and AVIF look like? ### Browser support Both WebP and AVIF are supported in all major browsers. Exact browser version to support each image format are as follows: - **WebP** is supported since: - browser versions Chrome version 9, Edge version 18, Firefox version 65 and Safari version 14 - bringing full support since 2020-09-16 - as Safari was the last browser to join the WebP party at that date - **AVIF** is supported since: - Chrome version 85, Edge version 121, Firefox version 93 and Safari version 16 - bringing full support since 2024-01-26 - as Microsoft Edge was the last browser to join the AVIF party at that date ### Baseline status If you think these are too many details, then you're not alone. The [Baseline initiative](https://www.rumvision.com/blog/baseline-standardized-support-status-web-features/?format=md) aims to simplify browser support per web feature, for example by providing Baseline badges per feature. As a result, you'll see the latest support status below: At time of writing, WebP is considered Widely Available. In terms of Baseline, this means that at least 30 months has passed since becoming available in all major browsers. In other words, you can safely use WebP on your website today. Meanwhile, AVIF is considered Baseline 2024. A blue Baseline status that you might be close to safe to adopt such feature, but when a portion of your visitors are not as up to date with their browser version, they might not benefit from AVIF yet. ### Support by your real visitors Does this mean you should wait for another 20 months before fully depending on AVIF? Not necessarily. There are compelling reasons to consider switching to AVIF sooner: - reduced image HTML complexity (see below) - reduced bandwidth thanks to lower file sizes - reduced data storage as other (fallback) formats don't need to be stored on the server anymore However, the key question isn't about a theoretical timeline – it's about whether your actual site visitors are ready for AVIF-only images. To answer this definitively, you can combine Baseline feature details with Real User Monitoring (RUM) data from your own website. This is what we did at RUMvision, combining [RUM data with Baseline data](https://www.rumvision.com/help-center/monitoring/dashboard/baseline/?format=md) and show visible progress over time. You know when you are safe to ship AVIF images without any fallbacks. This is illustrated in the screenshot below: ![webp-versus-avif-baseline-rum.png](https://www.rumvision.com/file/upload/img/baseline/screenshot/webp-versus-avif-baseline-rum.png) This allows shareholders to not just make an educated guess, but to see when exactly your visitors are ready for AVIF. ## What developers can do Before AVIF was widely supported, developers had to provide multiple formats inside a `` element to ensure compatibility. This is what you would then typically see in source codes of websites: ``` ``` Here’s what this setup did: - Browsers that support AVIF load `image.avif`. - Browsers without AVIF but with WebP support load `image.webp`. - Older browsers that support neither load `image.jpg`. While effective, this added extra markup and complexity, for example: - in templating files - combining different image formats with different image dimensions - generating different image formats on the fly .. or all of the above. ### Simplified image serving When your data shows that AVIF is supported across all major browsers, your developers no longer need fallbacks. Instead, you can directly use: ``` ``` This simplifies your code while ensuring the best compression and quality for all users. Moreover, combining this with different image dimensions for different viewports won't be as complex anymore. ## Final thoughts With one year of full AVIF browser support, developers might be safe already when all their visitors have kept their browsers updated. ### Data-driven decisions However, this isn't always the case. Combining Baseline data with RUM data enables data-driven decisions, for example by using existing tools like RUMvision. The benefits of making this transition are clear: - Developers get to work with modern features as soon as visitors are ready - Code complexity will reduce - Real visitors will benefit from better image quality and faster load times ### Looking ahead Looking ahead, while AVIF is currently the most advanced image format we have, the web continues to evolve. Future image formats may offer even better compression or new features. By establishing a data-driven approach to adoption now, teams will be better positioned to evaluate and implement these upcoming innovations when they arrive. The key is finding the right balance between embracing new technology and ensuring a smooth experience for all users.