Как включить поддержку AVIF для сервера

Question

Формат изображения AVIF выглядит действительно многообещающим. Как вы можете скомпилировать и использовать его на веб-сервере? Моя, в частности, 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 и оператор карты. Предполагается, что изображения здесь оканчиваются на.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

Answer 2

Поскольку формат настолько новый, большинство инструментов для работы с изображениями, таких как ImageMagick, еще не поддерживают его в стабильных версиях. К счастью, мы создали онлайн-сервис, который конвертирует ваши изображения в формат AVIF.

Он работает, отправляя HTTP-запрос GET:

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

Больше информации