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

Question

我用 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 could not be displayed because it contains errors

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

我是否必须以不同的方式创建 avif 图像以便 firefox 可以显示它？

Answer 1

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

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

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

Add avif images in HTML using nginx as a server