Comment créer et servir des images WebP pour accélérer votre site Web

L’auteur a sélectionné la Apache Software Foundation pour recevoir un don dans le cadre du Write for DOnations programme.

introduction

WebP est un format d’image ouvert développé par Google en 2010 et basé sur le format vidéo VP8. Depuis lors, le nombre de sites Web et d’applications mobiles utilisant le format WebP a augmenté rapidement. Google Chrome et Opera prennent tous deux en charge le format WebP de manière native et, ces navigateurs représentant environ 74% du trafic Web, les utilisateurs peuvent accéder aux sites Web plus rapidement si ces sites utilisent des images WebP. Il existe également des plans pour implémenter WebP dans Firefox.

Le format WebP prend en charge la compression d’images 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 conduire à une https://blog.chromium.org/2014/03/webp-improves- while-rolling-out-across.html Si votre application ou votre site Web rencontre des problèmes de performances ou d’augmentation du trafic, la conversion de vos images peut permettre d’optimiser les performances de la page.

Dans ce didacticiel, vous utiliserez l’outil de ligne de commande + cwebp + pour convertir des images au format WebP, en créant des scripts qui visionneront et convertiront les images dans un répertoire spécifique. Enfin, vous explorerez deux manières de fournir des images WebP à vos visiteurs.

Conditions préalables

Travailler avec des images WebP ne nécessite pas de distribution particulière, mais nous montrerons comment utiliser des logiciels pertinents sous Ubuntu 16.04 et CentOS 7. Pour suivre ce tutoriel, vous aurez besoin de:

Étape 1 - Installation de cwebp et préparation du répertoire d’images

Dans cette section, nous allons installer un logiciel permettant de convertir des images et créer un répertoire avec des images à titre de mesure de 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 sous + / var / www / html +), tapez:

sudo mkdir /var/www/html/webp

Changez la propriété de ce répertoire en votre utilisateur non-root * sammy *:

sudo chown : /var/www/html/webp

Pour tester les commandes, vous pouvez télécharger gratuitement des images JPEG et PNG en utilisant + 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

La majeure partie de votre travail à l’étape suivante se fera dans le répertoire + / var / www / html / webp +, que vous pourrez 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 d’images.

Étape 2 - Compression des fichiers image avec cwebp

La diffusion d’images + .webp + aux visiteurs du site nécessite des versions + .webp + de fichiers images. Dans cette étape, vous allez convertir les images JPEG et PNG au format + .webp + en utilisant + cwebp +. La syntaxe * générale * 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

Régler le facteur de qualité + -q + sur 100 conserve 100% de la qualité de l’image; si non 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 + affiche le format de liste longue, qui inclut la taille du fichier, et l’option + -h + garantit que + ls + imprime des tailles lisibles par l’homme:

ls -lh image1.jpg image1.webp image2.jpg image2.webp
Output-rw-r--r-- 1 sammy sammy 7.4M Oct 28 23:36 image1.jpg
-rw-r--r-- 1 sammy sammy 3.9M Feb 18 16:46
-rw-r--r-- 1 sammy sammy  16M Dec 18  2016 image2.jpg
-rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59

Le résultat de la commande + ls + indique que la taille de + image1.jpg + est de 7,4 Mo, tandis que celle de + image1.webp + est de 3,9 M. Il en va de même pour + image2.jpg + (16M) et + image2.webp + (7M). Ces fichiers sont presque la moitié de leur taille originale!

Pour enregistrer l’intégralité des données d’origine des images pendant la compression, vous pouvez utiliser l’option + -lossless + à la place de + -q +. C’est la meilleure option pour maintenir la qualité des images PNG. Pour convertir l’image PNG téléchargée à l’étape 1, tapez:

cwebp -lossless logo.png -o logo.webp

La commande suivante montre que la taille de l’image WebP sans perte (60 Ko) est environ la moitié de celle de l’image PNG d’origine (116 Ko):

ls -lh logo.png logo.webp
Output-rw-r--r-- 1 sammy sammy 116K Jul 18  2017 logo.png
-rw-r--r-- 1 sammy sammy  60K Feb 18 16:42

Les images WebP converties dans le répertoire + / var / www / html / webp + sont environ 50% plus petites que leurs contreparties JPEG et PNG. En pratique, les taux de compression peuvent différer en fonction de certains facteurs: taux de compression de l’image d’origine, format de fichier, type de conversion (avec ou sans perte), pourcentage de qualité et système d’exploitation. Au fur et à mesure que vous convertissez plus d’images, il est possible que les taux de conversion varient en fonction de ces facteurs.

Étape 3 - Conversion des images JPEG et PNG dans un répertoire

L’écriture d’un script simplifiera le processus de conversion en éliminant le travail de conversion manuelle. Nous allons maintenant écrire un script de conversion qui recherche les fichiers JPEG et les convertit au format WebP avec une qualité de 90%, tout en convertissant les fichiers PNG en images WebP sans perte.

En utilisant + nano + ou votre éditeur favori, créez le script + webp-convert.sh + dans le répertoire personnel de votre utilisateur:

nano ~/webp-convert.sh

La première ligne du script ressemblera à ceci:

~ / webp-convert.sh

find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \)

Cette ligne a les composants suivants:

  • https://www.digitalocean.com/community/tutorials/how-to-use-find-and-locate-to-search-for-files-on-a-linux-vps [+ find +]: Cette commande va rechercher des fichiers dans un répertoire spécifié.

  • + $ 1 +: Ce paramètre de position spécifie le chemin du répertoire images, pris à partir de la ligne de commande. En fin de compte, l’emplacement du répertoire est moins dépendant de l’emplacement du script.

  • + -type f +: Cette option dit + find + de ne rechercher que 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 donne pour instruction à la commande + find + de répertorier les fichiers correspondant au premier test + -iname + (+ -iname" * .jpg "+) * ou * le second (`+ -iname "* .jpeg" + `).

  • + () +: Les parenthèses entourant ces tests, ainsi que les opérateurs + et +, 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 en utilisant le paramètre + -exec +. La syntaxe générale de ce paramètre est + -exec commande {} \; +. La chaîne + {} + est remplacée par chaque fichier parcouru par la commande, tandis que le +; + indique + find + où la commande se termine:

~ / webp-convert.sh

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 transformera la version + .webp + du fichier s’il n’existe pas. Ce script sera passé à + ​​bash + sous forme de chaîne grâce à l’option + -c +.

  • + 'orders' +: Cet espace réservé est le script qui créera les versions + .webp + de vos fichiers.

Le script à l’intérieur de + '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 script plus petit ressemble à ceci:

~ / webp-convert.sh

