Updates to AVIF following the release of Safari 16

[Schweinepriester]

While https://webkit.org/blog/13152/webkit-features-in-safari-16-0/ says

Safari for iOS 16 includes support for still images compressed using the AVIF format. Developed by the Alliance for Open Media, AVIF is an alternative to image formats like JPEG, PNG, GIF, or WebP. It offers multiple color spaces, lossless and lossy compression, and more. Support for AVIF will also come to macOS Ventura and iPadOS in October.

testing using https://tests.caniuse.com/avif, which shows green in Chrome, seems to indicate otherwise, even on Safari for iOS 16:

[Schweinepriester]

@jensimmons do you know more, esp. regarding Safari for iOS 16.0?

[jensimmons]

Safari 16.0 for iOS does not support animated AVIF.

Safari 16.0 for macOS only supports macOS Monterey and macOS Big Sur. And neither of those versions of macOS support AVIF. So Safari 16.0 for macOS does not support AVIF. That is correct.

[Schweinepriester]

Safari 16.0 for iOS does not support animated AVIF.

Thank you! :)

But what about still AVIFs?
Or is something not ordinary about the still test image used in https://tests.caniuse.com/avif, i.e. do you consider this still image not a valid case?

[jensimmons]

Safari 16.0 for iOS does support still image AVIF. I don't know what's going on with the Can I Use test. (I'm asking folks here about it.)

Safari 16.0 for macOS Monterey and macOS Big Sur (which also shipped today), does not support AVIF.

[Schweinepriester]

Thank you again, then I will have to change the PR before merging!

@Fyrd Would you investigate the still test image? 🤔

[Fyrd]

I've added more samples which do indeed work. Curious to learn what's up with the first one too! I think I used some online conversion tool to generate it, maybe it was made based on an older version of the AVIF spec? But worth noting it works in Chrome & Firefox.

[mathiasbynens]

Safari 16.0 for iOS does support still image AVIF.

Shipping AVIF without animated AVIF support means developers can no longer rely on <picture> + <source> to do format selection for animations. :(

Consider the following HTML, where the developer properly makes use of <picture> to let the browser pick the most appropriate image format to display an animation:

<picture>
  <source srcset="animation.avif" type="image/avif">
  <source srcset="animation.webp" type="image/webp">
  <source srcset="animation.apng" type="image/apng">
  <img src="animation.gif" width="420" height="420" alt="…">
</picture>

• In browsers with animated AVIF support, and browsers without AVIF support, this renders an animation. ✅
• In Safari 16 on iOS, it renders a still image, since it supports AVIF but not animated AVIF. ❌

Any web pages already using this pattern are broken in the new Safari 16 for iOS. (Broken in the sense that they went from displaying an animation to now only displaying a still image.)

@jensimmons Back in July, you said animated AVIF was already supported. What changed?

[jensimmons]

This PR doesn't yet reflect what is happening. I'm going to create a new one.

[Schweinepriester]

I'll update shortly! o7

[Schweinepriester]

Updated as well…

[jensimmons]

The Safari 16.1 beta release notes are now at: https://developer.apple.com/documentation/safari-release-notes/safari-16_1-release-notes

Along with the Safari 16.0 announcement from Monday, you can see what is happening with AVIF.

Safari 16.0 on macOS

• does not have AVIF support

Safari 16.0 on iOS

• includes support for AVIF still images

Safari 16.1 on macOS

• adds support for AVIF (both still images and animated image sequences), for macOS Ventura only

Safari 16.1 on iOS

• adds support for AVIF animated image sequences

Safari Technology Preview (for macOS)

• currently supports both still images and animated image sequences, for macOS Ventura only

Regarding note 4: We do support "images with noise synthesis" (also known by other names). I know someone created a single test and filed an issue saying that we do not have support. But it's likely they created their AVIF file with an older library that did not yet fully support the AVIF standard. Please remove this note.

Regarding note 5: "Only supported on iOS, not iPadOS". This is unnecessary. Safari 16.0 shipped with iOS 16 for iPhone only. iPadOS 16 will ship in October with Safari 16.1. There is no Safari 16.0 for iPadOS.

All of these changes, plus editorial improvements to note 2 and 3, are in this PR: https://github.com/Fyrd/caniuse/pull/6452/files

[Fyrd]

@Schweinepriester Went ahead and merged @jensimmons 's PR so closing this one, but thanks of course for your contributions on this. :)

[jensimmons]

FYI, libavif updated support yesterday for animated AVIF sequences — now the alpha channel track sets the handler_type to 'auxv', as defined in the HEIF specification. AOMediaCodec/libavif#1120

Anyone who used libavif to create animated AVIF and saw issues, try creating a new file. In fact, several services/libraries that create AVIF files have updated their support in the last week, so please do recreate any non-working test files.

[adamsilverstein]

@jensimmons Do you have any plans for HDR support for AVIF? Currently it looks like Safari lacks HDR support (discussed here) which is a unique feature of AVIF that would be great to support!