JPG en AVIF — photos hero à taille minimale

Quelle qualité perdez-vous à qualité 85 ?

À qualité 85, la différence n’est pratiquement pas reconnaissable, même sur affichages grand format, pour des yeux entraînés. AVIF utilise le codec vidéo AV1, qui évalue par bloc d’image plus de chemins de prédiction que les codecs anciens comme JPEG. Conséquence pratique : AVIF produit moins d’artefacts visibles à bitrate égal.

Où AVIF gagne particulièrement face à JPG :

• Dégradés colorimétriques lisses : ciel, tons chair, fonds bokeh — JPG montre souvent ici du banding (sauts de bloc 8x8), AVIF produit des transitions douces.
• Arêtes à fort contraste : texte dans photos, ombres nettes, détails architecturaux — AVIF conserve la netteté sans artefacts de ringing.
• Bitrates basses sous qualité 60 : là où JPG se décompose visiblement, AVIF tient encore une qualité acceptable.

Pour les exigences les plus hautes (portfolios photo, préparation print), vous montez à 90 ou 95 — les octets supplémentaires sont négligeables dans cette classe de résolution.

Comment livrer AVIF avec fallback navigateur ?

AVIF atteint 95 pour cent de portée navigateur mondiale — les 5 pour cent restants (anciens appareils Android, Safari iOS sous 16.4) ont besoin d’un fallback. L’élément <picture> résout cela élégamment :

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Description hero"
       width="1920" height="1080" />
</picture>

Ce qui se passe : le navigateur choisit la première source dont il supporte le type. Les modernes reçoivent AVIF (~600 Ko), les médians WebP (~900 Ko), les legacy JPG (~1,4 Mo). L’indice width/height sur <img> réserve la place avant le chargement — empêche les sauts de layout au Largest Contentful Paint.

Pour les images responsive, combinez avec srcset :

<picture>
  <source type="image/avif"
          srcset="hero-800.avif 800w, hero-1600.avif 1600w" />
  <source type="image/webp"
          srcset="hero-800.webp 800w, hero-1600.webp 1600w" />
  <img src="hero-1200.jpg" alt="Hero"
       sizes="(max-width: 800px) 100vw, 1200px" />
</picture>

Chaque appareil reçoit ainsi la combinaison taille/format optimale — l’essentiel est que votre pipeline de build génère les variantes de manière cohérente.

Quels cas d’usage sont idéaux ?

AVIF depuis JPG vaut la peine partout où les 20 à 30 derniers pour cent d’économie de bande passante face à WebP comptent :

• Portfolios photo : images hero en plein écran, souvent 1920 px de large ou plus. JPG d’origine 1,5 Mo, WebP 1,0 Mo, AVIF 700 Ko — à qualité visiblement identique.
• Hero shots e-commerce : la grande photo header sur pages produit est critique pour la conversion. Temps de chargement plus rapide = taux de conversion plus élevé.
• Headers de blog dans marchés mobile-first : là où la 4G est la norme et la 5G l’exception, 200 ms de différence LCP font sensiblement quelque chose.
• Setup Picture-Element : quand le CMS ou l’étape de build livre plusieurs sources, AVIF est la source de premier choix naturelle.

Moins sensé pour : conversion en masse de bilder existants sans livraison Picture-Element (alors plutôt JPG en WebP, parce que portée navigateur plus large) ; ou pour petites vignettes sous 50 Ko — le gain absolu y est minimal.

À quelle vitesse AVIF s’encode-t-il dans le navigateur ?

L’encodage AVIF est plus lent que l’encodage WebP. C’est intrinsèque — le codec AV1 évalue plus de partitions de blocs, plus de modes de prédiction et plus d’étapes de quantification par bloc. Ce que vous remarquerez dans cet outil :

• Laptop moderne, photo hero 4 Mo : 2 à 5 secondes.
• Smartphone mid-range, même fichier : 5 à 15 secondes.
• Appareil Android plus ancien : 15 à 30 secondes — la barre de progression reste active.

Important à savoir : le speed d’encodage est un souci pipeline serveur, pas le vôtre. Pour des outils local-dans-le-navigateur comme celui-ci, c’est votre attente, pas celle de vos visiteurs. Ces derniers reçoivent au final un fichier AVIF tout fait, qui se décode aussi vite qu’une JPG.

Confidentialité — 100 % dans le navigateur

La conversion tourne entièrement dans votre navigateur. Vos fichiers JPG ne sont à aucun moment envoyés à un serveur, stockés ou analysés. Il n’y a pas de suivi, pas de bannière cookie et pas d’inscription. Après le premier chargement, l’outil fonctionne aussi hors ligne — les API navigateur nécessaires sont disponibles depuis 2018 dans tous les navigateurs actuels.

Quels outils image sont liés ?

Si votre workflow connaît d’autres formats source ou cible :

• Convertisseur de format d’image — hub avec comparaison de format et toutes les quatre paires.
• PNG en AVIF — quand vos sources sont des logos ou captures avec transparence.
• JPG en WebP — quand une compatibilité navigateur plus large est plus importante que les 25 derniers pour cent d’économie de bande passante.
• Enlever métadonnées — strip EXIF, GPS et infos caméra de manière sélective avant ou après la conversion.