Published at
Updated at
Reading time

There's been some buzz about Safari (and its "quirks") lately. In its latest round, the webdev community discovered that Webkit (the engine powering Safari) supports the new and fancy AVIF image format, but Safari does not. Outrageous โ€“ how can that be?

I haven't played much with the new image format yet, but it's supposed to lead to smaller files than webp and jpeg. That's great news โ€“ a faster web is a better web. You can use the picture element, let the browser load the best and newest image format, and call it a day. Win-win!

But Apple decided not to ship AVIF in Safari because the image format is not supported in their operating systems yet.

Why would one disable features that make websites faster?

Apple products are user-centric and usually very easy to use. Once people understand how the products work, there are very few obstacles. There's a reason why I bought my mum an iPhone. ๐Ÿ˜‰

And most of my friends on macOS use Safari because everything runs smoothly and integrates seamlessly. And despite web developers being unhappy about Safari's slow progression, users think it's a decent and fast browser.

What happens when Safari would support AVIF even though macOS or iOS doesn't support it. People would surely save some bytes on the wire, but some people would be lost entirely.

Let's look at an example and download an AVIF image in Chrome on macOS. This article includes a picture element shipping AVIF.

Save image context dialog on macOS in Chrome

Even though the picture element has a JPEG fallback option, it's not included in the "Save as" dialog. Users can only download AVIF to save the image.

"Save as" dialog on macOS only showing the AVIF file format

And that works great, but now they're hitting a wall. macOS doesn't understand AVIF; there's no Finder preview or recommended program to open the downloaded image. Visitors see an image, download it and are stuck.

(I'm pretty sure it was the same for webp images a year ago, and it really annoyed me!)

macOS finder showing an not recognized AVIF file

A developer might understand what's going on, but this situation is pretty much a dead-end for a person without knowledge about image compression or web development.

There's the question of what this AVIF thing is, and then there's no way to escape it or download a "real image" from the browser. That's far away from a good user experience!

I wonder if browser vendors could adjust the "Save as" dialog when dealing with the picture element. A selection of jpeg and AVIF could potentially help in this situation.

I'd love to see AVIF coming to the web and all the browsers as soon as possible, but I get why Apple is holding back on that one. A faster web is one thing, but in this case, a stellar user experience is another one.

I guess, it's the usual matter of trade-offs. ๐Ÿคทโ€โ™‚๏ธ

Was this post helpful?
Yes? Cool! You might want to check out Web Weekly for more WebDev shenanigans. The last edition went out 3 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles