Dans ce tutoriel, nous allons vous apprendre à convertir des GIFs animés en WebP, un format d'image moderne offrant une meilleure qualité et une compression plus efficace.

Prérequis

Systèmes d'exploitation: macOS, Ubuntu/Debian, Windows
Outils: brew ou apt-get sur Unix, chocolatey sur Windows
Connaissances de base en ligne de commande

Étape 1 : Installer les outils nécessaires

Pour commencer, nous allons installer les outils requis pour effectuer la conversion.

# macOS
brew install webp

# Ubuntu/Debian
sudo apt install webp

# Windows (via chocolatey)
choco install webp

Étape 2 : Convertir un GIF en WebP avec gif2webp

Utilisez l'outil gif2webp pour effectuer la conversion de base.

# Lossy, qualité 70, boucle infinie
gif2webp -lossy -q 70 -loop 0 -m 4 input.gif -o output.webp

Pour un meilleur ratio entre la qualité et la taille du fichier, vous pouvez utiliser le mode mixte :

# Mode mixed (le meilleur ratio en général)
gif2webp -mixed -q 70 -loop 0 -m 4 input.gif -o output.webp

Le paramètre -m définit la méthode de compression. Un valeur plus élevée signifie une meilleure compression mais un processus plus lent.

Étape 3 : Convertir avec ffmpeg

Si vous avez déjà ffmpeg installé, vous pouvez également l'utiliser pour la conversion.

# Conversion basique GIF vers WebP animé
ffmpeg -i input.gif -c:v libwebp_anim -loop 0 -lossless 0 -q:v 70 output.webp

Pour une qualité maximale :

# Qualité max (lossless)
ffmpeg -i input.gif -c:v libwebp_anim -loop 0 -lossless 1 output.webp

Étape 4 : Convertir avec ImageMagick

ImageMagick est une autre option pour convertir vos animations.

magick input.gif -coalesce -quality 80 -loop 0 output.webp

Le -coalesce est essentiel pour éviter les artefacts visuels dus à l'optimisation des frames dans les GIFs.

Étape 5 : Conversion en masse

Pour convertir plusieurs GIFs dans un dossier, vous pouvez utiliser le script suivant :

# Convertir tous les GIFs d'un dossier
for f in *.gif; do
 gif2webp -mixed -q 70 -m 4 "$f" -o "${f%.gif}.webp"
 echo "$f converti"
done

Étape 6 : Intégrer les WebP sur un site web

Pour afficher vos WebP sur un site, utilisez l'élément <picture> :

<picture>
 <source srcset="animation.webp" type="image/webp" />
 <img src="animation.gif" alt="Animation" />
</picture>

Pour aller plus loin

Si vous souhaitez optimiser davantage vos animations, vous pourriez envisager les formats MP4/WebM pour des animations plus longues, ou Lottie pour des animations vectorielles.