Améliorer les performances GIF animées avec la vidéo HTML5

Les GIF animés sont populaires sur le Web pour de bonnes raisons. Ils offrent plus d’engagement qu’une image ordinaire, tout en restant plus digestibles par rapport à une vidéo classique. Cependant, les GIF sont un format terrible pour le stockage de vidéos et sont souvent de très grande taille, ce qui ralentit le temps de chargement des pages et entraîne une utilisation excessive des données. Avec la vidéo HTML5, vous pouvez réduire la taille du contenu GIF jusqu'à 98% tout en conservant les qualités uniques du format GIF dans le navigateur.

Les GIF animés ont de nombreux objectifs; ils sont faciles à créer et fonctionnent assez bien dans littéralement tous les navigateurs. Mais le format GIF n’était pas conçu à l’origine pour l’animation. La conception originale du format GIF consistait à fournir un moyen de compresser plusieurs images dans un seul fichier à l'aide d'un algorithme de compression sans perte (appelé compression LZW), ce qui signifie qu'elles pouvaient être téléchargées dans un laps de temps raisonnable, même sur des connexions lentes. 19659005] Plus tard, des fonctionnalités d'animation de base ont été ajoutées pour permettre de peindre les différentes images (images) du fichier avec des retards. Par défaut, la série d'images constituant l'animation ne s'affichait qu'une fois, après l'arrêt de la dernière image. Netscape Navigator 2.0 a été le premier navigateur à ajouter la possibilité de boucle en boucle aux fichiers GIF animés, ce qui a entraîné la montée en puissance des fichiers GIF animés tels que nous les connaissons aujourd'hui.

En tant que plate-forme d'animation, le format GIF est incroyablement limité. Chaque image de l'animation est limitée à une palette de 256 couleurs seulement. Au fil des années, les progrès de la technologie de compression ont permis d'améliorer la méthode de compression et d'utilisation des animations et des fichiers vidéo. Contrairement aux formats vidéo appropriés, le format GIF ne tire parti d'aucune des nouvelles technologies, ce qui signifie que même quelques secondes de contenu peuvent générer des fichiers de très grande taille, car de nombreuses informations répétitives sont stockées.

Même si vous essayez de Ajustez la qualité et la longueur d'un fichier GIF avec un outil tel que Gifsicle . Il peut être difficile de le réduire à une taille de fichier raisonnable. C’est la raison pour laquelle les sites Web lourds comme Giphy, Imgur et autres sites similaires GIF n’utilisent pas le format GIF, mais le convertissent plutôt en vidéo HTML5 et les transmettent aux utilisateurs. Comme l’a constaté l’équipe d’Ingénierie Pinterest la conversion de fichiers GIF animés en vidéo peut réduire les temps de chargement et améliorer la fluidité de la lecture, pour une expérience de travail encore plus agréable.

Nous allons donc examiner certaines techniques permettant Nous utilisons la vidéo HTML5 comme solution de remplacement aux GIF animés. Nous allons apprendre à convertir des fichiers GIF animés en fichiers vidéo et à intégrer correctement ces fichiers vidéo sur le Web afin qu’ils agissent exactement comme un fichier GIF. Enfin, nous examinerons quelques inconvénients potentiels que vous devez considérer avant d’utiliser cette solution.

Conversion de fichiers GIF animés en vidéo

La première étape consiste à convertir les fichiers GIF en un format vidéo. MP4 est le format le plus largement pris en charge par les navigateurs. Près de 94% de tous les navigateurs bénéficient du support, il s'agit donc d'un paramètre sécurisé.

Une autre option est le format WebM, qui offre des vidéos de haute qualité, souvent comparables à un MP4, mais généralement à une taille de fichier réduite. Toutefois, à l'heure actuelle, la prise en charge des navigateurs n'est pas aussi répandue, vous ne pouvez donc pas simplement remplacer les fichiers MP4 par leurs équivalents WebM.

Toutefois, comme la balise prend en charge plusieurs fichiers nous pouvons diffuser des vidéos WebM aux navigateurs qui les prennent en charge tout en utilisant le format MP4 partout ailleurs.

