Hier, le 22 juin 2020, Apple lors de sa Keynote à annoncé le support du WebP pour son navigateur SAFARI. C’est un grand pas dans l’adoption de ce format d’image. Il était temps qu’apple supporte enfin ce format.
Voici les détail sur la release concernant ce support :
https://developer.apple.com/documentation/safari-release-notes/safari-14-beta-release-notes
L’optimisation des pages WEB est devenue primordial pour le confort de l’utilisateur. Il semblerait même que ce soit un critère de référencement « ranking factors ». Il est donc important de se pencher sur les moyens d’optimiser ses pages web. Dans cet article, je vais te parler de format WebP (Lien wikipedia : ici ou officiel google : là)
Ce format développé par Google à pour objectif de réduire la taille des images entre 25% et 35% sans perte de qualité.
Sommaire
Inconvénients et Avantages
Les trois inconvénients que je pourrais noter sont :
- Multiplication des images sur le serveur et donc de la place utilisée
- Le support de ce format : seul quelques navigateurs le supportent actuellement
- La conversion des images (jpg/png…) à faire soit même.
L’avantage principale :
- Le chargement de la page qui est vraiment amélioré
- Par conséquent, le poids de la page lui est aussi réduit
- SEO et confort utilisateur.
Ca n’en vaut pas la chandelle ? 🙂
Selon le site : Caniuse.com, voici les navigateurs qui acceptent ce format :
Conversion des images au format WebP
Il existe des outils en lignes pour convertir des images au format WebP comme (ici , là ou encore par-là), ils font tous plus/moins la même chose. Il y aussi des plugins photoshop comme : ici
Perso, j’ai préféré la méthode « ligne de commande – direct sur le serveur« . J’ai pu convertir toutes mes images en une commande.
libWebp : la librairie pour traiter ce format
Google a mis en ligne la librairie libWebp, qui contient les binaires (cweb : pour convertir jpg/png vers web et dweb pour decompresser web vers jpg/png)
Pour tester, j’ai compilé moi-même les sources, à l’heure actuelle la version 0.5.1 est la dernière. Il est nécessaire d’avoir les libraires de traitement d’image d’installé sur son serveur :
sudo apt-get install libjpeg-dev libpng-dev libtiff-dev libgif-devEnsuite :
cd tmp/ wget https://storage.googleapis.com/downloads.webmproject.org/releases/web/libweb-0.5.1.tar.gztar xvzf libweb-0.5.1.tar.gzcdlibweb-0.5.1./configuremake sudo make install
Te voici avec cweb et dweb installé.
Si comme moi, tu rencontres une erreur : cweb: error while loading shared libraries en utilisant cweb
un petit :
sudo ldconfig /usr/local/lib/
devrait résoudre le soucis 😉
Te voici donc avec les exécutables installés sur ta machine.
Conversion d’images en masse/récursif en webP
L’idée est donc de pouvoir convertir toutes les images de mon site/prestashop/wordpress pour pouvoir les servir au client. Il est nécessaire d’avoir les deux formats accessible en cas d’incompatibilité du navigateur.
Installation de « parallel » (Comme son nom l’indique, il va permettre de lancer des tâches en parallèle) 😛
apt-get install parallel
Ensuite, on lance cette commande ou se trouve tout nos images, ou dossier racine. Je préfère, personnellement le faire sur une copie dans /tmp/ pour être sur du résultat 😉
find . -name "*.jpg" | parallel -eta cweb {} -o {.}.web
Cette commande, va donc recherche tous les fichier « jpg » (à remplacer selon le format de base des images). Ensuite, la sortie est passé à parallel pour qu’il lance cweb qui s’occupe de convertir chaque image en gardant le nom (et l’image d’origine).
Résultat : Toutes les images sont bien converties au même endroit que celle d’origine.
Nginx : Servir les images en WebP si le navigateur les supportent
Maintenant, que l’on a converti nos images en webP. Il va falloir ajouter à nginx la gestion de ce format.
Le principe est simple : Ajout de ce format dans les mime.types et servir les images si le navigateur client les supportent.
Ajout du format Webp :
on modifie mime.type :
sudo vim /etc/nginx/mime.type
et on ajoute :
image/web web;
Réécriture du chemin pour servir le nouveau format :
Il faut ajouter cette directive, en modifiant le chemin vers les images/site dans le block server.
location ~ ^(/PATH/TO/YOUR/IMAGES/.+)\.(jpe?g|png)$ { if ( $http_accept ~* web ) { set $web "A"; } if ( $request_filename ~ (.+)\.(png|jpe?g)$ ) { set $file_without_ext $1; } if ( -f $file_without_ext.web ) { set $web "${web}E"; } expires 1M; add_header Cache-Conrol "public"; add_header vary accept-encoding; if ( $web = AE ) { rewrite ^(.+)\.(png|jpe?g)$ $1.web break; } }
Ensuite, si tu tapes le chemin de l’image jpeg dans le navigateur. On peut voir
« Content-Type: image/web » dans la response headers de l’image.
Pour les autres server web (apache/IIS) voir ici : Blog KeyCDN
Résultats : Gain de temps et poids de page
Voici les résultats issue de GtMetrix, on peut observer une réduction du poids de la page diviser par 3.
On passe de 3.25 Mo à 1.02 Mo rien qu’avec ce format et on gagne 1.6 secondes de chargement de page, ce qui est loin d’être négligeable, surtout pour une boutique prestashop 😉
Alors convaincu ? Moi oui 😀