Convertir WebM en WebP

Une image destinée à une page web est jugée selon des critères différents d’une image qui va dans un document. Personne ne l’ouvrira dans une visionneuse ; elle sera l’une des vingt choses qu’un navigateur télécharge pendant que quelqu’un décide de rester. Sa taille en kilo-octets est un coût réel payé par chaque visiteur, et son format doit être l’un de ceux que le CMS, l’étape de build et le navigateur acceptent tous sans traitement spécial.

C’est tout l’argument pour WebP plutôt que JPG ici. Même résultat visible, environ trente pour cent d’octets en moins, et un support universel dans les navigateurs actuels. Sur une grille de douze vignettes de tutoriels, c’est un tiers du poids d’image retiré pour aucun changement visible et aucune balise de repli — ce qui est le genre d’optimisation qui survit au contact d’un vrai projet.

WebP et WebM viennent du même effort. Google a publié les deux autour de 2010 comme réponses libres de droits à des formats couverts par des brevets, et la compression d’images fixes de WebP a grandi hors du codage intra-image de VP8 — le codec vidéo autour duquel WebM a été construit. Tirer une image fixe d’un WebM et l’écrire en WebP tient plus de la ressemblance familiale que de la traduction.

Cela ne rend pas la conversion sans perte, et cela mérite d’être dit pour que personne ne s’y attende. L’image est décodée en pixels puis ré-encodée à partir de zéro, à une qualité fixe de 82. Ce que la ressemblance familiale achète, c’est que les genres de détails que le codec vidéo a conservés sont ceux que le codeur d’images fixes est bon à conserver, ce qui explique pourquoi les images WebP tirées d’une vidéo tiennent mieux que les chiffres seuls ne le suggèrent.

La chose la plus utile à faire avec cette conversion est aussi la plus évidente une fois qu’on la voit : prendre une image du WebM et l’utiliser comme `poster` de cette vidéo. Un navigateur affiche le poster jusqu’à ce que la lecture commence, donc l’image que les gens voient en premier est une vraie image fixe de la vidéo plutôt qu’un rectangle noir ou une image stock sans rapport.

Prenez-la environ une seconde plus tard plutôt qu’à zéro. La toute première image d’un enregistrement est souvent un fondu, un état vide ou une page qui charge encore, et c’est aussi l’image que la vidéo peindra à l’instant où elle démarre — donc un poster pris un instant plus tard donne au spectateur quelque chose à regarder sans produire de saut visible au début. La seconde zéro vous donne l’image la moins intéressante du fichier et un poster qui la répète.

L’image sort aux dimensions de pixel de la vidéo, sans mise à l’échelle. Un enregistrement d’écran 1080p produit un WebP de 1 920 par 1 080 ; une capture 4K en produit un de 3 840 par 2 160. C’est volontaire — une image a une vraie résolution et le travail de cette conversion est de la remettre intacte plutôt que de deviner une taille d’affichage.

La mise à l’échelle appartient à l’étape suivante. Ce qui génère votre `srcset` réactif, le pipeline d’images de votre CMS, ou votre étape de build sait déjà quelles largeurs la mise en page requiert, et il fera un meilleur travail depuis une source pleine résolution que depuis une source déjà réduite. Prenez ici la version la plus grande honnête et laissez celui qui connaît la mise en page faire les petites.

L’image dans un WebM a été encodée pour le mouvement. Un codec vidéo dépense ses bits là où les choses bougent et économise là où elles ne bougent pas, en supposant qu’aucune image isolée ne sera fixée du regard. Figer une image, c’est faire exactement ce qu’il supposait que personne ne ferait.

L’effet pratique pour une vignette est faible, parce qu’une vignette est affichée à une fraction de sa taille native et que la réduction masque assez bien le flou. Cela compte quand l’image fixe est utilisée en grand — une image héros, une illustration pleine largeur — où une image prise pendant un panoramique ou un défilement semblera visiblement pâteuse à côté du reste de la page. La correction est l’horodatage : trouvez un moment où l’image est immobile, et prenez-la à partir de là.

Les navigateurs ne sont plus le problème ; la longue traîne est ailleurs. Certains clients de messagerie ne rendent pas WebP, donc une vignette de newsletter devrait être un JPG. Un certain nombre d’applications de bureau plus anciennes, de flux d’impression et quelques formulaires de téléversement rejettent encore le format. Windows et macOS le prévisualisent tous les deux correctement maintenant, ce qui n’était pas vrai il y a quelques années et qui est la source de la plupart des conseils périmés à son sujet.

À l’intérieur d’un navigateur, il est prudent de traiter WebP comme universel, ce qui en fait la valeur par défaut pragmatique plutôt qu’AVIF. Si la destination est autre chose qu’une page web — un e-mail, un document, une imprimante, un formulaire — prenez le JPG et cessez d’y penser.

Une bibliothèque de tutoriels a besoin d’une vignette chacun, et cela signifie une conversion par vidéo plutôt qu’une conversion par image. Convertissez, notez l’horodatage qui a marché, passez au fichier suivant. Tout le cycle prend quelques secondes parce que rien n’est téléversé entre les essais et qu’il n’y a pas de file.

Cela vaut la peine de choisir les horodatages délibérément plutôt que d’accepter zéro pour tous. Une grille de vignettes montrant toutes un éditeur vide ou un spinner de chargement ne dit rien au visiteur sur la vidéo qui correspond, et c’est exactement ce que produit la prise de l’image par défaut depuis chaque fichier.

Les enregistrements qui ont besoin d’images d’accueil sont en général ceux qui n’ont pas encore été publiés : une démo de produit, une présentation de fonctionnalité, un module de cours. Téléverser la vidéo entière vers un convertisseur pour qu’il rende une vignette de 60 Ko est beaucoup d’exposition pour très peu de travail.

Le décodage et l’encodage se font tous deux dans l’onglet, avec les codecs que le navigateur a déjà pour lire du WebM. Rien de ce qui porte la vidéo n’est envoyé, il n’y a pas de compte et il n’y a pas de limite quotidienne — ce qui veut aussi dire que convertir trente d’entre elles est la même opération trente fois plutôt qu’une raison de mettre à niveau quoi que ce soit.