Passons maintenant à la conversion d'un fichier GIF animé en fichier GMP animé. et WebM. Plusieurs outils en ligne peuvent vous aider, mais beaucoup d’entre eux utilisent ffmpeg sous le capot, nous allons donc éviter l’intermédiaire et l’utiliser à la place. ffmpeg est un outil de ligne de commande gratuit et à source ouverte conçu pour le traitement des fichiers vidéo et audio. Il peut également être utilisé pour convertir un GIF animé en formats vidéo.

Pour savoir si vous avez ffmpeg sur votre ordinateur, ouvrez un terminal et exécutez la commande ffmpeg . Cela devrait afficher des informations de diagnostic, sinon vous devrez l’installer. Les instructions d'installation pour Windows, macOS et Linux sont disponibles à la page cette page . Puisque nous allons convertir en WebM vous devez vous assurer que la construction de ffmpeg que vous installez est compilée avec libvpx .

Pour suivre les commandes incluses dans cet article, vous pouvez utiliser n'importe quel fichier GIF animé qui traîne sur votre ordinateur ou récupérez celui-ci qui fait un peu plus de 28 Mo. Commençons par convertir un fichier GIF en MP4 dans la section suivante.

Convertir un fichier GIF en MP4

Ouvrez une instance de terminal et accédez au répertoire contenant le gif de test, puis exécutez la commande ci-dessous pour le convertir en MP4. fichier vidéo:

 ffmpeg -i animated.gif video.mp4 

Ceci devrait générer un nouveau fichier vidéo dans le répertoire actuel au bout de quelques secondes, en fonction de la taille du fichier GIF que vous convertissez. L'indicateur -i spécifie le chemin d'accès au fichier GIF d'entrée. Le fichier de sortie est ensuite spécifié (vidéo.mp4 dans ce cas). L'exécution de cette commande sur un fichier GIF de 28 Mo génère un fichier MP4 d'une taille de 536 Ko seulement soit une réduction de 98% de la taille du fichier avec à peu près la même qualité visuelle.

Mais nous pouvons aller encore plus loin. ffmpeg a tellement d'options que vous pouvez utiliser pour réguler encore plus la sortie vidéo. Une solution consiste à utiliser une méthode de codage connue sous le nom de facteur de fréquence constante (CRF) pour réduire encore la taille de la sortie MP4. Voici la commande à exécuter:

 ffmpeg -i animated.gif -b: v 0 -crf 25 video.mp4 

Comme vous pouvez le constater, il y a quelques nouveaux indicateurs dans la commande ci-dessus par rapport à la précédente. un. -b: v est normalement utilisé pour limiter le débit en sortie, mais lorsque vous utilisez le mode CRF, il doit être défini sur 0. L'indicateur -crf contrôle la qualité de la sortie vidéo. Il accepte une valeur comprise entre 0 et 51; plus la valeur est basse, plus la qualité vidéo et la taille du fichier sont élevées.

Si vous exécutez la commande ci-dessus sur le fichier GIF de test, la sortie vidéo est réduite à 386 Ko sans différence de qualité perceptible. Si vous souhaitez réduire davantage la taille, vous pouvez augmenter la valeur CRF. N'oubliez pas que des valeurs élevées réduiront la qualité du fichier vidéo.

Conversion de GIF en WebM

Vous pouvez convertir votre fichier GIF en WebM en exécutant la commande ci-dessous dans le terminal:

 ffmpeg -i animated .gif -c vp9 -b: v 0 -crf 41 video.webm 

Cette commande est presque identique à la précédente, à l'exception d'un nouveau drapeau -c utilisé pour spécifier le codec à utiliser pour cette conversion. Nous utilisons le codec vp9 qui succède au codec vp8 .

De plus, j'ai ajusté la valeur CRF à 41 dans ce cas car les valeurs CRF ne donnent pas nécessairement la même qualité sur tous les formats vidéo. Cette valeur particulière donne un fichier WebM plus petit de 16 Ko par rapport au MP4, avec à peu près la même qualité visuelle.

Maintenant que nous savons convertir les fichiers GIF animés en fichiers vidéo, voyons comment imiter leur comportement dans le navigateur. avec la balise HTML5 .

Remplacer les GIF animés par une vidéo dans le navigateur

Il n’est pas aussi simple de faire agir une vidéo comme une image GIF sur une page Web que de déposer le fichier dans une balise . si difficile non plus. Les principales qualités des fichiers GIF animés à garder à l'esprit sont les suivantes:

