How to embed AV1 Image File Format (AVIF) images

New in Chromium 85 is support for the AV1 Image File Format (AVIF), which is pretty impressive:

AVIF offers significant file size reduction for images compared with JPEG or WebP; ~50% savings compared to JPEG, and ~20% savings compared to WebP.

🦊 Using Firefox and can’t wait to use AVIF images? Set the image.avif.enabled flag to true to enable experimental support for it.

Time to tweak the modern way to embedding images a bit, and add AVIF in there:

<picture>
  <source srcset="/images/cereal-box.avif" type="image/avif" />
  <source srcset="/images/cereal-box.webp" type="image/webp" />
  <img src="/images/cereal-box.jpg" alt="Description of Photo" />
</picture>

The browser will load the first source it can interpret, eventually falling back to the JPG if none are supported.

☝️ Now that Safari is about to support WebP in version 14, the image/jp2 image that was in the original snippet was also dropped.

How to Use AVIF: The New Next-Gen Image Compression Format →

UPDATE 2020.09.08: Jake Archibald just released an extensive post on AVIF packed with examples and comparisons, worth checking out.

Published by Bramus!

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.