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.
Leave a comment