--- title: "AVIF Image Format: what is it and can it improve performance of Web Applications?" description: The AVIF image format provides better compression than WebP, JPEG, PNG and GIF formats and is designed to supersede them in Web Development. image: https://www.alter-solutions.com/hubfs/17.%201300x650_ImagensAVIF.png --- [![act digital group logo](https://www.alter-solutions.com/hubfs/act%20digital/Logo/act_digital_temporary_logo.svg) ](https://www.alter-solutions.com) [ Nearshore ![arrow-white](https://www.alter-solutions.com/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-white.svg) ![arrow-orange](https://www.alter-solutions.com/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-yellow.svg) ![arrow-blue](https://www.alter-solutions.com/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-blue.svg) ](https://www.alter-solutions.com/nearshore) [ Contact us ![arrow-white](https://www.alter-solutions.com/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-white.svg) ![arrow-orange](https://www.alter-solutions.com/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-yellow.svg) ![arrow-blue](https://www.alter-solutions.com/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-blue.svg) ](https://www.alter-solutions.com/contact-us-client) ![Globe](https://www.alter-solutions.com/hubfs/Globe-Solid.webp) Global [Global](https://www.alter-solutions.com/) [USA](https://www.alter-solutions.com/en-us/) [Canada](https://www.alter-solutions.ca/) [France](https://www.alter-solutions.fr/) [Germany](https://www.alter-solutions.de/) [Belgium](https://www.alter-solutions.be/) [Portugal](https://www.alter-solutions.pt/) [Spain](https://www.alter-solutions.es/) [Poland](https://www.alter-solutions.pl/) [Morocco (FR)](https://www.alter-solutions.ma/) [Morocco (AR)](https://www.alter-solutions.ma/ar-ma/) ![Group 143](https://www.alter-solutions.com/hs-fs/hubfs/Group%20143.webp?width=18&height=17&name=Group%20143.webp) [![act digital group logo](https://www.alter-solutions.com/hubfs/act%20digital/Logo/act_digital_temporary_logo.svg) ](https://www.alter-solutions.com) ![Globe](https://www.alter-solutions.com/hubfs/Globe-Solid.webp) [Global](https://www.alter-solutions.com/) [USA](https://www.alter-solutions.com/en-us/) [Canada](https://www.alter-solutions.ca/) [France](https://www.alter-solutions.fr/) [Germany](https://www.alter-solutions.de/) [Belgium](https://www.alter-solutions.be/) [Portugal](https://www.alter-solutions.pt/) [Spain](https://www.alter-solutions.es/) [Poland](https://www.alter-solutions.pl/) [Morocco (FR)](https://www.alter-solutions.ma/) [Morocco (AR)](https://www.alter-solutions.ma/ar-ma/) [ Nearshore ![arrow-white](https://www.alter-solutions.com/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-white.svg) ![arrow-orange](https://www.alter-solutions.com/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-yellow.svg) ![arrow-blue](https://www.alter-solutions.com/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-blue.svg) ](https://www.alter-solutions.com/nearshore) [ Contact us ![arrow-white](https://www.alter-solutions.com/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-white.svg) ![arrow-orange](https://www.alter-solutions.com/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-yellow.svg) ![arrow-blue](https://www.alter-solutions.com/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-blue.svg) ](https://www.alter-solutions.com/contact-us-client) ![Group 143](https://www.alter-solutions.com/hs-fs/hubfs/Group%20143.webp?width=18&height=17&name=Group%20143.webp) ![Rectangle 239](https://www.alter-solutions.com/hs-fs/hubfs/Alter%20Solutions%202022/Icons%20(for%20use%20and%20contribution)/Rectangle%20239.png?width=13&height=13&name=Rectangle%20239.png) ![Rectangle 239](https://www.alter-solutions.com/hs-fs/hubfs/Alter%20Solutions%202022/Icons%20(for%20use%20and%20contribution)/Rectangle%20239.png?width=13&height=13&name=Rectangle%20239.png) ## What are you looking for? Search 12 July 2022 3 min Álvaro Junqueira # AVIF Image Format: what is it and can it improve performance of Web Applications? Web Development ***![Picture32](https://www.alter-solutions.com/hs-fs/hubfs/Picture32.png?width=2068&name=Picture32.png)****The best compression in comparison to all formats*   #### OVERVIEW First things first, what is AVIF? According to the [caniuse](https://caniuse.com/avif) website:   *“A modern image format based on the AV1 video format. AVIF generally has better compression than WebP, JPEG, PNG and GIF and is designed to supersede them. AVIF competes with JPEG XL which has similar compression quality and is generally seen as more feature rich than AVIF.”*   In other words, AVIF is an image format, smaller than the most famous formats like PNG or JPG, without losing quality.   The use of this kind of format is very important for the reasons listed below: - Improve the performance of your website/web application; - Use less bandwidth, and at the same time emit less carbon into the atmosphere; - And of course, improve the User Experience.   #### HOW TO CONVERT IMAGES TO THE AVIF FORMAT The most famous tools today are the [avif.io](https://avif.io/) and [Squoosh](https://github.com/GoogleChromeLabs/squoosh) (from Google).   I recommend the usage of [Squoosh](https://squoosh.app/), since you can change the configurations into the images and visually see how the conversion impacted your image. ** ** #### COMPATIBILITY The list of the compatible browsers can be found here: [https://caniuse.com/avif](https://caniuse.com/avif)   Even if the browser that you use must be compatible, if it isn’t, you can just use the [polyfill](https://javascript.info/polyfills) and the tag below.   #### THE TAG You don't need to wait for all browsers to support it – you can use [content negotiation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Content_negotiation/List_of_default_Accept_values#Values_for_an_image) to determine browser support on the server, or use  to provide a fallback to other supported image formats on the client, see the example below a fallback to a JPG image (in case of the AVIF format is not supported yet ):   ![Picture33](https://www.alter-solutions.com/hs-fs/hubfs/Picture33.png?width=624&name=Picture33.png)   #### POLYFILL The polyfill to “create” the feature into the browser is the following.   However, as much as this polyfill is official, it does not work on private tabs in old browser versions of Firefox (53+) and Edge (17+).   It’s recommended to have polyfill + Use the tag for fallbacks.   To see all the compatible versions using the polyfill, follow the docs: [https://github.com/kagami/avif.js](https://github.com/kagami/avif.js)   #### TO KNOW MORE - Addy Osmani (Google Chrome team): [https://www.smashingmagazine.com/2021/09/modern-image-formats-avif-webp/](https://www.smashingmagazine.com/2021/09/modern-image-formats-avif-webp/) - Jake Archibald (Google Chrome team): [https://jakearchibald.com/2020/avif-has-landed/](https://jakearchibald.com/2020/avif-has-landed/) - AVIF website (blog and tutorials aggregator): [https://avif.io/blog/](https://avif.io/blog/) Share this article ## About the author ![](https://www.alter-solutions.com/hubfs/20211224_111816.jpg) Álvaro Junqueira Álvaro has been working with Front-end applications for more than 15 years, having started with Java and VB. His first contact with SPA technology was with React. Today he is an Angular specialist and passionate about Javascript. Working at AXA Belgium for almost 3 years, he also worked at one of the largest companies in Brazil and Portugal in the leadership of SPA technology, working nowadays with WebComponents and Micro front-ends. ## Latest Articles [ Software 4 June 2025 Code reviews: a trial or a team sport? Have you ever had that colleague who performs code reviews as if they were in a courtroom, ready to sentence your pull request (PR) to life imprisonment without the right to ... ](https://www.alter-solutions.com/articles/code-reviews-software-development) [ Cloud Computing Artificial Intelligence 3 June 2025 Artificial Intelligence in DevOps and Cloud Computing: transforming business strategies Have you ever thought about how quickly Artificial Intelligence (AI) has established itself and transformed digital infrastructure and software development? Indeed, the ... ](https://www.alter-solutions.com/articles/artificial-intelligence-devops-cloud-computing) [ Cybersecurity 15 April 2025 When a phone call is all it takes: testing human resilience through vishing The underestimated voice of cyberattacks When we talk about cyberattacks, we often picture malware, phishing e-mails, or ransomware. But in many real-world intrusions, the first ... ](https://www.alter-solutions.com/articles/vishing-voice-phishing-cyberattack) ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Álvaro Junqueira", "url" : "https://www.alter-solutions.com/articles/author/álvaro-junqueira" }, "dateModified" : "2026-03-13T14:23:48.923Z", "datePublished" : "2022-07-12T13:39:00.000Z", "headline" : "AVIF Image Format: what is it and can it improve performance of Web Applications?", "image" : [ "https://www.alter-solutions.com/hubfs/17.%201300x650_ImagensAVIF.png" ], "mainEntityOfPage" : { "@id" : "https://www.alter-solutions.com/articles/avif-images-what-is-it", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.alter-solutions.com/hubfs/act%20digital/Logo/32x32_Favicon.svg" }, "name" : "Alter Solutions" } } ``` ```json { "@context" : "http://schema.org", "@id" : "https://www.alter-solutions.com/articles/avif-images-what-is-it", "@type" : "WebPage", "datePublished" : "2022-07-12 13:39:00", "description" : "The AVIF image format provides better compression than WebP, JPEG, PNG and GIF formats and is designed to supersede them in Web Development.", "inLanguage" : "en", "isPartOf" : { "@id" : "/#website", "@type" : "WebSite", "inLanguage" : "en", "name" : "act digital Group", "publisher" : { "@id" : "www.alter-solutions.com/#organization", "@type" : "Organization", "logo" : { "@id" : "https://5690371.fs1.hubspotusercontent-eu1.net/hubfs/5690371/act%20digital/Logo/32x32_Favicon.svg", "@type" : "ImageObject", "caption" : "act digital logo", "url" : "https://5690371.fs1.hubspotusercontent-eu1.net/hubfs/5690371/act%20digital/Logo/32x32_Favicon.svg" }, "name" : "act digital Group", "sameAs" : [ "https://www.linkedin.com/company/alter-solutions-group", "https://www.instagram.com/lifeataltersolutions/", "https://www.facebook.com/AlterSolutionsOfficial", "https://www.youtube.com/@altersolutionsit" ], "url" : "www.alter-solutions.com" }, "url" : "www.alter-solutions.com" }, "mainEntity" : { "@type" : "ProfessionalService", "description" : "International IT and Cybersecurity consulting company. We develop and secure your IT projects, and enhance your teams with our IT Outsourcing and Nearshoring services.", "name" : "act digital" }, "name" : "AVIF Image Format: what is it and can it improve performance of Web Applications?", "url" : "https://www.alter-solutions.com/articles/avif-images-what-is-it" } ``` ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Álvaro Junqueira", "url" : "/" }, "dateModified" : "2022-07-12T153900+0200", "datePublished" : "2022-07-12T153900+0200", "description" : "The AVIF image format provides better compression than WebP, JPEG, PNG and GIF formats and is designed to supersede them in Web Development.", "headline" : "AVIF Image Format: what is it and can it improve performance of Web Applications?", "image" : { "@type" : "ImageObject", "url" : "https://5690371.fs1.hubspotusercontent-na1.net/hubfs/5690371/17.%201300x650_ImagensAVIF.png" }, "mainEntityOfPage" : { "@id" : "AVIF Image Format: what is it and can it improve performance of Web Applications?", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://5690371.fs1.hubspotusercontent-eu1.net/hubfs/5690371/act%20digital/Logo/32x32_Favicon.svg" }, "name" : "act digital" } } ```