如何为服务器启用 AVIF 支持答案

【问题标题】：How to enable AVIF support for a server如何为服务器启用 AVIF 支持
【发布时间】：2021-01-25 07:31:41
【问题描述】：

AVIF 图像格式看起来是一种非常有前途的格式。如何在 Web 服务器上编译和使用它？我的特别是 Ubuntu 18.04/Nginx，但我正在寻找如何编译和开始转换图像的要点？

【问题讨论】：

标签： image-processing ubuntu-18.04 avif

【解决方案1】：

由于格式如此新，大多数图像处理工具（如 ImageMagick）在稳定版本中还不支持它。幸运的是，我们创建了一个在线服务，可以将您的图像转换为 AVIF 格式。

它通过发送 HTTP GET 请求来工作：

${AVIF_SERVICE_URL}?url=${PUBLIC_IMAGE_SOURCE_URL}&format=avif&width=${WIDTH_IN_PIXELS}

More info

【讨论】：

【解决方案2】：

AVIF 似乎是一种新格式，找不到太多信息。但是，让我们立即进入调查结果：

从 [1] 我发现一本烹饪书如何在 Nginx 上为这些人提供服务：

http {
    # ... Omitted.
    map $http_accept $ai {
        "~avif" "a";
        "~webp" "w";
        default "";
    }
    types {
        image/avif avif;
    }
    server {
        # ... Omitted.
        # Rewrite .i files.
        location ~ \.i$ {
            # Change .i request to .avif file.
            if ($ai = "a") {
                rewrite ^(.*)$ $1.avif last;
            }
            # Change .i to .webp file.
            if ($ai = "w") {
                rewrite ^(.*)$ $1.webp last;
            }
            # If no AVIF support, use PNG image.
            if ($ai = "") {
                rewrite ^(.*)$ $1.png last;
            }
        }
    }
}

该解决方案依赖于 Accept 标头和 map 语句。此处的图片假定以 .i 结尾，但这也适用于 .png 和其他图片，如果这样修改的话。

对服务器的请求应具有“image/avif”类型。

有一项名为 Squoosh 的服务，您可以在其中转换图像。 [2] 中还提到了一些程序化方法，它依赖于 Sharp。

关于转换的代码：

import * as sharp from 'sharp';

sharp('input.png')
 .toFormat('heif', { quality: 30, compression: 'av1' })
 .toFile('output.avif')
 .then(info => console.log(info));

来源：

[1]https://www.dotnetperls.com/nginx-examples

[2]https://dev.to/adamlacombe/how-to-convert-images-to-avif-in-nodejs-5083

【讨论】：

我刚刚从您的types 部分添加了 mime 内容，这有点效果：现在图像显示为内联，但似乎已损坏。也许你可以帮我add-avif-images-in-html-using-anginx-as-a-server？
不幸的是，我找不到解决方案。您的浏览器 avif 支持可以通过libre-software.net/avif-test 进行测试，但也许您已经知道了？我对您的问题的想法非常有限，并且在网络中搜索也没有成功。