...
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 script plus petit incluent:

  • + webp_path +: Cette variable sera générée à l’aide de https://www.digitalocean.com/community/tutorials/the-basics-of-using-the-sed-stream-editor-tomanificating-text-in-linux [+ sed +] et le nom de fichier correspondant de la commande + bash +, indiqué par le paramètre de position + $ 0 +. Un here string (+ <<< +) passera ce nom à + ​​sed +.

  • + si [! -f "$ webp_path"] + `: Ce test déterminera 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 + afin de ne pas imprimer le résultat.

Avec ce script plus petit à la place des commandes "" ' "espace réservé, le script complet permettant de convertir des images JPEG ressemblera désormais à ceci:

~ / webp-convert.sh

# 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, à deux différences près: premièrement, le modèle + -iname + de la commande + find + sera " *. Png ". Deuxièmement, la commande de conversion utilisera l’option + -lossless + au lieu de l’option de qualité + -q +.

Le script terminé ressemble à ceci:

~ / webp-convert.sh

#!/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 en pratique le script + webp-convert.sh + 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 + créés à l’étape 2:

rm /var/www/html/webp/*.webp

Après avoir supprimé toutes les images + .webp +, exécutez à nouveau le script pour vous assurer qu’il fonctionne:

./webp-convert.sh /var/www/html/webp

La commande + ls + confirmera que le script a converti les images avec succès:

ls -lh /var/www/html/webp
Output-rw-r--r-- 1 sammy sammy 7.4M Oct 28 23:36 image1.jpg
-rw-r--r-- 1 sammy sammy 3.9M Feb 18 16:46
-rw-r--r-- 1 sammy sammy  16M Dec 18  2016 image2.jpg
-rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59
-rw-r--r-- 1 sammy sammy 116K Jul 18  2017 logo.png
-rw-r--r-- 1 sammy sammy  60K Feb 18 16:42

Le script de cette étape est à la base de l’utilisation des images WebP sur votre site, car vous aurez besoin d’une version de travail de toutes les images au format WebP pour pouvoir servir les visiteurs. La prochaine étape couvrira comment automatiser la conversion de nouvelles images.

Étape 4 - Regarder des fichiers image dans un répertoire

Dans cette étape, nous allons créer un nouveau script pour surveiller les modifications apportées à notre répertoire d’images et convertir automatiquement les images nouvellement créées.

Créer un script qui surveille notre répertoire images peut résoudre certains problèmes avec le script + webp-convert.sh + tel qu’il est écrit. Par exemple, ce script n’identifiera pas si nous avons renommé une image. Si nous avions une image appelée + foo.jpg +, exécutée + webp-convert.sh +, renommée ce fichier + bar.jpg +, puis exécutée à nouveau + webp-convert.sh +, nous aurions dupliqué + .webp + fichiers (+ foo.webp + et + bar.webp +). Pour résoudre ce problème et éviter d’exécuter le script manuellement, nous allons ajouter watchers à un autre script. Les observateurs surveillent les modifications apportées aux fichiers ou aux répertoires spécifiés et exécutent des commandes en réponse à ces modifications.

La commande + inotifywait + va configurer les observateurs dans notre script. Cette commande fait partie du paquetage + inotify-tools +, un ensemble d’outils de ligne de commande fournissant une interface simple au sous-système du noyau inotify. Pour l’installer sur Ubuntu 16.04, tapez:

sudo apt-get install inotify-tools

Avec CentOS 7, le package + inotify-tools + est disponible sur le référentiel EPEL. Installez le référentiel EPEL et le package + inotify-tools + en utilisant les commandes suivantes:

sudo yum install epel-release
sudo yum install inotify-tools

Ensuite, créez le script + webp-watchers.sh + dans le répertoire personnel de votre utilisateur en utilisant + nano +:

nano ~/webp-watchers.sh

La première ligne du script ressemblera à ceci:

~ / webp-watchers.sh

inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1

Cette ligne comprend les éléments suivants:

  • + inotifywait +: Cette commande surveille les modifications apportées à un certain répertoire.

  • + -q +: cette option dira + inotifywait + d’être silencieux et de ne pas produire beaucoup de sortie.

  • + -m +: cette option indiquera + inotifywait + de s’exécuter indéfiniment et de ne pas quitter après la réception d’un seul événement.

  • + -r +: Cette option va configurer les observateurs de manière récursive, en surveillant un répertoire spécifié et tous ses sous-répertoires.

  • + - format +: Cette option indique + inotifywait + de surveiller les modifications en utilisant le nom de l’événement suivi du chemin du fichier. Les événements que nous voulons surveiller sont + close_write + (déclenchés lors de la création et de l’écriture complète d’un fichier sur le disque), + déplacer_from + et + + déplacés_à + (déclenchés lors du déplacement d’un fichier) et + delete + ( déclenché lorsqu’un fichier est supprimé).

  • + $ 1 +: Ce paramètre de position contient le chemin des fichiers modifiés.

Ensuite, ajoutons une commande + grep + pour déterminer si nos fichiers sont des images JPEG ou PNG. L’option + -i + indiquera + grep + pour ignorer la casse, + -E + spécifiera que + grep + doit utiliser des expressions régulières étendues, et + - line-buffered + dira + grep + pour passer les lignes correspondantes à une boucle + while +:

~ / webp-watchers.sh

inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 | grep -i -E '\.(jpe?g|png)$' --line-buffered

Ensuite, nous allons construire une boucle while - avec la commande + read`. + read i traitera l’événement '+ inotifywait` détecté, en l’attribuant à une variable appelée` + $ operation + et le chemin du fichier traité à une variable nommée + $ chemin + `:

~ / webp-watchers.sh

...
| while read operation path; do
 # commands
done;

Combinons cette boucle avec le reste de notre script:

~ / webp-watchers.sh

inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 \
| grep -i -E '\.(jpe?g|png)$' --line-buffered \
| while read operation path; do
 # commands
done;

Après vérification de l’événement par la boucle + while +, les commandes à l’intérieur de la boucle effectueront les actions suivantes, en fonction du résultat:

  • Créez un nouveau fichier WebP si un nouveau fichier image a été créé ou déplacé vers le répertoire cible.

  • Supprimez le fichier WebP si le fichier image associé a été supprimé ou déplacé du répertoire cible.

Il y a trois sections principales dans la boucle. Une variable appelée + webp_path + contiendra le chemin d’accès à la version + .webp + de l’image du sujet:

~ / webp-watchers.sh

...
webp_path="$(sed 's/\.[^.]*$/.webp/' <<< "$path")";

Ensuite, le script testera quel événement s’est produit:

~ / webp-watchers.sh

...
if [ $operation = "MOVED_FROM" ] || [ $operation = "DELETE" ]; then
 # commands to be executed if the file is moved or deleted
elif [ $operation = "CLOSE_WRITE,CLOSE" ] || [ $operation = "MOVED_TO" ]; then
 # commands to be executed if a new file is created
fi;

Si le fichier a été déplacé ou supprimé, le script vérifiera si la version + .webp + existe. Si c’est le cas, le script le supprimera en utilisant + rm +:

~ / webp-watchers.sh

...
if [ -f "$webp_path" ]; then
 $(rm -f "$webp_path");
fi;

Pour les fichiers nouvellement créés, la compression se déroulera comme suit:

  • Si le fichier correspondant est une image PNG, le script utilisera la compression sans perte.

  • Sinon, le script utilisera une compression avec perte avec l’option + -quality +.

Ajoutons les commandes + cwebp + qui effectueront ce travail dans le script:

~ / webp-watchers.sh

...
if [ $(grep -i '\.png$' <<< "$path") ]; then
 $(cwebp -quiet -lossless "$path" -o "$webp_path");
else
 $(cwebp -quiet -q 90 "$path" -o "$webp_path");
fi;

Au complet, le fichier + webp-watchers.sh + ressemblera à ceci:

~ / webp-watchers.sh

#!/bin/bash
echo "Setting up watches.";

# watch for any created, moved, or deleted image files
inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 \
| grep -i -E '\.(jpe?g|png)$' --line-buffered \
| while read operation path; do
 webp_path="$(sed 's/\.[^.]*$/.webp/' <<< "$path")";
 if [ $operation = "MOVED_FROM" ] || [ $operation = "DELETE" ]; then # if the file is moved or deleted
   if [ -f "$webp_path" ]; then
     $(rm -f "$webp_path");
   fi;
 elif [ $operation = "CLOSE_WRITE,CLOSE" ] || [ $operation = "MOVED_TO" ]; then  # if new file is created
    if [ $(grep -i '\.png$' <<< "$path") ]; then
      $(cwebp -quiet -lossless "$path" -o "$webp_path");
    else
      $(cwebp -quiet -q 90 "$path" -o "$webp_path");
    fi;
 fi;
done;

Enregistrez et fermez le fichier. N’oubliez pas de le rendre exécutable:

chmod a+x ~/webp-watchers.sh

