Connexion
WebP animé vs GIF - Le guide pour enfin virer vos animations de 1987
Le GIF, c'est un format que j'adore mais qui date de 1987. Ouais c'est super vieux quoi (désolé les gens qui sont né cette année là ou avant...On est ensemble...loool). C'est l'époque où Rick Astley cartonnait et où Internet n'existait même pas encore pour le grand public. Et pourtant, y'a encore plein de gens qui s'en servent pour leurs animations avec notamment de la transparence. Alors c'est cool mais aujourd'hui, je vous propose qu'on règle ça une bonne fois pour toute.
Le problème du GIF en fait c'est assez technique puisque ça se compose de 8 bits de couleur (256 couleurs max) et surtout d'un alpha 1 bit. Chaque pixel est donc soit totalement opaque, soit totalement transparent, y'a pas d'entre-deux. Du coup quand vous avez une animation avec des bords arrondis ou des ombres portées, vous vous retrouvez avec des bords tout crénelés et moches. Ça donne un effet "découpage aux ciseaux de maternelle" qu'on aime bien parce que ça fait très rétro mais bon, on peut faire mieux aujourd'hui.
Car avec le WebP animé, c'est une autre histoire. Là on passe à 24 bits de couleur (plus de 16 millions de couleurs) et un alpha 8 bits, c'est-à-dire 256 niveaux de transparence au lieu de juste oui/non. Les dégradés, les ombres, les bords anti-aliasés... tout ça passe nickel et vos animations ont enfin l'air pro au lieu de sortir d'un site GeoCities.
Et niveau poids, y'a pas photo. Google annonce ~64% de réduction en lossy par rapport au GIF même si en pratique, comptez entre 50 et 70% de gain selon la complexité de l'animation. Cela veut dire que sur une page web avec plusieurs animations, ça fait une SACRÉE différence niveau temps de chargement.
Et côté compatibilité, en 2026 la question ne se pose plus puisque Chrome, Firefox, Safari (depuis iOS 14 en 2020), Edge... bref tout le monde supporte le WebP animé. Donc ces conneries de compatibilité, c'est plus une excuse !
Convertir avec gif2webp (la méthode recommandée)
L'outil officiel de Google s'appelle gif2webp (il est inclus dans
libwebp
) et c'est ce qu'il y a actuellement de plus fiable pour ce job.
Installez-le d'abord comme ceci :
# macOS
brew install webp
# Ubuntu/Debian
sudo apt install webp
# Windows (via chocolatey)
choco install webp
Ensuite, la conversion de base est plutôt simple :
# Lossy, qualité 70, boucle infinie
gif2webp -lossy -q 70 -loop 0 -m 4 input.gif -o output.webp
# Mode mixed (le meilleur ratio en général)
# Choisit automatiquement lossless ou lossy frame par frame
gif2webp -mixed -q 70 -loop 0 -m 4 input.gif -o output.webp
# Compression max (plus lent, fichier plus petit)
gif2webp -lossy -q 70 -loop 0 -m 6 input.gif -o output.webp
Le paramètre -m c'est la méthode de compression, de 0 (rapide) à 6 (lent mais meilleur ratio). Perso, -m 4 je trouve que c'est le sweet spot comme on dit. Et le mode -mixed est intéressant aussi parce qu'il analyse chaque frame et décide tout seul si c'est mieux en lossy ou lossless.
Avec ffmpeg
Après si vous avez déjà ffmpeg installé (et si vous êtes sur ce blog, y'a de bonnes chances), ça marche aussi :
# Conversion basique GIF vers WebP animé
ffmpeg -i input.gif -c:v libwebp_anim -loop 0 -lossless 0 -q:v 70 output.webp
# Qualité max (lossless)
ffmpeg -i input.gif -c:v libwebp_anim -loop 0 -lossless 1 output.webp
Le -c:v libwebp_anim force l'encodeur WebP animé (sans ça, ffmpeg choisit parfois le mauvais codec et vous obtenez un WebP statique avec juste la première frame... pas génial). Le -q:v va de 0 à 100, et je pense que 70 c'est un bon compromis.
Avec ImageMagick
Avec celui là c'est comme ça :
magick input.gif -coalesce -quality 80 -loop 0 output.webp
Le -coalesce est important car les GIF optimisés stockent souvent juste les différences entre frames pour gagner de la place. Cette option reconstruit chaque frame en entier avant la conversion, sinon vous risquez des artefacts visuels bien moches.
Conversion en masse
Après convertir UN fichier c'est bien, mais si vous avez 200 GIFs à migrer, faut automatiser :
# 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
# Avec un rapport de taille avant/après
for f in *.gif; do
gif2webp -mixed -q 70 -m 4 "$f" -o "${f%.gif}.webp"
size_gif=$(stat -f%z "$f" 2>/dev/null || stat -c%s "$f")
size_webp=$(stat -f%z "${f%.gif}.webp" 2>/dev/null || stat -c%s "${f%.gif}.webp")
ratio=$((100 - size_webp * 100 / size_gif))
echo "$f: -${ratio}%"
done
Intégrer sur un site web
Ensuite pour mettre vos images animées sur votre site web, la méthode propre, c'est l'élément <picture> qui permet de proposer un fallback GIF pour les (rares) navigateurs récalcitrants :
<picture>
<source srcset="animation.webp" type="image/webp" />
</picture>
Après je pense que le fallback GIF n'est vraiment plus indispensable pour le web classique mais par contre si vous envoyez des animations par email comme un le bon boomer que vous êtes, gardez le GIF en fallback parce que les clients mail, c'est un autre monde.
Ah et attention, j'ai lu certains articles qui suggèrent d'utiliser @supports en CSS pour détecter le WebP. Genre @supports (background: url(truc.webp)). Sauf que ça ne marche PAS. La règle @supports teste si une déclaration CSS est syntaxiquement valide, pas si le navigateur sait décoder le format d'image. Donc elle passera toujours, même sans support WebP. Donc si vous avez besoin d'une détection côté CSS, utilisez plutôt image-set() avec type(), mais franchement le <picture> fera le job.
Et l'AVIF animé dans tout ça ?
Alors vous avez peut-être entendu parler de l' AVIF , le format qui fait encore mieux que le WebP en compression. Pour les images statiques, c'est vrai, l'AVIF déchire (support Chrome, Firefox, Safari).
Mais pour les animations ? Bah c'est pas encore ça. Chrome n'affiche que la première frame, Safari ne le supporte pas du tout, et Firefox le cache derrière un flag (image.avif.sequence.enabled).
Bref, on en reparlera dans 2-3 ans.
Quel format pour quel usage ?
Hé oui, y'a un choix à faire parce que le WebP animé n'est pas non plus LA solution à tout. Voici ce que je vous propose en fonction de ce que vous voulez proposer comme animation :
- WebP animé : stickers, emojis, petites animations en boucle avec transparence. Le meilleur ratio poids/qualité pour ce cas.
- Vidéo MP4/WebM : si votre animation dépasse 5 secondes ou n'a pas besoin de transparence, une vidéo sera TOUJOURS plus légère. Un MP4 pèse ~50% de moins qu'un WebP animé pour le même contenu. Utilisez ``.
- Lottie : pour les animations vectorielles (icônes, UI), c'est imbattable en poids (quelques Ko) et c'est scalable. Faut juste le player JS (~60 Ko mis en cache). J'suis sûr que vous ne connaissiez pas !!
- APNG : si vous avez besoin de lossless absolu (logos, texte animé), c'est supporté partout mais c'est lourdingue.
Voilà, si vous avez encore des GIFs animés avec transparence qui traînent sur votre site, vous savez maintenant ce qu'il vous reste à faire.
Amusez-vous bien !
