At the time of writing, AVIF has 64% support on browsers. Google Chrome and Opera support it. Firefox will support it from June 2021. Safari doesn't yet have AVIF support. However, AVIF is an invention of the non-profit industry consortium Alliance of Open Media AOM. Major browser giants Apple, Mozilla and Google are all part of the project, so support can be expected relatively quickly.
- ✓Does not download more than one image at a time
- ✓Native support for selecting the most appropriate image
- ✓96% browser support and automatic fallback
- ✓Getting this implemented is easy and straightforward
1<picture> 2 <source srcSet="image.avif" type="image/avif" /> 3 <source srcSet="image.webp" type="image/webp" /> 4 <img 5 width="1280" height="720" decoding="async" loading="lazy" 6 src="image.jpg" alt="an avif image" /> 7</picture>
PS: The lazy loading attribute is supported by 75% of all browsers, make use of it! Also, don't forget to add width and height to avoid a Layout Shift. Providing width and height is more important than ever.This is a nice set up for all visitors. Just make sure the first source tag is an AVIF imagefor the browser to display the first media type it can handle.
Okay, this is probably not as challenging as we originally thought, but creating AVIF images for any viewport of any format can be exhausting. Nevertheless, if your website does not have many images, it is a good way to prepare for the future.
1<picture> 2 3<source 4sizes="(max-width: 640px) 100vw, 640px" 5srcSet="/image-1280.avif 1280w, /image-640.avif 640w, /image-320.avif 320w" 6type="image/avif" /> 7 8<source 9sizes="(max-width: 640px) 100vw, 640px" 10srcSet="/image-1280.avif 1280w, /image-640.webp 640w, /image-320.webp 320w" 11type="image/webp" /> 12 13<source 14sizes="(max-width: 640px) 100vw, 640px" 15srcSet="/image-1280.avif 1280w, /image-640.jpg 640w, /image-320.jpg 320w" 16type="image/jpg" /> 17 18<img 19width="1280" height="720" decoding="async" loading="lazy" 20src="/image.jpg" alt="an avif image" /> 21 22</picture>
Please remember to provide fallback images for older browser versions or experimental use as in Firefox. Otherwise, your user experience may suffer as images are not rendered. AVIF is also good for backgrounds. Check out the
- aomedia.org · about
- aomedia.org · av1-features · get-started
- caniuse.com · avif
- caniuse.com · loading-lazy-attr
- caniuse.com · picture
- caniuse.com · webp
- css-tricks.com · avif-has-landed
- developer.apple.com (..) ari-14-release-notes
- industrialempathy.com (..) · image-optimizations
- mediaevent.de (..) te-jpg-avif-png-webp
- tollwerk.de (..) zjpeg-webp-avif-sqip
Related search terms
- a more optimal image format for websites
- a way to leverage new image formats in html
- avif image format – the next-gen compression codec
- future of avif: browser compatibility for chrome and firefox
- how to use avif, the new next-gen image compression format in html
- is your browser capable of displaying avif images?