Going fast and breaking things: All-in on AVIF images

With the release of iOS 16, iPadOS 16.1 and macOS Ventura, Apple have finally landed support for AVIF images across all platforms. This move brings the Safari browser up to speed with other modern alternatives such as Firefox and Chrome.

The AVIF codec has plenty to offer, producing higher bit-depth, better looking images that compress to a significantly smaller file size. As previously mentioned I'm excited for the format, so today I'm going all-in on AVIF.

If you've updated to the latest releases (or were already using supported software), you should see a lovely Vellum fluid simulation in the image below.

There are several advantages to standardising around a single file type. You can be certain every reader sees the exact same image, while fewer images make catalogue management considerably easier.

As good as the new support is, a few issues surrounding Safari's implementation for AVIF remain. Currently 10bit AVIF images containing an alpha channel will not render. Additionally, setting the HTML decoding=async attribute prevents 10bit images from displaying. I have logged both issues and I'm currently working around the limitations on this site, but hopefully the WebKit team will address the issues soon.

Neither Firefox nor Chrome have any trouble dealing with images that trip up Safari. In fact, switching to decoding=sync makes the browsing experience slightly worse for users of Firefox, Edge, and Chrome, which is unfortunate.

Minor quibbles aside, it is incredibly refreshing to be working with this modern image specification. The format is better for both end-users and content creators. If you've already upgraded to the latest operating systems, give AVIF a try.