Emir Chouchane - Carnet de notes

WebP - Le format d'image du futur

Depuis quelque temps, je m’intéresse au poids du web. Plus les connexions deviennent rapides, plus les sites se permettent d’être lourds… et ça pose plein de questions, surtout quand on parle d’accessibilité. Ce n’est pas juste une question de handicap : ça concerne aussi celles et ceux qui accèdent au web avec des vieux appareils ou des connexions lentes. Bref, tout le monde n’a pas la fibre et un MacBook Pro.

Un des gros coupables, ce sont les images. Et c’est là que j’ai redécouvert le format WebP. Il remplace avantageusement les classiques JPEG et PNG, avec un taux de compression bien meilleur. Moins lourd, mais visuellement presque pareil. En bonus, il gère la transparence (comme le PNG), les animations (comme le GIF), et il est pensé spécifiquement pour le web. C’est un projet open source de Google (licence ici), toujours activement maintenu (repo ici).

WebP propose deux types de compression : lossy (avec perte) et lossless (sans perte), selon le besoin. Et franchement, c’est un bon compromis. Il est même supporté par la majorité des navigateurs. Moins de bande passante utilisée, un site qui se charge plus vite, une meilleure expérience utilisateur, et même un petit coup de pouce côté SEO.

Ce qui m’intéresse aussi, c’est l’aspect écologique : réduire la bande passante, c’est consommer un peu moins d’énergie. Pas énorme à l’échelle d’une page, mais à l’échelle du web… ça compte.

Et puis, il y a aussi le stockage. Pour un petit site, ce n’est pas un enjeu majeur, mais pour une grosse plateforme avec des milliers de pages, ça commence à peser.

Bref, je garde WebP dans ma boîte à outils. Un petit geste technique, mais qui va dans le bon sens.

Comment convertir en WebP

Solution en ligne de commande avec cwebp

Sur Windows

  1. Rendez-vous sur le site officiel du projet WebP.
  2. Télécharger le fichier "libwebp-xxx-windows-x64.zip" (remplacez "xxx" par la version actuelle).
  3. Extraire le fichier ZIP dans un dossier de votre choix.
  4. Ajouter le chemin du dossier extrait à la variable d'environnement "Path" de votre système.

Sur macOS (en utilisant Homebrew)

  1. Si vous n'avez pas Homebrew installé, vous pouvez le faire en suivant les instructions sur le site officiel (https://brew.sh).
  2. Ouvrir le terminal et taper la commande suivante :
brew install webp

Sur Linux (Debian/Ubuntu)

Ouvrir le terminal et taper la commande suivante :

sudo apt-get install webp

Utilisation de l'outil

La syntaxe de base pour utiliser cwebp est la suivante :

cwebp [options] input_image -o output_image.webp

input_image : le fichier image d'origine (JPEG, PNG, etc.). output_image.webp : le nom du fichier WebP de sortie. [options] : les options de conversion, telles que la qualité, la méthode de compression, etc.

Pour convertir une image JPEG en WebP avec une qualité de 80% :

cwebp -q 80 input_image.jpg -o output_image.webp

et tout les fichiers dans le dossier images :

for file in images/*; do cwebp -q 80 "$file" -o "${file%.*}.webp"; done

Voici quelques options courantes pour personnaliser la conversion :

-q : définit la qualité de l'image WebP (0 à 100). Une valeur plus élevée donne une qualité d'image plus élevée et une taille de fichier plus importante. Par exemple, -q 80 définit une qualité de 80%.

-m : sélectionne la méthode de compression (0 à 6). Une valeur plus élevée offre une meilleure compression, mais nécessite plus de temps pour la conversion. Par exemple, -m 6 utilise la méthode de compression la plus lente et la plus efficace.

-lossless : convertit l'image en mode sans perte. Utilisez cette option pour conserver la qualité d'image d'origine.

-z : active le mode "sans pertes" avec une compression optimale. Cela prendra plus de temps pour la conversion, mais réduira davantage la taille du fichier.

-resize : redimensionne l'image avant la conversion. Par exemple, -resize 800 600 redimensionne l'image à 800x600 pixels.

Pour plus d'options, consultez la documentation officielle de cwebp.

Solution pour les SSG

Solution logicielle

Compatible avec Photoshop 23.2 (depuis début 2022)

Futurs développements

Les formats AVIF et JPEG XL sont en développement, ainsi que WebP 2.