---
title: "Nginx gère les images au format AVIF"
date: 2021-02-22T14:17:28+01:00
description: "Configurer Nginx pour qu'il diffuse les images au format AVIF, au lieu de…"
draft: false
tags: ['nginx','image','avif','astuce']
---

## Description

Il y a quelques semaines, j'ai écris l'article sur la gestion des {{< inside2 l="web/nginx/nginx-image-webp" t="images webp par nginx" >}}. 

Actuellement, un récent format d'image apparaît, le format {{< abbr AVIF "AV1 Image Format" >}}.
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 !

```bash
$ 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](https://github.com/kornelski/cavif-rs)**, écrit en langage Rust.
Reste plus qu'à télécharger la version .deb fournie : https://github.com/kornelski/cavif-rs/releases

### Note ImageMagick

{{< note info >}}
ImageMagick est aussi capable de convertir une image au format AVIF :

`$ convert "${file}" "${file}.avif"`

Mais il semble qu'il faille attendre les versions 7.x pour que ce soit 
correctement géré !
{{</note>}}

---

*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"`

{{< note info >}}
Attention, par défaut, cavif ne réécrit pas sur un fichier AVIF déjà existant. 
Soit vous utilisez l'option `--overwrite`, soit vous veillez à le supprimer avant.
{{</note>}}

## 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`. 
	
```nginx
map $http_accept $avif_suffix {
    avif_suffix "";
    "~*avif" ".avif";
}
```

---

⇒ Modifions le contexte `server`, *préalablement {{<inside2 a="configuration" l="/web/nginx/nginx-image-webp" t="modifié pour le support webp" >}}* : 

```nginx
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` : 

```nginx
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* :

```sh
# 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 :

```html
<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 :

{{< img a="Logo" s="logo.png" >}}

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

## Documentations

- le site caniuse.com: https://caniuse.com/avif
- l'article "[WebP and AVIF images on a Hugo website](https://pawelgrzybek.com/webp-and-avif-images-on-a-hugo-website/)"… *en anglais*
- l'article "[Convert to AVIF Programmatically](https://blog.uidrafter.com/engineering/convert-to-avif-programmatically)" - *en anglais* - 
qui expliquent les raisons pour lesquelles utiliser un taux de compression
min à 25, max à 35, et recommande la vitesse d'encodage sur 0 ! 

## Remerciements

@Lord et son [article](https://lord.re/fast-posts/55-un-peu-plus-de-compression-sur-le-brog-brotli+avif/) qui m'a fait découvrir ce format d'image…

---