La plupart des gens ne se rendent pas compte que les courtes animations intégrées sous forme de GIF animés dans leurs sites Web préférés s'accompagnent d'énormes pénalités en termes de performances, de batterie, de taille de fichier et de bande passante.
Les GIF animés sont terribles pour les performances Web: ils sont généralement 12 fois plus gros que les vidéos H.264 et prennent 2 fois plus d'énergie à charger et à afficher dans un navigateur. Et en raison d'une palette de 256 couleurs dérisoires, leur gamme de couleurs est limitée et ne semble tout simplement pas très bonne dans l'ensemble.
En effet, GIF, acronyme de Graphics Interchange Format, n'est «pas conçu comme une plate-forme d'animation» même s'il peut être fait de manière limitée, selon le libellé de la spécification GIF89a d'origine..
Heureusement, il semblerait que le navigateur Safari d'Apple puisse aider à mettre fin à la pratique de l'utilisation des GIF comme format par défaut du Web pour les vidéos micro-formulaires, les mèmes et les animations mignonnes.
C'est parce que Safari Technology Preview, une version spéciale de Safari pour les développeurs de tester les technologies Web à venir dans macOS et iOS, dans sa dernière mise à jour permet aux développeurs Web d'incorporer de vrais formats vidéo comme MP4 dans les balises HTML «img».
Colin Bendell a maintenant démontré (via John Gruber de Daring Fireball) le principal avantage de cette nouvelle fonctionnalité intéressante dans Safari Technology Preview pour Mac: l'intégration d'un vrai fichier vidéo .MP4 dans la balise «img» se traduit par un rendu 20 fois plus rapide et 7 fois plus rapide décodage par rapport à son homologue GIF, en plus d'être un quart de la taille du fichier.
Pièce A: l'article source de Colin, qui intègre quelques GIF animés à des fins d'illustration, fait 46 Mo sur Chrome. La même page Web ne fait que 2 Mo dans Safari Technology Preview avec les GIF convertis en MP4 et utilisés avec la balise «img».
"Maintenant, nos vidéos micro-formulaires peuvent être petites et efficaces (comme les MP4) et elles peuvent être facilement préchargées, lues automatiquement et partagées (comme notre vieil ami, le GIF)", résume Colin..
D'autres avantages de cette approche incluent la possibilité d'enregistrer ou de partager facilement de telles animations, de créer des animations peu encombrantes en 4K en utilisant HEIC (le codec H.265) et plus encore.
Le tableau ci-dessous illustre le type d'économie de taille d'octet que Colin a réussi à réaliser simplement en transcodant les 100 meilleurs fichiers GIF animés de giphy.com puis en les convertissant en H.264, H.265, VP8, VP8 et WebP formats vidéo.
Cette approche n'est pas sans son lot de pièges potentiels car, pour le moment, le fait d'encapsuler des animations MP4 dans des balises «img» introduit souvent une foule de problèmes complexes qui nécessitent beaucoup de travail manuel de la part du développeur pour garantir la compatibilité future..
Cela dit, si vous souhaitez tester cette nouvelle fonctionnalité par vous-même, vous devrez télécharger Safari Technology Preview d'Apple. Safari Technology Preview peut coexister avec la version commerciale de Safari déjà installée sur votre ordinateur.
J'espère qu'il ne faudra pas des années pour que cette nouvelle fonctionnalité apparaisse sur les sites Web et les blogs.
Aimez-vous ou détestez-vous les GIF animés comme format préféré du Web pour les courtes animations?
Sonnez dans les commentaires!
