macOS Ventura now supports AVIF: is it time to make the switch?
AVIF (AV1 Image File Format) is a next-generation image format likely to supersede WebP, JPEG, PNG and GIF.
If you’ve ever tested your website – or your company’s website – with Google Lighthouse to find out your web vitals, you may have seen the message "serve images in modern formats".
This means replacing older image formats like JPEG and GIF with newer, next-generation formats like AVIF and WebP.
The problem is that JPEG, GIF and PNG have very good browser support, whereas these new formats don’t enjoy as much support. In plain English, the images won’t work in old browsers.
However, the newer formats offer much better compression which usually results in smaller image files and faster loading websites.
So let’s test it, an unoptimised 1167x1166 pixel image of myself taken on my phone. I’ve converted it to a JPEG, GIF, PNG, WebP and AVIF using the sharp-cli command line tool.
For fairness, I’ve also converted a PNG version of the BBC logo because different image formats are for different things. Logos and graphics (not photos) are often best saved in PNG format.
I used the default settings for each format. Take a look at the image size after conversion.
| Image format | Browser support | Sample Photo Size | Sample Graphic Size |
|---|---|---|---|
| JPEG | 100% | 138KB | 8KB |
| GIF | 100% | 732KB | 8KB |
| PNG | 100% | 1700KB | 14KB |
| WebP | 97% | 87KB | 3KB |
| AVIF | 73% | 28KB | 2KB |
Remembering different formats are for different things–JPEG doesn’t support transparency for example–you can see WebP and AVIF images are smaller because these formats offer better compression.
In reality, we can serve images in multiple formats and let the browser decide which one to use. This achieves backward compatibility and optimising your website–a win-win.
Here’s how you do that:
<picture>
<source type="image/avif" src="image.avif" />
<source type="image/webp" src="image.webp" />
<img src="image.jpg" />
</picture>
Let’s unpack that:
- Wrap everything between
<picture>tags - Use your
<img>tag as usual and put it last - Add source tags for alternative image formats
- Order is everything! The
<img>tag should contain the image with the widest browser support (e.g., JPEG, GIF, PNG).
Then, the <source> tags are read in order from top to bottom. So, you want your smallest format with the best compression (most likely AVIF) first at the top and then WebP second, after AVIF but before JPEG.
You will want to consider other things too, such as:
- Adding alt text
- Adding responsive image sizes
- Adding a preload
It’s worth mentioning the preload won’t be perfect, you’ll have to choose one of the following strategies:
- Preload all image formats
- Preload the format most likely to be loaded (probably WebP in this example)
- Preload the image in the newest, highest compression format (AVIF)
- I’ve got quite far into this post without answering the question! Here’s the answer...
There is a really important distinction here. Safari on macOS and iOS are different and introduced AVIF support at different times.
Here are the dates:
- 12 Sep 2022: AVIF supported in Safari on iOS 16+ (but not animated images)
- 24 Oct 2022: full AVIF support comes to Safari on iOS 16+
- 24 Oct 2022: full AVIF support comes to Safari for macOS (but only from the Ventura update onwards)
So who hasn’t got AVIF support? That’ll be anyone using Safari on macOS who hasn’t updated to Ventura yet.
Other browsers on macOS do support AVIF, such as Chrome and Firefox, regardless of macOS version.
The answer then ... yes, now is a good time to start introducing AVIF images into your websites and apps. But only if you’re using a fallback more widely supported image formats like WebP, JPEG and PNG.