Remplacer les JPG, PNG et GIF par du WebP

Présentation de WebP

WebP est un format d'image ouvert proposé par Google, permettant de remplacer sur le Web différents formats d'images :

• le JPG, utilisé généralement pour les photos, avec une perte de qualité (format destructif)
• le PNG, utilisé pour les photos et images sans perte de qualité et avec plusieurs niveaux de transparence (la couche alpha)
• le GIF, préconisé pour les images avec peu de couleurs, un niveau de transparence et les animations

Jusqu'à présent, selon le contenu à afficher, il fallait choisir le format le plus adapté selon son besoin en faisant un compromis entre qualité et poids du fichier.

WebP apporte une solution à ce dilemme en se proposant comme un format à la fois efficace en poids et en qualité, en gérant la compression avec ou sans perte, des niveaux de transparence et des animations. A noter que ce n'est pas toujours le cas : j'ai en effet converti des fichiers PNG-8 en Webp et ces derniers étaient 20% plus volumineux.

Modifications d'un site Internet pour WebP

Il vous faudra tout d'abord convertir vos images actuelles avec WebP :

• Pour de la conversion en lot d'un ensemble d'images, XnView, le logiciel gratuit de visualisation d'images, fera parfaitement le travail.
• Pour de l'édition image par image :
• Les dernières versions de Gimp reconnaissent le format.
• Pour Photoshop, si votre version ne sait pas le lire, vous pouvez appliquer ceci :
• Rendez-vous sur le site Telegraphics.com.au qui propose des extensions pour Photoshop.
• Téléchargez l'archive qui correspond à votre version (32 bits ou 64 bits)
• Déposez le fichier WebPFormat.8bi (ou WebPFormat64.8bi) dans le répertoire de Photoshop, au niveau du sous-répertorie "Plug-ins/File Formats" (ou "Plug-ins" si vous n'avez pas le sous-répertoire "File Formats").
• Démarrez Photoshop et le format WebP sera automatiquement reconnu.

Au niveau de la reconnaissance du format sur les navigateurs, tous le reconnaissent à présent, mis à part les navigateurs qui ne peuvent être mis à jour (sur Android par exemple...).

Côté HTML, vous pouvez utiliser la balise classique IMG comme ceci :

Redirection des images JPG, PNG et GIF depuis Apache

Pour rediriger les visiteurs qui feraient des appels aux anciennes versions des images, vous pouvez les rediriger simplement en modifiant le fichier .htaccess comme ci-dessous (en partant du postulat que ce fichier .htaccess se trouve dans le répertoire des images).