AVIF en Base64

Comment convertir un AVIF en Base64

1. Déposez un fichier .avif sur la zone ou choisissez-le avec le sélecteur de fichiers.
2. Laissez Largeur max., Convertir en et Supprimer les métadonnées (EXIF) vides pour encoder le fichier d’origine.
3. Laissez Sortie en sur Data URI, ou choisissez CSS, <img>, Markdown, JSON ou Base64 brut.
4. Copier la sortie. L’indicateur affiche la taille d’entrée, la taille de sortie et le surcoût.

Si l’aperçu reste vide, votre navigateur ne sait pas décoder l’AVIF. Le fichier est quand même correctement encodé ; il ne peut simplement pas être affiché ici.

Pourquoi il vaut généralement mieux laisser l’AVIF tel quel

AVIF existe pour être petit. Pour les photos, il bat souvent JPEG et WebP à qualité visuelle comparable, ce qui le rend intéressant pour les placeholders intégrés et les miniatures, où chaque octet de Base64 compte.

Le hic, c’est l’encodage. Les options de redimensionnement, de conversion et de suppression des métadonnées redessinent l’image sur un canvas du navigateur, et les navigateurs peuvent exporter un canvas en PNG, JPEG ou WebP, jamais en AVIF. Donc :

• Garder le format avec une Largeur max. produit un PNG. Pour une photo, ce PNG peut peser bien plus que l’AVIF.
• Convertir en WebP est le remplacement le plus proche en taille, sauf dans Safari, qui ne sait pas non plus encoder en WebP et se rabat sur PNG.
• Convertir en JPEG offre une large compatibilité mais perd la transparence.

S’il vous faut un AVIF plus petit, redimensionnez-le avec un outil qui sait écrire de l’AVIF, comme un éditeur d’images ou un encodeur en ligne de commande, puis encodez ce fichier ici sans le modifier.

L’AVIF en Base64

AVIF utilise le même format de fichier ISO base media que HEIC et MP4. Le fichier s’ouvre sur une boîte ftyp : quatre octets de taille de boîte, les lettres ftyp et une marque (brand).

Le cinquième caractère change avec la taille de la boîte : pour détecter l’AVIF dans du code, cherchez donc eXBhdmlm ou eXBhdmlz à partir du neuvième caractère.

Solutions de repli et intégration

Une image AVIF classique sur un site web s’accompagne généralement d’une solution de repli via <picture>, qui liste d’abord une source AVIF puis un JPEG ou un WebP. C’est faisable aussi avec des data URI, mais chaque format est alors intégré dans le HTML et la page les transporte tous. Pour tout ce qui dépasse un petit placeholder, liez plutôt les fichiers et laissez le navigateur télécharger uniquement celui qu’il peut utiliser.

Pour vérifier une chaîne Base64 reçue, décodez-la avec Base64 en image. Pour le WebP, que la plupart des navigateurs savent aussi encoder, voir WebP en Base64.

FAQ