WebP est un format d'image ouvert développé par Google en 2010 basé sur le format vidéo VP8. Depuis lors, le nombre de sites Web et d'applications mobiles utilisant le format WebP a augmenté considérablement.
Google Chrome et Opera prennent tous deux en charge le format WebP de manière native, et puisque ces navigateurs représentent environ 74% du trafic Web, les utilisateurs peuvent accéder plus rapidement aux sites Web si ces sites utilisent des images WebP. Depuis peu la version 65 de Firefox supporte enfin le format WebP.
Le format WebP prend en charge la compression d'image avec et sans perte, y compris l'animation. Son principal avantage par rapport aux autres formats d'image utilisés sur le Web est sa taille de fichier beaucoup plus petite, ce qui accélère le chargement des pages Web et réduit l'utilisation de la bande passante. L'utilisation d'images WebP peut entraîner une augmentation considérable de la vitesse des pages. Si votre application ou votre site Web rencontre des problèmes de performances ou une augmentation du trafic, la conversion de vos images peut aider à optimiser les performances des pages.
Dans ce tuto, vous allez utiliser l'outil de ligne de commande cwebp pour convertir des images au format WebP, en créant des scripts qui convertiront des images dans un répertoire spécifique.
Enfin, vous allez explorer également deux façons de diffuser des images WebP à vos visiteurs.
A noter un point assez important de nos jours (Greta Inside), qui dit économie de place et rapidité à servir dit un geste Ecologique. En effet, rien ne sert de servir des images démentes sauf cas précis comme les photographes par exemple. Et encore avec ce format d'images WebP cela reste totalement convaincant. A vous de voir !
Travailler avec des images WebP ne nécessite pas de distribution particulière, mais nous vous montrerons comment travailler avec les logiciels appropriés sur Ubuntu 16.04 et CentOS 7. Pour suivre ce tuto, vous allez avoir besoin de:
Dans cette section, nous allons installer un logiciel pour convertir des images et créer un répertoire avec des images test.
Sur Ubuntu 16.04, vous pouvez installer cwebp, un utilitaire qui compresse les images au format .webp, en tapant:
sudo apt-get update sudo apt-get install webp
Sur CentOS 7, tapez:
sudo yum install libwebp-tools
Pour créer un nouveau répertoire d'images appelé webp dans la racine Web Apache (situé par défaut dans / var / www / html), tapez:
sudo mkdir / var / www / html / webp
Changez la propriété de ce répertoire par votre nom d'utilisateur non root : "jul" ici:
sudo chown jul: / var / www / html / webp
Pour tester les commandes, vous pouvez télécharger des images JPEG et PNG gratuites à l'aide de wget. Cet outil est installé par défaut sur Ubuntu 16.04; si vous utilisez CentOS 7, vous pouvez l'installer en tapant:
sudo yum install wget
Ensuite, téléchargez les images de test à l'aide des commandes suivantes:
wget -c "https://upload.wikimedia.org/wikipedia/commons/2/24/Junonia_orithya-Thekkady-2016-12-03-001.jpg?download" -O /var/www/html/webp/image1.jpg wget -c "https://upload.wikimedia.org/wikipedia/commons/5/54/Mycalesis_junonia-Thekkady.jpg" -O /var/www/html/webp/image2.jpg wget -c "https://cdn.pixabay.com/photo/2017/07/18/15/39/dental-care-2516133_640.png" -O /var/www/html/webp/logo.png
Remarque: Ces images sont disponibles pour utilisation et redistribution sous la licence Creative Commons Attribution-ShareAlike.
La plupart de votre travail à l'étape suivante se trouvera dans le répertoire / var / www / html / webp, dans lequel vous pouvez vous déplacer en tapant:
cd /var/www/html/webp
Avec les images de test en place et le serveur Web Apache, mod_rewrite et cwebp installés, vous êtes prêt à passer à la conversion des images.
La diffusion d'images .webp aux visiteurs du site nécessite forcement des versions .webp des fichiers image. Dans cette étape, vous allez convertir les images JPEG et PNG au format .webp en utilisant cwebp. La syntaxe de la commande ressemble à ceci:
cwebp image.jpg -o image.webp
L'option -o spécifie le chemin d'accès au fichier WebP.
Puisque vous êtes toujours dans le répertoire / var / www / html / webp, vous pouvez exécuter la commande suivante pour convertir image1.jpg en image1.webp et image2.jpg en image2.webp:
cwebp -q 100 image1.jpg -o image1.webp cwebp -q 100 image2.jpg -o image2.webp
La définition du facteur de qualité -q à 100 conserve 100% de la qualité de l'image; s'il n'est pas spécifié, la valeur par défaut est 75.
Ensuite, inspectez la taille des images JPEG et WebP à l'aide de la commande ls - . L'option -l affichera le format de liste longue, qui inclut la taille du fichier, et l'option -h s'assurera que ls imprime des tailles lisibles par l'homme:
ls -lh image1.jpg image1.webp image2.jpg image2.webp Sortie -rw-r--r-- 1 jul jul 7.4M Jan 18 09:08 image1.jpg -rw-r--r-- 1 jul jul 3.9M Jan 18 16:46 image1.webp -rw-r--r-- 1 jul jul 16M Jan 18 13:21 image2.jpg -rw-r--r-- 1 jul jul 7.0M Jan 18 16:59 image2.webp
La commande ls montre que la taille de image1.jpg est de 7,4M, tandis que la taille de image1.webp est de 3,9M. Il en va de même pour image2.jpg (16M) et image2.webp (7M). Ces fichiers ont presque la moitié de leur taille d'origine!
Pour enregistrer les données complètes et originales des images pendant la compression, vous pouvez utiliser l'option -lossless à la place de -q. Il s'agit de la meilleure option pour maintenir la qualité des images PNG. Pour convertir l'image PNG téléchargée à partir de l'étape 1, tapez:
cwebp -lossless logo.png -o logo.webp
La commande suivante montre que la taille d'image WebP sans perte (60 Ko) est environ la moitié de la taille de l'image PNG d'origine (116 Ko):
ls -lh logo.png logo.webp
Sortie -rw-r--r-- 1 jul jul 116K Jan 18 16:11 logo.png -rw-r--r-- 1 jul jul 60K Jan 18 16:42 logo.webp
Les images WebP converties dans le répertoire / var / www / html / webp sont environ 50% plus petites que leurs homologues JPEG et PNG. En pratique, les taux de compression peuvent différer en fonction de certains facteurs: le taux de compression de l'image d'origine, le format de fichier, le type de conversion (avec ou sans perte), le pourcentage de qualité et votre système d'exploitation. Lorsque vous convertissez plus d'images, vous pouvez constater des variations des taux de conversion liés à ces facteurs.
Il suffira d'écrire un script pour simplifier le processus de conversion des images au format WebP. On part sur l'idée de convertir un lot d'image JPG à 90% de qualité, tout en convertissant également les fichiers PNG en images WebP sans perte.
Utilisez donc votre éditeur favori, pour ma part ca sera VI (la vielle école) pour créer un script webp-convert.sh dans votre home.
cd vi webp-convert.sh
La première ligne de votre script sera :
find $1 -type f -and \( (-iname "*.jpg" -o -iname "*.jpeg \)
la ligne comprend les éléments suivants:
find: Cette commande recherchera les fichiers dans un répertoire spécifié.
$1: ce paramètre positionnel spécifie le chemin du répertoire images, extrait de la ligne de commande. En fin de compte, cela rend l'emplacement du répertoire moins dépendant de l'emplacement du script.
-type f: cette option indique à find de rechercher uniquement les fichiers normaux.
-iname: ce test compare les noms de fichiers à un modèle spécifié. Le test -iname insensible à la casse indique à find de rechercher tout nom de fichier se terminant par .jpg (* .jpg) ou .jpeg (* .jpeg).
-o: cet opérateur logique demande à la commande find de répertorier les fichiers qui correspondent au premier test -iname (-iname "* .jpg") ou au second (-iname "* .jpeg").
(): Des parenthèses autour de ces tests, ainsi que l'opérateur -and, garantissent que le premier test (c'est-à-dire -type f) est toujours exécuté.
La deuxième ligne du script convertira les images en WebP à l'aide du paramètre -exec. La syntaxe générale de ce paramètre est la commande -exec {} \ ;. La chaîne {} est remplacée par chaque fichier parcouru par la commande, tandis que le; indique à find où se termine la commande:
find $1 -type f -and \( (-iname "*.jpg" -o -iname "*.jpeg \) \
-exec bash -c 'commands' {} \;
Dans ce cas, le paramètre -exec nécessitera plusieurs commandes pour rechercher et convertir des images:
bash: Cette commande exécutera un petit script qui créera la version .webp du fichier s'il n'existe pas. Ce script sera transmis à bash sous forme de chaîne grâce à l'option -c.
'commandes': cet espace réservé est le script qui fera les versions .webp de vos fichiers.
Le script à l'intérieur des «commandes» fera les choses suivantes:
Créez une variable webp_path.
Testez si la version .webp du fichier existe ou non.
Créez le fichier s'il n'existe pas.
Le petit script ressemble à ceci:
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0"); if [ ! -f "$webp_path" ]; then cwebp -quiet -q 90 "$0" -o "$webp_path"; fi;
Les éléments de ce petit script incluent:
webp_path: Cette variable sera générée en utilisant sed et le nom de fichier correspondant de la commande bash, indiqué par le paramètre positionnel $ 0. Une chaîne ici (<<<) passera ce nom à sed.
si [ ! -f "$ webp_path"]: Ce test établira si un fichier nommé "$ webp_path" existe déjà, en utilisant l'opérateur logique not (!).
cwebp: Cette commande créera le fichier s’il n’existe pas, en utilisant l’option -q pour ne pas imprimer la sortie.
Avec ce petit script à la place de l'espace réservé «commandes», le script complet pour convertir les images JPEG ressemblera maintenant à ceci:
# converting JPEG images
find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \) \
-exec bash -c '
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then
cwebp -quiet -q 90 "$0" -o "$webp_path";
fi;' {} \;
Pour convertir des images PNG en WebP, nous adopterons la même approche, avec deux différences: Premièrement, le motif -iname dans la commande find sera "* .png". Deuxièmement, la commande de conversion utilisera l'option -lossless au lieu de l'option -q de qualité.
Le script terminé ressemble à ceci:
#!/bin/bash
# converting JPEG images
find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \) \
-exec bash -c '
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then
cwebp -quiet -q 90 "$0" -o "$webp_path";
fi;' {} \;
# converting PNG images
find $1 -type f -and -iname "*.png" \
-exec bash -c '
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then
cwebp -quiet -lossless "$0" -o "$webp_path";
fi;' {} \;
Enregistrez le fichier et quittez l'éditeur.
Ensuite, mettons le script webp-convert.sh en pratique en utilisant les fichiers du répertoire / var / www / html / webp. Assurez-vous que le fichier de script est exécutable en exécutant la commande suivante:
chmod a+x ~/webp-convert.sh
Exécutez le script sur le répertoire images:
./webp-convert.sh /var/www/html/webp
Rien ne s'est passé! C'est parce que nous avons déjà converti ces images à l'étape 2. À l'avenir, le script webp-convert convertira les images lorsque nous ajouterons de nouveaux fichiers ou supprimerons les versions .webp. Pour voir comment cela fonctionne, supprimez les fichiers .webp que nous avons créés à l'étape 2:
rm /var/www/html/webp/*.webp
Après avoir supprimé toutes les images .webp, réexécutez le script pour vous assurer qu'il fonctionne:
./webp-convert.sh /var/www/html/webp
La commande ls confirmera que le script a correctement converti les images:
ls -lh /var/www/html/webp
Sortie -rw-r--r-- 1 jul jul 7.4M Jan 28 09:08 image1.jpg -rw-r--r-- 1 jul jul 3.9M Jan 18 17:13 image1.webp -rw-r--r-- 1 jul jul 16M Jan 18 13:21 image2.jpg -rw-r--r-- 1 jul jul 7.0M Jan 18 17:13 image2.webp -rw-r--r-- 1 jul jul 116K Jan 18 16:11 logo.png -rw-r--r-- 1 jul jul 60K Jan 18 17:13 logo.webp
Voilà ce script vous permettra dans un premier temps telle une moulinette excalibur niveau 1 de transformer / convertir vos images au format WebP de façon automatisé.
Il est possible d'approfondir cette fonction, et convertir en mode automatique en vérifiant régulièrement le répertoire. Je ne traiterais pas le sujet aujourd'hui mais peut être dans un temps prochain.
