Guide d'optimisation de taille GIF : Comparaison des solutions de remplacement par WebP/APNG/Vidéo

Le GIF a été créé en 1987, utilise le codage de compression LZW, et sa palette globale prend en charge jusqu'à 256 couleurs. Il ne prend pas en charge nativement le contenu dynamique en haute couleur. Le brevet de cette technologie de compression a expiré dans les années 1990, mais sa limitation de couleur ne répond plus aux exigences d'affichage des pages web actuelles.

Dans la majorité des scénarios, la taille d'un GIF dynamique en haute qualité exporté par un opérateur ou un concepteur dépassera 10Mo, ce qui ralentit le chargement de la page et réduit le taux de rétention des visiteurs du site web. Par conséquent, le remplacement du GIF est devenu une exigence d'optimisation courante.

Les animations WebP réalisent la compression sur la base de séquences d'images clés codées en VP8. Seules les images clés stockent des trames complètes, et les trames adjacentes ne stockent que les zones de différence, ce qui économise beaucoup d'espace par rapport au stockage en trame complète du GIF. Les animations WebP prennent en charge la couleur vraie 24 bits et n'ont pas la limitation de 256 couleurs du GIF.

Dans des tests comparatifs à même taille et même fréquence d'images, la taille des animations WebP est de 30 % à 70 % plus petite que celle du GIF d'origine. Le taux de compression est plus élevé pour les contenus très dynamiques, et proche de la limite inférieure pour les contenus à dégradé statique à faible fréquence d'images.

APNG a été développé comme extension du format PNG et prend en charge les canaux alpha en pleine couleur. Il a été lancé en 2008 par une équipe externe à Google, et actuellement tous les navigateurs de bureau et mobiles mainstream implémentent une prise en charge native.

APNG a une efficacité de compression inférieure à celle des animations WebP, mais supérieure à celle du GIF non compressé. Sa taille est généralement de 10 % à 30 % plus petite que celle d'un GIF de même contenu, ce qui le rend adapté aux scénarios nécessitant une compatibilité avec certains anciens outils de traitement PNG.

Pour les animations de plus de 3 secondes et de plus de 800px de largeur, l'utilisation d'une vidéo MP4 encodée en H.264 associée à la balise video HTML5 pour obtenir une lecture en boucle automatique est la solution avec la plus haute efficacité de compression.

Selon les données 2024 de HTTP Archive, plus de 60 % des sites ont utilisé MP4 pour remplacer les animations GIF. À qualité d'image identique, la taille n'est que de 10 % à 20 % de celle du GIF d'origine, ce qui permet de réduire fortement la consommation de bande passante du site.

Lors de la configuration, vous devez activer les attributs autoplay, loop et muted, et ajouter une image d'affichage (poster) pour améliorer l'expérience de chargement. Tous les navigateurs mainstream prennent en charge ce mode de configuration.