Search code examples
nginxavif

Add avif images in HTML using nginx as a server

I created some avif images with heif-anc:

for i in card*.png ; do heif-enc "$i" -o "${i%.*}.avif" ; done

But When I added them to my website, it just proposed to download the image instead.

Then I enabled avif images in my nginx-config with

http {
  types {
    image/avif avif;
  }
  ...

Now it tries to display the image, but they seem to be broken. If you call it directly, Firefox with successfully enabled avif support shows this error message:

avif could not be displayed because it contains errors

Here: you can see the avif file I try to serve:

https://cards.incantata.de/cdn/avif_orig/card_63.avif

Do I have to create the avif image in a different way so firefox can display it?

Solution

  • Firefox can't display HEIF/HEIC images yet.

    In order to encode AVIF via heif-enc, add -A parameter. When you omit -A parameter, HEIC file is encoded.

    Alternative way of encoding AVIF is to use avifenc from libavif package.