26
How to use AVIF today!
Original Post: https://praveenpuglia.com/blog/how-to-use-avif-today/
Short one!
One of the interesting things that I wanted to try out is to serve AVIF images because boy it compresses! Hoof! You can literally get the same quality in less than half the size.
Here' the thing though. AVIF support is pretty flaky at the moment. That means I would have to serve AVIF image to browsers that do support it and serve a diff format to those who don't.
Good'ol
<picture>
element comes to rescue. We declare multiple source
s pointing to the same image in diff formats. The browsers pickup the best image they support. So Chrome and Opera end up serving AVIF to us and others serve the WEBP version.<picture>
<source srcset="home-banner.avif" type="image/avif" />
<source srcset="home-banner.webp" type="image/webp" />
<img
class="home-banner"
decoding="async"
loading="lazy"
src="home-banner.webp"
alt="Home Banner"
/>
</picture>
That's it!
Read More
26