Pourquoi utiliser des formats d’images modernes (WebP) ?

J’ai récemment dû optimiser un site et la première chose que j’ai vu, c’est que des images non optimisées retardent beaucoup l’affichage d’un site.

Le WebP

Lors de mes recherches sur l’optimisation d’image, je suis tombé sur le WebP.

C’est quoi le WebP ?

Le WebP c’est un format d’image fait par Google fait pour le web. Il permet de garder une image en assez bon état tout en réduisant considérablement sa taille.

Grâce à ce format, j’ai pu réduire de 95% la taille des photos du site que j’ai optimisé. Grâce à cette réduction, le temps de chargement a été réduit. Penser aux utilisateurs sur 4G/5G, cela leur à fait une économie de données. Et pour nous développeurs, cela nous prend moins d’espace disque et moins de bande passante.

Petit bonus, moins d’espace utilisée et moins de bande passante = moins d’électricité utilisée. C’est donc écolo de réduire la taille de nos images.

Mais comment convertir mes images au format .webp ?

Bonne question ! Eh bien figurez-vous que j’ai une réponse !

Utiliser les outils mis à disposition par Google pour convertir des images en .webp.

Les outils sont compatibles avec Mac OS, Windows et Linux.

Installation

Installer sous Mac OS

Vous pouvez installer les outils avec Brew ou MacPort.

Avec Brew (Homebrew)

brew install webp

Avec MacPort

sudo port install webp

Installer sous Windows

Vous pouvez installer les outils avec Chocolatey, WSL (2) et via les binary disponible sur le site du projet.

Avec Chocolatey

choco install webp

Avec WSL (2)

Suivre la méthode pour linux.

Via les fichiers executables

Téléchargement disponible ici

Installer sous Linux

Vous pouvez installer les outils avec LinuxBrew, et surement avec les dépôts de votre distribution.

Avec Brew (HomeBrew/LinuxBrew)

brew install webp

Via les dépôts de votre distribution

Sous Debian/Ubuntu la commande est :

sudo apt install libwebp

Avec les autres distributions le gestionnaire de package sera différent, mais le nom devrait être le même.

Comment ça marche ?

Il y a 2 outils, un pour convertir un .png/.jpeg en .webp. Et l’autre pour faire l’inverse.

cwebp

cebp sert à convertir des images .png ou .jpeg (ou .jpg) en .webp

Pour cela, placer vous dans le dossier où se trouve l’image à convertir et faites :

cwebp -q 80 image.png -o image.webp

Houla, c’est quoi ça ?!

cwebp c’est le nom du programme.

-q est un paramètre qui indique que la valeur qui va suivre est la qualité.

80 est la qualité. C’est celle que j’ai utilisée dans l’exemple du dessus. (La qualité doit être comprise en 0 et 100)

image.png c’est votre image de départ

-o est le paramètre qui indique que ce qui suit est le nom du fichier de sortie. (Votre image en .webp)

image.webp c’est le nom du fichier de sortie

Et voilà, vous avez une image en .webp !

dwebp

debp sert à convertir des images .webp en .png

Pour cela placer vous dans le dossier de votre image et faites :

dwebp image.webp -o image.png

Houla, c’est quoi ça ?!

dwebp c’est le nom du programme.

image.webp c’est votre image de départ

-o est le paramètre qui indique que ce qui suit est le nom du fichier de sortie. (Votre image en .webp)

image.png c’est le nom du fichier de sortie

Et voilà, vous avez une image en .png !

Convertir avec des outils en lignes

Vous pouvez aussi convertir vos images avec un service en ligne, mais vous n’aurez pas la satisfaction d’avoir tout bien installer et que ça fonctionne 😜.

Pour les conversions en ligne, j’utilise Cloudconvert.

Si vous en connaissez d’autres, n’hésitez pas à les mettre dans les commentaires.