• Elles sont lues automatiquement
• Elles tournent en boucle
• Elles sont silencieuses

Bien que vous obteniez ces qualités par défaut avec les fichiers GIF, nous pouvons provoquer une fichier vidéo pour agir exactement de la même manière en utilisant une poignée d’attributs. Voici comment incorporer un fichier vidéo pour qu’il se comporte comme un fichier GIF:

Ce balisage indique au navigateur de démarrer automatiquement la vidéo, de la lire en boucle en continu, de ne lire aucun son et de jouer en ligne sans afficher de commandes vidéo. Cela donne la même expérience qu'un GIF animé, mais avec de meilleures performances.

Pour spécifier plus d'une source pour une vidéo, vous pouvez utiliser l'élément dans la balise comme ceci:

Ceci indique au navigateur de choisir parmi les fichiers vidéo fournis en fonction du format pris en charge. Dans ce cas, la vidéo WebM sera téléchargée et lue si elle est prise en charge, sinon le fichier MP4 est utilisé à la place.

Pour le rendre plus robuste pour les navigateurs plus anciens qui ne prennent pas en charge la vidéo HTML5, vous pouvez ajouter du contenu HTML renvoyant à le fichier GIF d'origine comme solution de secours.

Ou vous pouvez simplement ajouter le fichier GIF directement dans un tag :

Maintenant que nous avons examiné comment émuler des fichiers GIF animés dans le navigateur avec une vidéo HTML5, examinons quelques inconvénients potentiels dans la section suivante.

Inconvénients potentiels

Il existe quelques problèmes. d’inconvénients à prendre en compte avant d’adopter la vidéo HTML5 en remplacement du format GIF. Ce n’est clairement pas aussi pratique que de télécharger un fichier GIF sur une page et de regarder, c’est juste travailler partout. Vous devez d'abord l'encoder, et il peut être difficile d'implémenter une solution automatisée qui fonctionne bien dans tous les scénarios.

Le plus sûr serait de convertir manuellement chaque format GIF et de vérifier le résultat du résultat en sortie de manière à assurer un bon équilibre entre. qualité visuelle et taille du fichier. Mais sur de grands projets, cela peut ne pas être pratique. Dans ce cas, il peut être préférable de faire appel à un service comme Cloudinary pour faire le gros du travail pour vous

Un autre problème est que, contrairement aux images, les navigateurs ne préchargent pas le contenu vidéo. Étant donné que les fichiers vidéo peuvent être de n'importe quelle longueur, ils sont souvent ignorés jusqu'à ce que le thread principal soit prêt à analyser leur contenu. Cela pourrait retarder le chargement d'un fichier vidéo de plusieurs centaines de millisecondes.

De plus, il existe de nombreuses restrictions sur la lecture automatique de vidéos, en particulier sur mobile. L'attribut muet est en fait requis pour la lecture automatique de vidéos dans Chrome pour Android et iOS Safari même si la vidéo ne contient pas de piste audio et où la lecture automatique est non autorisé, l'utilisateur ne verra qu'un espace vide où la vidéo aurait dû se trouver. Un exemple est le mode économiseur de données dans Chrome pour Android où la lecture automatique de vidéos ne fonctionnera pas même si vous configurez tout correctement.

Pour prendre en compte l'un de ces scénarios, vous devez envisager de définir une image de marque de réservation pour la vidéo à l'aide de l'option . affiche attribut afin que la zone vidéo contienne toujours un contenu significatif si la vidéo ne se lance pas automatiquement pour une raison quelconque. Pensez également à utiliser l'attribut Controls qui permet à l'utilisateur de lancer la lecture même si la lecture automatique de la vidéo n'est pas autorisée.

Wrap Up

En remplaçant les fichiers GIF animés par une vidéo au format HTML5, vous pouvez obtenir des expériences incroyables du type GIF. sans les inconvénients de performance et de qualité associés aux fichiers GIF. Supprimer les fichiers GIF animés mérite une attention particulière, surtout si votre site contient beaucoup de fichiers GIF.

Certains sites Web le font déjà:

Prendre le temps de convertir les fichiers GIF de votre site en vidéos peut entraîner une amélioration considérable en temps de chargement de page. Pourvu que votre site Web ne soit pas trop complexe, sa mise en oeuvre est relativement simple et vous pouvez être opérationnel en très peu de temps.

(ra, dm)