Nginx gère les images au format AVIF

Article publié, le et modifié le
4 minute(s) de lecture

Cet article contient 661 mots.
Source brute de l'article : MD

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 future version 86 qui sort le 23/02/2021. Ahhh, mais c’est demain ! :p

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.


Malheureusement, sous De(bi|vu)an, 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

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


Info

Bien-sûr, il existe d’autres logiciels capable de convertir au format AVIF.

Utilisation

Il est ainsi possible de transformer les images giff, 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, ajoutons 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…