Compresser la taille des GIF animés par conversion GIF vers MP4 : guide pratique pour l'optimisation de sites web

Le GIF utilise un codage sans perte image par image LZW, qui stocke l'ensemble des informations de pixels pour chaque image sans exploiter la redondance de contenu entre images adjacentes pour la compression. Conçue en 1987, cette méthode de codage présente des goulots d'étranglement naturels en matière d'efficacité de compression du fait de limitations liées aux brevets et à l'algorithme.

Le codage H.264 adopte une technologie de compression inter-images, qui ne stocke que les différences entre images adjacentes. Les fonds statiques n'ont besoin d'être stockés qu'une seule fois, au lieu d'être stockés de manière répétée dans chaque image. Pour une même qualité visuelle, la taille de sortie compressée en H.264 est bien plus petite que celle d'un GIF.

Dans la plupart des cas, après conversion d'un GIF de contenu identique en MP4 H.264, la différence de taille varie de 5 à 10 fois. Pour certaines images animées de longue durée avec une forte proportion de fond statique, la différence de taille peut dépasser 10 fois.

Pour chaque réduction de 100KB de la taille totale de chargement du site web, la vitesse de chargement du premier écran s'améliore d'environ 10 millisecondes. Le remplacement à grande échelle des GIF par des MP4 permet de réduire significativement la taille totale de chargement des pages.

Pour reproduire le comportement de lecture automatique et en boucle du GIF d'origine sur les pages web, vous pouvez utiliser la balise vidéo HTML associée à une combinaison de quatre attributs pour obtenir la simulation. Les quatre attributs requis sont autoplay, loop, muted et playsinline.

L'exemple de code complet est <video autoplay loop muted playsinline src="demo.mp4"></video>. Cette implémentation est compatible avec les principaux navigateurs modernes, dont Chrome 86+ et Safari 11+, et permet d'obtenir une lecture en boucle automatique sans son, sans clic de l'utilisateur.

Twitter transcode automatiquement les GIF téléchargés par les utilisateurs en vidéo H.264. Le format GIF est toujours affiché aux utilisateurs finaux, tandis que le chargement du flux vidéo réel réduit la consommation de bande passante. La plateforme WeChat Official Accounts applique un traitement de transcodage automatique similaire aux GIF téléchargés.

La plupart des plateformes de contenu grand public ont adopté des mécanismes similaires pour traiter les GIF téléchargés par les utilisateurs, réduisant les coûts de bande passante de la plateforme tout en améliorant la vitesse de chargement pour les utilisateurs.

Certains clients de messagerie hérités ne prennent pas en charge la lecture automatique de la balise vidéo HTML. L'utilisation de GIF dans les scénarios de marketing par email garantit que l'animation peut être affichée normalement sur la plupart des clients. De nombreux systèmes internes d'entreprise anciens ne prennent en charge que le téléchargement d'images animées au format GIF et ne peuvent pas traiter les MP4.

Certaines plateformes d'emoji tierces ont des exigences de format claires pour le contenu téléchargé, imposant que les images animées soient téléchargées au format GIF. Le format d'origine doit être conservé pour ces scénarios.