Lançons ce script dans le répertoire + / var / www / html / webp + en arrière-plan, en utilisant + + +. Réorientons également la sortie standard et l’erreur standard vers `` ~ ~ / output.log + `, pour stocker la sortie dans un emplacement facilement disponible:

./webp-watchers.sh /var/www/html/webp > output.log 2>&1 &

À ce stade, vous avez converti les fichiers JPEG et PNG au format / / var / www / html / webp + au format WebP, et vous avez configuré les observateurs pour effectuer ce travail à l’aide du script + webp-watchers.sh +. Il est maintenant temps d’explorer les options permettant de fournir des images WebP aux visiteurs de votre site Web.

Étape 5 - Service des images WebP aux visiteurs à l’aide d’éléments HTML

Dans cette étape, nous expliquerons comment servir des images WebP avec des éléments HTML. À ce stade, il devrait y avoir des versions + .webp + de chacune des images JPEG et PNG de test dans le répertoire + / var / www / html / webp +. Nous pouvons maintenant les servir aux navigateurs compatibles en utilisant des éléments HTML5 (+ <picture> +) ou le module + mod_rewrite + Apache. Nous allons utiliser des éléments HTML à cette étape.

L’élément + <picture> + vous permet d’inclure des images directement dans vos pages Web et de définir plusieurs sources d’image. Si votre navigateur prend en charge le format WebP, il téléchargera la version + .webp + du fichier à la place de la version d’origine, ce qui accélérera la diffusion des pages Web. Il est à noter que l’élément + <picture> + est bien pris en charge dans les navigateurs modernes prenant en charge le format WebP.

L’élément + <picture> + est un conteneur avec les éléments + <source> + et + <img> + qui pointent vers des fichiers particuliers. Si nous utilisons + <source> + pour pointer sur une image + .webp +, le navigateur verra s’il peut le gérer. sinon, il retournera au fichier image spécifié dans l’attribut + src + dans l’élément + <img> +.

Utilisons le fichier + logo.png + de notre répertoire + / var / www / html / webp +, que nous avons converti en + logo.webp +, comme exemple avec + <source> +. Nous pouvons utiliser le code HTML suivant pour afficher + logo.webp + sur tout navigateur prenant en charge le format WebP et + logo.png + sur tout navigateur ne prenant pas en charge WebP ou l’élément + <image> +.

Créez un fichier HTML situé dans + / var / www / html / webp / picture.html:

nano /var/www/html/webp/picture.html

Ajoutez le code suivant à la page Web pour afficher + logo.webp + aux navigateurs compatibles à l’aide de l’élément + <image> +:

/var/www/html/webp/picture.html

<picture>
 <source srcset="logo.webp" type="image/webp">
 <img src="logo.png" alt="Site Logo">
</picture>

Enregistrez et fermez le fichier.

Pour vérifier que tout fonctionne, accédez à + ​​http: /// webp / picture.html. Vous devriez voir l’image test PNG.

Maintenant que vous savez comment servir les images + .webp + directement à partir de code HTML, voyons comment automatiser ce processus à l’aide du module + mod_rewrite + d’Apache.

Étape 6 - Gestion des images WebP avec mod_rewrite

Si nous voulons optimiser la vitesse de notre site, mais avons un grand nombre de pages ou trop peu de temps pour éditer le code HTML, le module + mod_rewrite + d’Apache peut nous aider à automatiser le processus de fourniture d’images + .webp + au support. navigateurs.

Commencez par créer un fichier + .htaccess + dans le répertoire + / var / www / html / webp + à l’aide de la commande suivante:

nano /var/www/html/webp/.htaccess

La directive + ifModule + testera si + mod_rewrite + est disponible; si c’est le cas, vous pouvez l’activer en utilisant + RewriteEngine On +. Ajoutez ces directives au + .htaccess +:

/var/www/html/webp/.htaccess

<ifModule mod_rewrite.c>
 RewriteEngine On
 # further directives
</IfModule>

Le serveur Web effectuera plusieurs tests pour déterminer quand servir les images + .webp + à l’utilisateur. Lorsqu’un navigateur émet une demande, il inclut un en-tête pour indiquer au serveur ce que le navigateur est capable de gérer. Dans le cas de WebP, le navigateur enverra un en-tête + Accept + contenant + image / webp +. Nous vérifierons si le navigateur a envoyé cet en-tête en utilisant + RewriteCond +, qui spécifie les critères qui doivent être mis en correspondance pour pouvoir exécuter le + RewriteRule +:

/var/www/html/webp/.htaccess

...
RewriteCond %{HTTP_ACCEPT} image/webp

Tout doit être filtré sauf les images JPEG et PNG. En utilisant + RewriteCond + encore, ajoutez une expression régulière (similaire à celle utilisée dans les sections précédentes) pour correspondre à l’URI demandé:

/var/www/html/webp/.htaccess

...
RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$

Le modificateur + (? I) + rendra la correspondance insensible à la casse.

Pour vérifier si la version + .webp + du fichier existe, utilisez + RewriteCond + comme suit:

/var/www/html/webp/.htaccess

...
RewriteCond %{DOCUMENT_ROOT}%1.webp -f

Enfin, si toutes les conditions précédentes sont remplies, + RewriteRule + redirigera le fichier JPEG ou PNG demandé vers le fichier WebP associé. Notez que cela sera redirect en utilisant l’indicateur + -R +, plutôt que rewrite l’URI. La différence entre la réécriture et la redirection réside dans le fait que le serveur servira l’URI réécrit sans en informer le navigateur. Par exemple, l’URI indiquera que l’extension du fichier est + .png +, mais il s’agira en fait d’un fichier + .webp +. Ajoutez + RewriteRule + au fichier:

/var/www/html/webp/.htaccess

...
RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R]

À ce stade, la section + mod_rewrite + du fichier + .htaccess + est terminée. Mais que se passera-t-il s’il existe un serveur de mise en cache intermédiaire entre votre serveur et le client? Cela pourrait servir la mauvaise version à l’utilisateur final. C’est pourquoi il est utile de vérifier si + mod_headers + est activé, afin d’envoyer l’en-tête + Vary: Accept +. L’en-tête + Vary + indique aux serveurs de mise en cache (comme les serveurs proxy) que le type de contenu du document varie en fonction des capacités du navigateur qui demande le document. De plus, la réponse sera générée en fonction de l’en-tête + Accept + 'de la demande. Une demande avec un en-tête `+ Accept + différent peut obtenir une réponse différente. Cet en-tête est important car il empêche les images WebP en cache d’être exposées aux navigateurs non pris en charge:

