AVIF Image Format

Just as we started to get great support for webP in our browsers, a new image format as landed some support in Firefox and Chrome. The format was developed by the Alliance for Open Media which, includes companies like Google, Amazon, and Microsoft.

There is a great walkthrough on the format and the benefits of the format below.

How to Use AVIF: The New Next-Gen Image Compression Format — Lightspeed
Start using next-gen .avif images today progressively with the <picture> element. The format is ~50% smaller in size compared to JPEG, and ~20% smaller than WebP.

If you want to start to play around with using the format the best way to start today is using the beta of Chrome Labs great compression tool Squoosh.

Then if you want to get the image in your project the code sample below is another easy way to start working with the format now.

Subscribe to Stack Snacks

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
[email protected]
Subscribe