Black avif images on iOS 16

03/03/24

So I was creating a website for a client an wanted to implement some images to it, no biggie. Images worked well in my computer, they were responsive, everything worked fine, but there was a small problem, when testing on my iPhone the images were black.
Here's what my code looked like:

<picture>
  <source
    srcset="image512x.avif"
    type="image/avif">
  <source
    srcset="image512x.webp"
    type="image/webp">
  <img
    class="w-64"
    src="image512x.jpg"
    alt="This is an image?"
    type="image/jpeg">
</picture>

When trying to share those images by holding a press they turned white, and saving them to my camera roll worked properly, so I was suspicious of it being a weird iOS 16 bug. I tried and tried every possible solution that I could think about, an I was running out of ideas at this point, but I really wanted to get those avif images working.

Luckily one last Google search brought me to this reddit post. The op had the same problem and linked to a git repo with lots of different sample images using different encodings.
After downloading those and trying them I was pretty close to a solution. The only ones working where those in yuv420 encoding and 8-bit depth. So I only had to encode the photos I was going to use in yuv420 8-bit. I was encoding the photos myself from the start from jpg to avif with ffmpeg so I just had to research how to use the corresponding arguments to reencode them. This was the entire command I used:

ffmpeg -i image512x.jpg -still-picture 1 -pix_fmt yuv420p image512x.avif

Conclusion: So to round things up the bug is caused by the encoding and the bit depth of the image on iOS 16, and to fix it we have to encode the avif images in yuv420 and 8-bits.