%

Nginx gère les images au format AVIF

Article publié, le et modifié le
4 minutes de lecture

Cet article contient 697 mots.
Source brute de l'article :
Commit version : f9461f4

Description

Il y a quelques semaines, j’ai écris l’article sur la gestion des images webp par nginx .

Actuellement, un récent format d’image apparaît, le format AVIF . Ainsi les images compressées dans ce format sont encore plus légères que le format Webp (bien sûr, généralement, cela dépend fortement des taux de qualités de compression utilisés).

Support web

Actuellement seules les versions des clients suivants prennent en charge ce format AVIF :

  • le navigateur web Chromium, et son pendant non libre dixit Google Chrome, depuis la version 85
  • le navigateur web Opera, depuis sa version 71
  • quant à Firefox, officiellement, avec sa version 86, sortie le 23/02/2021. Pour ceux qui migrent d’une ancienne version, il faut activer le paramètre image.avif.enabled sur true dans la configuration…

Installation

Bref, cela nécessite d’installer sur votre système d’exploitation la bibliothèque nécessaire :

  • De(bi|vu)an : le paquet libavif-bin
  • OpenBSD : le paquet libavif

qui installera principalement le binaire avifenc dont nous avons besoin.

Note Debian Stable

Malheureusement, sous De(bi|vu)an Stable, il semble manquer le support de la libyuv, ce qui empêchera bien des images d’être converties !

$ avifenc --help
(…)
Version: 0.8.4 (dav1d [dec]:0.7.1, libgav1 [dec]:0.16.1)
libyuv : unavailable

Note cavif

Heureusement, il existe le programme cavif, écrit en langage Rust. Reste plus qu’à télécharger la version .deb fournie : https://github.com/kornelski/cavif-rs/releases

Note ImageMagick

Info

Bien-sûr, il existe d’autres logiciels capable de convertir au format AVIF. Au dernière nouvelle, Gimp 2.10.x en est capable.

Utilisation

Il est ainsi possible de transformer les images gif, jpg, png et tiff.

La génération de l’image au format AVIF peut prendre un certain temps, plus ou moins considérable, selon les options choisies et le poids de l’image source à convertir !

avifenc

$ avifenc -s 0 --min 25 --max 35 "${file}" "${file}.avif"

cavif

$ cavif --quality 50 "${file}" --output "${file}.avif"

Info

Configuration

Modifions la configuration de nginx, afin de lui signifier que quand il est demandé des images au format jpeg|gif|png|tiff, il essaye de diffuser celles au format AVIF, si elles existent.

⇒ Dans le contexte http du serveur :

  1. dans le fichier /etc/nginx/mime.types, ajoutons la déclaration image/avif avif;
  2. puis, une map afin de déclarer une variable $avif_suffix qui nous permettra de reconnaître une image ayant l’extension .avif.
map $http_accept $avif_suffix {
    avif_suffix "";
    "~*avif" ".avif";
}

⇒ Modifions le contexte server, préalablement modifié pour le support webp :

location ~ /*.(jpe?g|gif|png|tiff)$ {

    access_log        off;

    add_header Cache-Control "public, must-revalidate, proxy-revalidate";
    add_header Pragma public;
    add_header Vary "Accept-Encoding";    

    expires           max;

    log_not_found off;

    try_files $uri$avif_suffix $uri$webp_suffix $uri =404;    

}

Et ajoutons lui ce nouveau bloc location :

location ~ /*.(gif|jpe?g|png|tiff).avif {

    access_log        off;

    add_header Cache-Control "public, must-revalidate, proxy-revalidate, max-age=31536000";
    add_header Content-Type image/avif;
    add_header Pragma public;
    add_header Vary "Accept-Encoding";

    default_type image/avif;

    expires           max;

#    try_files $uri$avif_suffix $uri =404;

    types {
        image/avif avif;
    }

}

Et, voilà !!!

Reste plus qu’à tester votre configuration avec nginx et redémarrer le service correspondant - par exemple, pour OpenBSD :

# nginx -t
# rcctl restart nginx

HTML

Pour finir, modifiez votre code HTML à-propos de la gestion des images, tel que, par exemple pour une image jpeg, à minima :

<picture>
	<source srcset="/img/{{ $img }}.jpg.avif" type="image/avif">
	<source srcset="/img/{{ $img }}.jpg.webp" type="image/webp">
	<img alt="texte" src="/img/{{ $img }}.jpg" type="image/jpeg">
</picture>

Ce qui permettra aux clients web qui supportent le format AVIF de demander l’affichage de ce format en lieu et place…

Essai

Test avec mon Logo :

Logo
Logo

Ainsi, selon le support du client web, vous recevrez soit le format webp, soit avif, sinon le fichier “source” png…

Documentations

Remerciements

@Lord et son article qui m’a fait découvrir ce format d’image…