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

【问题标题】：Add avif images in HTML using nginx as a server使用 nginx 作为服务器在 HTML 中添加 avif 图像
【发布时间】：2021-04-22 23:18:59
【问题描述】：

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

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

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

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

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

avif 包含错误，无法显示

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

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

【问题讨论】：

标签： nginx avif

【解决方案1】：

Firefox 还不能显示 HEIF/HEIC 图像。

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

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

【讨论】：

太棒了！ avifenc 完成了这项工作！我在这里解释了如何在 Ubuntu 上安装它：stackoverflow.com/a/65765495/1069083
heif-enc 在 Ubuntu 存储库的最新版本中没有选项 -A