Convertir WebM en AVIF

AVIF ne vaut ses awkwardnesses que lorsque la taille d’une image est un nombre que quelqu’un regarde vraiment : un chiffre de largest-contentful-paint qui ne descend pas, une cible de poids de page dans un budget de performance, un score Lighthouse disputé dans une pull request. Si rien de tout cela ne s’applique, la version WebP de la même image est plus petite qu’un JPG, s’encode instantanément et n’a pas besoin de repli — prenez celle-là et passez.

Là où le budget est réel, AVIF est la meilleure option disponible et la différence sur une image hero ou une grande image d’affiche n’est pas marginale. Le coût est payé deux fois : en temps d’encodage maintenant, et en repli dans votre balisage plus tard. Les deux sont gérables. Aucun n’est gratuit, et une page qui prétendrait le contraire vous vendrait une complexité dont vous n’avez pas besoin.

AVIF n’est pas un nouveau codec d’image. C’est une trame intra AV1 — une image clé unique du codec vidéo — enveloppée dans la même famille de conteneurs que HEIC. Et AV1 est l’un des codecs qu’un WebM peut porter : les enregistreurs de navigateur plus récents et la plupart des vidéos web modernes l’utilisent.

Donc quand la source est un WebM AV1, cette conversion décode une image que AV1 a encodée et la repasse à AV1 pour qu’il l’encode à nouveau en image fixe. L’aller-retour est inhabituellement doux, parce que les artefacts introduits par la première passe sont exactement les formes que la seconde passe est efficace à décrire. Ce n’est pas sans perte — l’image est entièrement décodée en pixels entre les deux — mais c’est ce qui se rapproche le plus d’une conversion familiale dans ce lot, et c’est une des raisons pour lesquelles les images AVIF issues de vidéo tiennent bien à petite taille.

Un JPG ou un WebP apparaît essentiellement tout de suite. Un AVIF prend des secondes, et sur une image 4K sur un portable modeste cela peut prendre bien plus que quelques secondes. Ce n’est pas la page qui est lente ; c’est ce que coûte l’encodage AV1.

La raison est la recherche. AV1 obtient son efficacité d’un nombre énorme de manières de décrire chaque bloc de pixels, et l’encodeur en essaie beaucoup avant de choisir. C’est un bon compromis pour un fichier qui sera servi un million de fois et un mauvais pour un fichier que vous allez regarder une fois. Si vous vous retrouvez à convertir trente images et à attendre, c’est le signal pour utiliser WebP pour les vignettes et réserver AVIF à l’image en haut de la page.

L’image sort aux dimensions en pixels de la vidéo elle-même, sans mise à l’échelle, encodée à une qualité fixe de 82. Un enregistrement en 1080p donne un AVIF de 1920 sur 1080 ; une capture 4K en donne un de quatre fois la surface et qui prend notablement plus de temps à produire.

Redimensionnez après plutôt qu’ici. Ce qui génère vos sources responsives connaît les largeurs dont votre mise en page a besoin, et il fera un meilleur travail en partant de l’image complète que d’une image réduite. C’est aussi l’endroit où décider combien de tailles valent le temps d’encodage, ce qui pour AVIF est une vraie question d’une manière qu’il ne l’est pas pour JPG.

Chaque navigateur majeur actuel décode AVIF, mais le support est arrivé des années après WebP et des installations plus anciennes persistent — notamment sur les appareils qui ne reçoivent plus de mises à jour. Servir AVIF seul est une décision de perdre les images de ces visiteurs plutôt que de les ralentir.

Le remède est un élément `<picture>` avec une source AVIF, une source WebP et un JPG en tant que `<img>` final. Trois lignes, pas de JavaScript, et le navigateur choisit la première qu’il comprend. Si vous faites déjà cela pour vos autres images, cette image s’insère dans le même pipeline. Si vous ne le faites pas, l’ajouter est le prérequis pour utiliser AVIF du tout.

Une image extraite d’une vidéo compressée porte ce que le codec vidéo lui a fait. Les bits ont été dépensés sur le mouvement, la couleur est stockée à demi-résolution dans chaque direction, et une image prise pendant un défilement ou un panoramique n’a jamais été nettement encodée pour commencer. AVIF préserve tout cela très efficacement ; il n’en répare rien.

La conséquence pratique est que le timestamp compte davantage que le format. Une image prise à un moment immobile et sauvegardée en JPG bat une image prise en plein mouvement et sauvegardée en AVIF d’une marge large, sur toute mesure y compris la taille — parce qu’une image brouillée est pleine de détails que l’encodeur doit dépenser des bits à décrire. Choisir le moment est l’optimisation ; choisir le codec est l’arrondi.

Tout ce qui n’est pas une page web. Les clients de messagerie ne le rendent pas. Les logiciels de bureau en grande partie pas. Les flux d’impression pas. Les formulaires de téléversement sur les sites des autres rejettent souvent l’extension sans détour, et un collègue à qui on a envoyé un AVIF répondra le plus souvent en demandant ce que c’est.

Tout son cas repose sur le fait d’être décodé par un navigateur et servi sur un réseau que vous payez. Pour une diapositive, un document ou un message, prenez le JPG ; pour une archive ou un travail d’impression, prenez le TIFF. Utiliser AVIF hors du cas pour lequel il a été conçu produit un fichier plus petit que personne ne peut ouvrir, ce qui n’est pas une optimisation.

L’encodage AVIF est suffisamment coûteux pour que les services qui l’offrent le facturent, le mettent en file ou limitent combien vous pouvez en faire. Ici il tourne dans votre navigateur, ce qui explique pourquoi les seuls plafonds sont ceux affichés au-dessus de la zone de dépôt — 100 fichiers par lot, 100 Mo par fichier — et qu’aucune allocation quotidienne n’est dépensée derrière : le coût est celui de votre propre processeur, et vous êtes celui qui a décidé que le compromis en valait la peine.

Cela signifie aussi que la vidéo ne quitte jamais la machine. C’est l’argument habituel sur la vie privée et il a un tranchant pratique sur cette paire — un gros enregistrement téléversé pour produire une image de 40 Ko est une quantité absurde de réseau pour le résultat, et c’est la forme que prend presque tout autre convertisseur pour cette paire.