Afficher des images webp sur votre site

.webp vs .jpeg vs .png

Créé par Google en 2010, le WebP est un format d’image qui se veut - en moyenne -  30% plus léger comparé au JPEG et 25% par rapport au PNG; tout en conservant gardant les effets de transparence pour ce dernier format.

Sur le Web, diminuer le poids de notre page est un - si ce n’est le moyen - d’en accélérer le chargement et le format WebP est donc un atout dans ce contexte.

Un des soucis majeur de ce format est son support dans les principaux navigateurs. En effet, seul Chrome gère les WebP… et même si cela englobe 60% des utilisateurs, il n’est pas envisageable de délaisser les 40% restants !

Toutefois, depuis peu, Edge a annoncé le support de WebP pour sa prochaine version majeure, à savoir la 17. De même, Firefox a annoncé son support pour 2019, sans préciser de date plus précise… Concernant Safari, Apple ne faisant guère d’annonces en dehors de ses keynote, on ne peut rien prédire sur ce point…

Alors, faut-il utiliser WebP sur vos site Web malgré son support encore partiel ? La réponse est oui; et Nginx va nous aider à créer un système priorisant le format WebP, avec un repli sur le format JPEG si besoin.

Mais, tout d’abord, nous allons comment convertir nos images PNG/JPEG au format WebP !

Convertir en local avec XnConvert

De nombreux outils existent, avec ou sans interface graphique, pour transformer nos images en WebP. Pour ma part, j’utilise l’outil XnConvert, fonctionnant à la fois sur Windows, Linux et MacOS.

La conversion se réalise en 3 étapes :

1. Ajouter les images à convertir

2. Préciser le format d’arriver ainsi que le nom du fichier généré. Dans notre cas, nous ajouterons simplement l’extension .webp au nom complet de l’image. Ainsi, nom_image.jpeg deviendra mon_image.jpeg.webp. Ce formatage aura son importance dans le prochain chapitre :-)

3. Pour finir, convertir les images tout simplement !

Ainsi, nous obtenons deux fichiers nom_image.jpeg et mon_image.jpeg.webp, pesant respectivement 214Ko et 158Ko (soit environ 35% de différence).

And that’s all ! Nous savons maintenant convertir toutes nos images en WebP. La prochaine étape consiste dorénavant à renvoyer l’image WebP ou son original suivant le navigateur de l’utilisateur.

Nginx

Maintenant que nos deux formats d’images cohabitent, il faut dorénavant délivrer l’image correspondante en fonction du navigateur demandant la ressource et Nginx tiendra ce rôle.

Pour se faire, nous allons utiliser la commande try_files. Cette dernière essaye plusieurs fichiers et renvoie le premier trouvé. Vous l’avez donc compris, nous allons tester la présence d’un fichier au format .webp puis ensuite .jpeg (ou .png) - et renvoyé une erreur 404 en dernière option.

Toutefois, la méthode décrite si dessus ne gère pas le cas où le navigateur ne supporte ou non le format .webp. Pour cela, nous créerons une variable $webp_suffix qui contiendra .webp en cas de support de WebP et sera vide dans le cas contraire. Ainsi, nous testerons en premier lieu l’URL à laquelle nous concaténerons la valeur $webp_suffix puis l’URL demandée (et sinon une erreur 404).

Tout d’abord, commençons par initialiser notre variable via l’instruction map. Cette dernière initialise le contenu de $webp_suffix en fonction du header HTTP de la requête.

    # Detect if browser accepts .webp images ?
    map $http_accept $webp_suffix {
      default"";
      "~*webp" ".webp";
    }

Ensuite, nous demandons à Nginx de capter les URL demandant des .jpeg et .png et récupérer via try_files la bonne image.

    # Handle .webp

    location ~* ^/assets/.+\.(jpe?g|png)$ {
        root /home/deploy/build/;
        add_header Vary Accept;
        try_files $uri$webp_suffix $uri =404;
    }

Pour un navigateur supportant WebP, Nginx va donc faire mon_image.jpeg.webp => mon_image.jpeg => 404. Pour un navigateur ne supportant pas WebP, nous aurions mon_image.jpeg => mon_image.jpeg => 404.

D’ailleurs, on constate sur la console de Google Chrome que le fichier reçu est bien une image .webp.

Pour aller plus loin

D’autres formats alternatifs aux JPEG ont vu le jour en plus de WebP, on peut citer principalement :

• JPEG XR (supporté uniquement par Internet Explorer et Edge) : https://jpeg.org/jpegxr/index.html
• JPEG 2000 (supporté uniquement par Safari) : https://jpeg.org/jpeg2000/index.html

Présentation du format par Google : https://developers.google.com/speed/webp/

Documentation technique de WebP : https://developers.google.com/speed/webp/docs/compression