How to enable AVIF support for a server

Question

The AVIF image format looks to be a really promising format. How can you compile and use it on a web server? Mine specifically is Ubuntu 18.04/Nginx but I'm looking for a gist of how to compile and start converting images?

Answer 1

AVIF seems to be a new format, and not much info could be found. But, let's go right away into the findings, that were there:

From [1] I found a cook book how to serve those on 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;
            }
        }
    }
}

The solution relies on Accept header and a map statement. Images here are assumed to end with .i but this would work with .png and others too, if modified so.

Requests to server should have a type "image/avif".

There is a service called Squoosh, where you can convert your images. Some programmatic approach is also mentioned on [2], which relies on Sharp.

Code about conversion:

import * as sharp from 'sharp';

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

Sources:

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

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

Answer 2

Since the format is so new, most image manipulation tools like ImageMagick do not support it yet in stable versions. Fortunately, we created an online service that converts your images to the AVIF format.

It works by sending an HTTP GET request:

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

More info