AVIF has landed

<picture<!-- use if 

Celý článek

Everybody is talking about AVIF today because of Jake’s blog post. As the say, I was today years old when I learned AVIF was a thing. But thanks to web technology being ahead of the game for once, we can already take advantage of it.

This will be easier if you’ve abstracted your responsive images syntax. Wherever you’re using <picture> you can slip it in such that supporting browsers get it and non-supporting do not:

<picture>
  <!-- use if possible -->
  <source type="image/avif" srcset="snow.avif">

  <!-- fallback -->
  <img alt="Hut in the snow" src="snow.jpg">
</picture>

Wanna play with it right now? Jake updated Squoosh to support it. CodePen also supports it. Here’s a Pen (I forked off Shaw’s original):

Check out the Pug HTML there to flop out other sources. If the URL to the image you put it is hosted on CodePen’s Asset Hosting, it will do all the conversions and such automatically. The images go through a Cloudflare Worker which is what does the conversions, and supports AVIF. For new images, you might feel the response time lag on that first request for AVIF before it is cached, seems like generating them takes a lot more work.

Like any format, it really depends on the type of image it is. While screwing around, I put an already-compressed JPG as the source, and AVIF more than doubled the size of it’s version. So you’ll have to be careful that you aren’t making things slower by using it.

We’ve had it good with new image formats so far. WebP is nearly always the best format so much of the logic has gone down the if (webp_supported) { use_webp } road. But now, not only is AVIF only sometimes smaller, the way it does compression leads to different visual results, so even when it is smaller, you might not be happy with the look.

My ideal scenario is always some kind of image CDN with ?format=auto&quality=auto where it picks the best possible format and quality automatically, never making it worse than the original. But then also having overrides possible so if you aren’t happy with an automatic decision, you can fix it. I was going to test Cloudinary’s auto-formatting choices, but they aren’t supporting it yet. I’d bet they will soon, but I also bet it’s darn complicated to get right.

Direct Link to Article — Permalink

The post AVIF has landed appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.