[This post is in English because there are many people around the world facing the same issue.]
Seeing question marks instead of images on your iPhone? That’s probably because it’s an .avif image and the recent iOS (>16) has troubles with that. Right after the launch of Apple’s IOS 16, we saw many question marks at havendienst.nl while browsing it with an updated iPhone. In this blog post we tell you how we deal with this situation.
How do we handle image priority?
Havendienst.nl is using avif images and when a user doesn’t support that, we offer a webp image. If the webp image is not supported, we offer the classic .jpg/.png/.gif image.
Examples of request headers
Your browser will send an ‘accept’ header with each request. An example of such an accept header (Chome v105 on Windows 10) can be:
Accept : text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
As you can see, Chrome v105 on Windows 10 says that it handle avif images as well as webp and apng images.
Apple devices use a different request headers for different type of content. The following is an Example of a iPhone 11 running IOS16.02 doing a non-image request:
Accept: text/html,application/xhtml+xml,application/xm;q=0
When Apple IOS 16 devices request an image, they send avif in the request header which suggest that they fully support avif images. The opposite is true.
AVIF image support is broken on IOS 16
First, Apple doesn’t seem to support animated avif images, only static ones.
Second, it doesn’t support avif images when they are encoded in a HEIF container. Since most image optimizers / converters do this by default, most of your images will render as a question mark on iPhones.
Solution
There are a number of things you can do, including re-converting all your images with different settings. Another option is to wait for Apple to update it’s IOS. Although the bug is still present in IOS 16.0.2.
A best-of-both-worlds solution would be to check on User-Agent and Request header. So don’t only check for avif in the request header but also check for “iPhone OS 16” in the User agent, when that’s the case.. serve it a webp or classic image.
