如何为服务器启用AVIF支持

Question

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

Answer 1

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中也提到了一些编程方法，这依赖于夏普。

关于转换的代码：

import * as sharp from 'sharp';

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

来源：

1

2

Answer 2

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

它的工作方式是发送一个HTTP GET请求：

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

More info