使用nginx作为服务器在HTML中添加avif图片

如何解决使用nginx作为服务器在HTML中添加avif图片

我用 heif-anc 创建了一些 avif 图像：

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

但是当我将它们添加到我的网站时，它只是建议下载图像。

然后我enabled avif images in my nginx-config与

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

现在它尝试显示图像，但它们似乎坏了。如果直接调用它，成功启用avif支持的Firefox会显示此错误消息：

avif 无法显示，因为它包含错误

在这里：您可以看到我尝试提供的 avif 文件：

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

我是否必须以不同的方式创建 avif 图像才能让 Firefox 显示它？

解决方法

Firefox 尚无法显示 HEIF/HEIC 图像。

为了通过 heif-enc 对 AVIF 进行编码，添加 -A 参数。当您省略 -A 参数时，HEIC 文件被编码。

编码 AVIF 的另一种方法是使用 libavif 包中的 avifenc。