Convertir GIF en WebM

La raison de choisir WebM plutôt que MP4 n’est pas qu’il est meilleur dans l’absolu ; c’est qu’un élément vidéo peut lister plus d’une source et que le navigateur prend la première qu’il comprend. Mettez le WebM en premier et le MP4 après, et chaque visiteur reçoit le fichier le plus petit là où son navigateur le supporte et un fichier qui fonctionne là où il ne le supporte pas.

Cela ne marche que si vous possédez le balisage. Un GIF envoyé à un client, posté sur un forum, ou glissé dans une présentation n’a aucun mécanisme de repli, et là WebM est un moins bon choix que MP4 pour une raison qui n’a rien à voir avec le codec. Cette page suppose que vous éditez le HTML vous-même.

Les deux codecs fonctionnent de la même manière en survol : stocker une image complète, puis stocker les différences. VP9 est arrivé environ une décennie plus tard et dépense considérablement plus d’effort par image pour décider comment partitionner l’image et où chercher des correspondances, ce qui achète de vrais octets sur du contenu qui se répète.

Le matériau d’un GIF est inhabituellement bon pour cela. Couleur plate, bords francs, grandes régions inchangées et mouvement synthétique sont tous des cas où une recherche plus large trouve davantage, donc l’écart entre VP9 et H.264 sur un GIF converti est plus large que l’écart sur de la vidéo de caméra. Le coût est le temps d’encodage, que vous payez une fois, dans cet onglet, plutôt qu’à chaque chargement de page.

La notice du conteneur dans le registre le qualifie de diffusable, et c’est le deuxième gain sur une page. Un navigateur peut commencer à lire un WebM depuis ses premiers octets, donc l’animation démarre pendant que le reste est encore en train de descendre.

Un GIF ne peut pas faire cela de manière utile. Les navigateurs afficheront les premières frames au fur et à mesure, mais la boucle ne tourne pas correctement tant que le fichier entier n’est pas arrivé, ce qui sur une connexion lente veut dire une première frame statique qui reste là plusieurs secondes. Remplacer un GIF par un WebM change la forme de cette attente autant que sa longueur.

WebM est l’un des très rares formats vidéo capables de stocker de la transparence, et sa fiche dans le registre le dit. Cette capacité est réelle, et il vaut la peine de la connaître parce qu’elle fait de WebM le format vers lequel on se tourne quand on veut une vidéo qui flotte sur un fond de page.

Le fichier qu’écrit cette conversion ne l’exploite pas. La piste vidéo est opaque, donc un GIF dont le fond était déclaré transparent perd cela au passage, et il n’y a pas de réglage de couleur de fond sur cette paire pour contrôler ce qui le remplace. Si la transparence est l’objet de l’animation, WebP animé est la recommandation honnête : il garde le canal alpha et il lit partout.

Chaque frame d’un GIF est dessinée à partir d’une palette d’au plus 256 couleurs. Tout dégradé doux ou ombre douce que l’animation avait à l’origine a été réduit à cela quand le GIF a été écrit, souvent avec un tramage appliqué pour masquer les paliers.

VP9 stocke ce qu’il reçoit et n’impose aucune palette propre, donc l’animation ne devient pas moins bonne. Elle ne peut pas non plus devenir meilleure, et le tramage est activement coûteux : c’est du bruit, et le bruit est la chose qui défait la recherche de redondance d’un codec vidéo. Un GIF fortement tramé produit un WebM plus grand qu’un GIF plat de même taille, et monter la bande de qualité dépense des octets à préserver le motif de tramage plutôt que l’image.

Les délais d’un GIF sont par frame et stockés en centièmes de seconde, si bien qu’un GIF tourne fréquemment à des cadences qu’aucune caméra n’a jamais produites — 12,5 images par seconde, ou plusieurs cadences différentes à l’intérieur d’un même fichier. La conversion transporte la durée propre de chaque frame dans la vidéo plutôt que de rééchantillonner à un taux constant.

Un délai stocké de zéro est courant et signifie « aussi vite que l’affichage le permet » ; les navigateurs l’ont longtemps traité comme 100 millisecondes, et cette conversion fait de même. Le résultat pratique est qu’une animation minutée à l’œil dans un éditeur GIF joue à la même vitesse en WebM, ce qui n’est pas ce qu’une cadence fixe aurait préservé.

Les deux codecs vidéo utilisés sur ce site veulent des dimensions en pixels paires, et un GIF n’a aucune obligation de ce genre. Les largeurs et hauteurs sont arrondies au nombre pair supérieur avant que la première frame ne soit dessinée, si bien qu’un GIF de 405 pixels de large produit un WebM de 406 pixels de large.

Arrondir vers le haut ajoute une colonne plutôt que d’en enlever une, ce qui conserve le bord de l’animation. Si la vidéo est mise en page avec une largeur CSS fixe, le pixel supplémentaire ne se voit pas ; si vous la comparez à une image de fond au pixel près, il vaut la peine de savoir que le nombre a bougé.

Remplacer un élément image par un élément vidéo n’est pas une substitution équivalente, et c’est l’étape qui a le plus de chances de mal tourner. La vidéo a besoin d’une largeur et d’une hauteur explicites ou d’une règle de rapport d’aspect, sinon la page se refusionne au chargement — ce qui convertit un problème de bande passante en problème de décalage de mise en page et ne rend pas le rapport de performance plus heureux.

Une frame d’affiche est l’autre chose qui mérite d’être ajoutée. Sans elle, il y a un rectangle vide jusqu’à ce que les premières frames se décodent, là où le GIF au moins montrait quelque chose. Exporter la première frame en un petit WebP ou PNG couvre ce besoin.

Les frames sont lues par le décodeur d’image du navigateur et encodées par son encodeur vidéo, dans l’onglet que vous regardez. Il n’y a pas de serveur dans le parcours, pas de file d’attente, pas de compte et pas de quota journalier, et un lot accepte 100 fichiers à la fois. Vous pouvez confirmer en ouvrant l’onglet réseau des outils de développement et en regardant les requêtes pendant la conversion, ou en débranchant la machine et en convertissant quand même.

Ce décodeur n’est pas présent partout. Là où il manque, la page le dit et nomme les navigateurs qui l’ont, plutôt que d’envoyer silencieusement le fichier ailleurs pour être fini — ce qui serait la seule chose qui rendrait l’affirmation ci-dessus fausse. Une ancienne copie de Safari ou un WebView embarqué peut refuser l’opération sansFallback caché, et la conversion échouera avec un message clair plutôt que de produire un résultat dégradé en secret.