--- 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.pl/hubfs/17.%201300x650_ImagensAVIF.png --- [![act digital group logo](https://www.alter-solutions.pl/hubfs/act%20digital/Logo/act_digital_temporary_logo.svg) ](https://www.alter-solutions.pl) [ Projekty ![arrow-white](https://www.alter-solutions.pl/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-white.svg) ![arrow-orange](https://www.alter-solutions.pl/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-yellow.svg) ![arrow-blue](https://www.alter-solutions.pl/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-blue.svg) ](https://www.alter-solutions.pl/nasze-oferty-pracy) [ Kontakt z nami ![arrow-white](https://www.alter-solutions.pl/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-white.svg) ![arrow-orange](https://www.alter-solutions.pl/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-yellow.svg) ![arrow-blue](https://www.alter-solutions.pl/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-blue.svg) ](https://www.alter-solutions.pl/kontakt-opowiedz-nam-o-sobie) ![Globe](https://www.alter-solutions.pl/hubfs/Globe-Solid.webp) Polska [Global](https://www.alter-solutions.com/) [Polska](https://www.alter-solutions.pl/) [Niemcy](https://www.alter-solutions.de/) [Francja](https://www.alter-solutions.fr/) [Belgia](https://www.alter-solutions.be/) [Portugalia](https://www.alter-solutions.pt/) [Hiszpania](https://www.alter-solutions.es/) [Kanada](https://www.alter-solutions.ca/) [USA](https://www.alter-solutions.com/en-us/) [Maroko (FR)](https://www.alter-solutions.ma/) [Maroko (AR)](https://www.alter-solutions.ma/ar-ma/) ![Group 143](https://www.alter-solutions.pl/hs-fs/hubfs/Group%20143.webp?width=18&height=17&name=Group%20143.webp) [![act digital group logo](https://www.alter-solutions.pl/hubfs/act%20digital/Logo/act_digital_temporary_logo.svg) ](https://www.alter-solutions.pl) ![Globe](https://www.alter-solutions.pl/hubfs/Globe-Solid.webp) [Global](https://www.alter-solutions.com/) [Polska](https://www.alter-solutions.pl/) [Niemcy](https://www.alter-solutions.de/) [Francja](https://www.alter-solutions.fr/) [Belgia](https://www.alter-solutions.be/) [Portugalia](https://www.alter-solutions.pt/) [Hiszpania](https://www.alter-solutions.es/) [Kanada](https://www.alter-solutions.ca/) [USA](https://www.alter-solutions.com/en-us/) [Maroko (FR)](https://www.alter-solutions.ma/) [Maroko (AR)](https://www.alter-solutions.ma/ar-ma/) [ Projekty ![arrow-white](https://www.alter-solutions.pl/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-white.svg) ![arrow-orange](https://www.alter-solutions.pl/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-yellow.svg) ![arrow-blue](https://www.alter-solutions.pl/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-blue.svg) ](https://www.alter-solutions.pl/nasze-oferty-pracy) [ Kontakt z nami ![arrow-white](https://www.alter-solutions.pl/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-white.svg) ![arrow-orange](https://www.alter-solutions.pl/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-yellow.svg) ![arrow-blue](https://www.alter-solutions.pl/hubfs/Alter%20Solutions%202022/ASSETS-%20Only%20for%20dev/ASSET-arrow-blue.svg) ](https://www.alter-solutions.pl/kontakt-opowiedz-nam-o-sobie) ![Group 143](https://www.alter-solutions.pl/hs-fs/hubfs/Group%20143.webp?width=18&height=17&name=Group%20143.webp) ![Rectangle 239](https://www.alter-solutions.pl/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.pl/hs-fs/hubfs/Alter%20Solutions%202022/Icons%20(for%20use%20and%20contribution)/Rectangle%20239.png?width=13&height=13&name=Rectangle%20239.png) ## Czego szukasz ? Szukaj 12 lipca 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.pl/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.pl/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/) Udostępnij ten artykuł ## O Autorze ![](https://www.alter-solutions.pl/hubfs/20211224_111816.jpg) Álvaro Junqueira Álvaro pracuje z aplikacjami front-endowymi od ponad 15 lat, zaczynając od Javy i VB. Jego pierwszy kontakt z technologią SPA miał miejsce dzięki React, obecnie jest specjalistą Angulara i pasjonatem języka Javascript. Pracując w Axa Belgia przez prawie 3 lata, pracował również w jednej z największych firm w Brazylii i Portugalii jako lider technologii SPA, obecnie zajmuje się WebComponents i Micro front-ends. ## Najnowsze artykuły [ Cyberbezpieczeństwo 13 stycznia 2025 Zgodność z DORA: jak przeprowadzamy testy penetracyjne oparte na zagrożeniu? Co by się stało, gdyby globalnie krytyczna instytucja bankowa upadła z powodu incydentu z zakresu cyberbezpieczeństwa? Prawdopodobnie cały ekosystem finansowy zostałby dotknięty, ... ](https://www.alter-solutions.pl/blog/dora-testy-penetracyjne-oparte-zagrozeniu) [ Cyberbezpieczeństwo 11 listopada 2024 Cyberprzestępczość w Black Friday: czyli jak firmy mogą pozostać bezpieczne? Black Friday zbliża się wielkimi krokami, a to oznacza dla sprzedawców internetowych na całym świecie jedno: z jednej strony wzrost ruchu na stronach internetowych, liczby ... ](https://www.alter-solutions.pl/blog/cyberprzestepczosc-black-friday-firmy) [ Cyberbezpieczeństwo 25 października 2024 Jak firmy powinny zarządzać swoim budżetem na cyberbezpieczeństwo? Żadna firma nie traktuje już cyberbezpieczeństwa jako lekkiej sugestii. Firmy każdej wielkości* wiedzą, że ochrona ich zasobów cyfrowych i operacji wymaga posiadania odpowiedniego ... ](https://www.alter-solutions.pl/blog/firmy-budzetem-cyberbezpieczenstwo) ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Álvaro Junqueira", "url" : "https://www.alter-solutions.pl/blog/author/álvaro-junqueira" }, "dateModified" : "2025-06-02T12:04:22.098Z", "datePublished" : "2022-07-12T13:45:00.000Z", "headline" : "AVIF Image Format: what is it and can it improve performance of Web Applications?", "image" : [ "https://www.alter-solutions.pl/hubfs/17.%201300x650_ImagensAVIF.png" ], "mainEntityOfPage" : { "@id" : "https://www.alter-solutions.pl/blog/avif-images-what-is-it", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.alter-solutions.pl/hubfs/act%20digital/Logo/32x32_Favicon.svg" }, "name" : "Alter Solutions" } } ``` ```json { "@context" : "http://schema.org", "@id" : "https://www.alter-solutions.pl/blog/avif-images-what-is-it", "@type" : "WebPage", "datePublished" : "2022-07-12 13:45: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" : "pl", "isPartOf" : { "@id" : "/#website", "@type" : "WebSite", "inLanguage" : "pl", "name" : "act digital w Polsce", "publisher" : { "@id" : "www.alter-solutions.pl/#organization", "@type" : "Organization", "email" : "hello.warsaw@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 w Polsce", "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.pl" }, "url" : "www.alter-solutions.pl" }, "mainEntity" : { "@type" : "ProfessionalService", "address" : { "addressCountry" : "PL", "image" : "https://5690371.fs1.hubspotusercontent-eu1.net/hubfs/5690371/act%20digital/Logo/32x32_Favicon.svg", "postalCode" : "01-208 Warszawa", "streetAddress" : "Przyokopowa 31" }, "description" : "act digital jest międzynarodową firmą konsultingową IT. Wzmacniamy Twoje zespoły dzięki naszym usługom Outsourcingu IT i Nearshore. Dostępny jest również body leasing oraz team leasing.", "name" : "act digital w Polsce" }, "name" : "AVIF Image Format: what is it and can it improve performance of Web Applications?", "url" : "https://www.alter-solutions.pl/blog/avif-images-what-is-it" } ``` ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Álvaro Junqueira", "url" : "/" }, "dateModified" : "2022-07-12T154500+0200", "datePublished" : "2022-07-12T154500+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" } } ```