--- 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.pt/hubfs/17.%201300x650_ImagensAVIF.png --- [![act digital group logo](https://www.alter-solutions.pt/hubfs/act%20digital/Logo/act_digital_temporary_logo.svg) ](https://www.alter-solutions.pt) [ Ofertas emprego ![arrow-white](https://www.alter-solutions.pt/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-white.svg) ![arrow-orange](https://www.alter-solutions.pt/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-yellow.svg) ![arrow-blue](https://www.alter-solutions.pt/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-blue.svg) ](https://www.alter-solutions.pt/junta-te-a-equipa) [ Contacta-nos ![arrow-white](https://www.alter-solutions.pt/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-white.svg) ![arrow-orange](https://www.alter-solutions.pt/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-yellow.svg) ![arrow-blue](https://www.alter-solutions.pt/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-blue.svg) ](https://www.alter-solutions.pt/conta-nos-mais-sobre-ti) ![Globe](https://www.alter-solutions.pt/hubfs/Globe-Solid.webp) Portugal [Global](https://www.alter-solutions.com/) [Portugal](https://www.alter-solutions.pt/) [França](https://www.alter-solutions.fr/) [Alemanha](https://www.alter-solutions.de/) [Bélgica](https://www.alter-solutions.be/) [Espanha](https://www.alter-solutions.es/) [Polónia](https://www.alter-solutions.pl/) [Canadá](https://www.alter-solutions.ca/) [EUA](https://www.alter-solutions.com/en-us/) [Marrocos (FR)](https://www.alter-solutions.ma/) [Marrocos (AR)](https://www.alter-solutions.ma/ar-ma/) ![Group 143](https://www.alter-solutions.pt/hs-fs/hubfs/Group%20143.webp?width=18&height=17&name=Group%20143.webp) [![act digital group logo](https://www.alter-solutions.pt/hubfs/act%20digital/Logo/act_digital_temporary_logo.svg) ](https://www.alter-solutions.pt) ![Globe](https://www.alter-solutions.pt/hubfs/Globe-Solid.webp) [Global](https://www.alter-solutions.com/) [Portugal](https://www.alter-solutions.pt/) [França](https://www.alter-solutions.fr/) [Alemanha](https://www.alter-solutions.de/) [Bélgica](https://www.alter-solutions.be/) [Espanha](https://www.alter-solutions.es/) [Polónia](https://www.alter-solutions.pl/) [Canadá](https://www.alter-solutions.ca/) [EUA](https://www.alter-solutions.com/en-us/) [Marrocos (FR)](https://www.alter-solutions.ma/) [Marrocos (AR)](https://www.alter-solutions.ma/ar-ma/) [ Ofertas emprego ![arrow-white](https://www.alter-solutions.pt/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-white.svg) ![arrow-orange](https://www.alter-solutions.pt/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-yellow.svg) ![arrow-blue](https://www.alter-solutions.pt/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-blue.svg) ](https://www.alter-solutions.pt/junta-te-a-equipa) [ Contacta-nos ![arrow-white](https://www.alter-solutions.pt/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-white.svg) ![arrow-orange](https://www.alter-solutions.pt/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-yellow.svg) ![arrow-blue](https://www.alter-solutions.pt/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-blue.svg) ](https://www.alter-solutions.pt/conta-nos-mais-sobre-ti) ![Group 143](https://www.alter-solutions.pt/hs-fs/hubfs/Group%20143.webp?width=18&height=17&name=Group%20143.webp) ![Rectangle 239](https://www.alter-solutions.pt/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.pt/hs-fs/hubfs/Alter%20Solutions%202022/Icons%20(for%20use%20and%20contribution)/Rectangle%20239.png?width=13&height=13&name=Rectangle%20239.png) ## De que estás à procura? Pesquisar 12 Julho 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.pt/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.pt/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 ## Autoria ![](https://www.alter-solutions.pt/hubfs/20211224_111816.jpg) Álvaro Junqueira O Álvaro trabalha com aplicações Front-end há mais de 15 anos, tendo começado com Java e VB. O seu primeiro contacto com a tecnologia SPA foi com React. Hoje é um especialista em Angular e apaixonado por Javascript. Trabalhou na AXA Bélgica durante quase 3 anos e também numa das maiores empresas do Brasil e Portugal na liderança da tecnologia SPA, trabalhando atualmente com WebComponents e Micro front-ends. ## Últimos artigos [ Software 4 Junho 2025 Revisão de código: julgamento ou jogo de equipa? Você já teve aquele colega que faz revisão de código como se estivesse num tribunal, pronto para condenar seu pull request (PR) à prisão perpétua sem direito a recurso? ](https://www.alter-solutions.pt/blog/revisao-codigo-desenvolvimento-software) [ Cloud Computing Inteligência Artificial 3 Junho 2025 Inteligência Artificial em DevOps e Cloud Computing: transformação de estratégias empresariais Já parou para pensar na velocidade com que a Inteligência Artificial (IA) se tem afirmado e transformado a infraestrutura digital e o desenvolvimento de software? De facto, a ... ](https://www.alter-solutions.pt/blog/inteligencia-artificial-devops-cloud-computing) [ Cibersegurança 15 Abril 2025 Quando uma chamada telefónica basta: testar a resiliência humana através do vishing A voz subestimada dos ciberataques Quando falamos de ciberataques, muitas vezes imaginamos malware, e-mails de phishing ou ransomware. Mas em muitas intrusões reais, o primeiro ... ](https://www.alter-solutions.pt/blog/vishing-phishing-voz-ciberataque) ```json { "@context" : "http://schema.org", "@id" : "https://www.alter-solutions.pt/blog/avif-images-what-is-it", "@type" : "WebPage", "datePublished" : "2022-07-12 13:41: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" : "pt", "isPartOf" : { "@id" : "/#website", "@type" : "WebSite", "inLanguage" : "pt", "name" : "act digital em Portugal", "publisher" : { "@id" : "www.alter-solutions.pt/#organization", "@type" : "Organization", "email" : "hello.portugal@alter-solutions.com", "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 em Portugal", "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.pt" }, "url" : "www.alter-solutions.pt" }, "mainEntity" : { "@type" : "ProfessionalService", "address" : { "addressCountry" : "PT", "image" : "https://5690371.fs1.hubspotusercontent-eu1.net/hubfs/5690371/act%20digital/Logo/32x32_Favicon.svg", "postalCode" : "1050-191 Lisboa", "streetAddress" : "Av. da República, 18 - 15º" }, "description" : "Apoiamos as empresas na sua Transformação Digital e construímos soluções à medida de Software, aplicações móveis e Cloud Computing. Experiência comprovada em projetos de Outsourcing IT e Nearshore.", "name" : "act digital em Portugal" }, "name" : "AVIF Image Format: what is it and can it improve performance of Web Applications?", "url" : "https://www.alter-solutions.pt/blog/avif-images-what-is-it" } ``` ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Álvaro Junqueira", "url" : "/" }, "dateModified" : "2022-07-12T154100+0200", "datePublished" : "2022-07-12T154100+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" } } ```