/var/www/html/webp/.htaccess

...
<IfModule mod_headers.c>
 Header append Vary Accept env=REDIRECT_accept
</IfModule>

Enfin, à la fin du fichier + .htaccess +, définissez le type MIME des images + .webp + sur + image / webp + à l’aide de la directive + AddType +. Cela servira les images en utilisant le bon type MIME:

/var/www/html/webp/.htaccess

...
AddType image/webp .webp

Ceci est la version finale de votre fichier + .htaccess:

/var/www/html/webp/.htaccess

<ifModule mod_rewrite.c>
 RewriteEngine On
 RewriteCond %{HTTP_ACCEPT} image/webp
 RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$
 RewriteCond %{DOCUMENT_ROOT}%1.webp -f
 RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R]
</IfModule>

<IfModule mod_headers.c>
 Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

Mettons en pratique ce que nous avons fait dans cette étape. Si vous avez suivi les instructions des étapes précédentes, vous devez avoir les images + logo.png et` + logo.webp` dans + / var / www / html / webp. Utilisons une simple balise + <img> + pour inclure + logo.png + dans notre page Web. Créez un nouveau fichier HTML pour tester la configuration:

nano /var/www/html/webp/img.html

Entrez le code HTML suivant dans le fichier:

/var/www/html/webp/img.html

<img src="logo.png" alt="Site Logo">

Enregistrez et fermez le fichier.

Lorsque vous visitez la page Web à l’aide de Chrome en accédant à + ​​http: /// webp / img.html +, vous remarquerez que l’image servie est la version + .webp + (essayez d’ouvrir l’image dans un nouvel onglet). Si vous utilisez Firefox, vous obtiendrez automatiquement une image + .png +.

Conclusion

Dans ce tutoriel, nous avons abordé les techniques de base pour travailler avec des images WebP. Nous avons expliqué comment utiliser + cwebp + pour convertir des fichiers, ainsi que deux options pour transmettre ces images aux utilisateurs: l’élément + <picture> + de HTML5 et le + mod_rewrite + de Apache.

Pour personnaliser les scripts de ce didacticiel, vous pouvez consulter certaines de ces ressources:

  • Pour en savoir plus sur les fonctionnalités du format WebP et sur l’utilisation des outils de conversion, voir la documentation WebP.

  • Pour plus de détails sur l’utilisation de l’élément + <picture> +, voir son documentation on MDN.

  • Pour bien comprendre comment utiliser + mod_rewrite +, voir son documentation.

L’utilisation du format WebP pour vos images réduira considérablement la taille des fichiers. Cela peut réduire l’utilisation de la bande passante et accélérer le chargement des pages, en particulier si votre site Web utilise beaucoup d’images.