Dois-je convertir toutes les images de mon site en AVIF ?

Tout convertir puis supprimer les JPG est une approche risquée. La bonne stratégie consiste à produire les versions AVIF, à conserver les JPG en repli et à laisser le navigateur télécharger ce qu'il sait prendre en charge. Ainsi, les visiteurs dont le navigateur gère l'AVIF profitent du gain de vitesse, tandis que les autres voient un JPG sans rien remarquer. De plus, si vous devez passer plus tard à un autre format, votre source propre reste entre vos mains.

Passer à l'AVIF influence-t-il réellement la vitesse de mes pages ?

Sur les pages riches en images, l'effet est concret, car les images constituent généralement la plus grande part du poids d'une page et télécharger moins de données signifie directement un temps de chargement plus court. L'effet est particulièrement net sur les connexions mobiles lentes et sur les pages comportant de grandes images d'en-tête ou de longues galeries. En revanche, si votre page est déjà légère ou si votre goulet d'étranglement n'est pas les images mais le temps de réponse du serveur ou la charge des scripts, le gain reste limité. Mesurer avant et après la modification est la seule méthode fiable.

Le JPG est-il désormais considéré comme un format dépassé ?

Il n'est pas dépassé, seulement peu efficace. Le JPG reste le format d'image le plus largement pris en charge au monde, et cela suffit à le rendre précieux ; aucun format moderne n'approche cette universalité. Il offre aussi un rapport qualité/taille raisonnable sur du contenu photographique. L'AVIF le dépasse nettement en efficacité, mais ne peut même pas s'en approcher en compatibilité. La bonne question n'est donc pas de savoir lequel est le meilleur, mais comment vous allez utiliser les deux ensemble.

Quelle charge la production d'AVIF ajoute-t-elle à mon flux de travail ?

Il y a deux types de charge. D'abord, il faut produire et stocker une seconde version de chaque image, ce qui signifie du stockage et de la gestion de fichiers. Ensuite, l'encodage AVIF est lourd en calcul et convertir une grande archive prend nettement plus de temps qu'en JPG. Il faut par ailleurs mettre à jour le HTML de vos pages pour assurer une diffusion avec repli. Sur un petit site, c'est un travail ponctuel ; sur un grand site où des images sont ajoutées en continu, ce n'est pas tenable sans mettre en place une automatisation.

JPG ou AVIF pour les images de votre site web ?

Une question mal posée

La question « JPG ou AVIF » suppose que les deux formats se substituent l'un à l'autre. Dans le contexte du web, cette hypothèse est fausse.

L'AVIF dépasse nettement le JPG en efficacité. Le JPG, lui, occupe en matière de compatibilité une position que l'AVIF ne peut pas atteindre. La pratique professionnelle du développement web ne choisit pas entre les deux — elle propose les deux et laisse le navigateur choisir.

Il reste néanmoins nécessaire de voir clairement ce que chaque format apporte pour prendre cette décision en connaissance de cause. Dans cet article, nous menons la comparaison honnêtement.

L'efficacité : l'AVIF largement devant

À qualité visuelle égale, l'AVIF produit généralement des fichiers nettement plus légers que le JPG. Le rapport approximatif de moitié souvent avancé est une approximation, et le gain réel varie considérablement d'une image à l'autre.

L'ampleur du gain dépend du contenu. Sur les images comportant des aplats de couleur, des dégradés doux et de larges zones monochromes, l'écart est très marqué. Sur les photos comportant un bruit important et des textures fines et aléatoires, la distance se resserre.

Dans le contexte du web, cet écart n'est pas négligeable. Sur la plupart des pages, les images constituent le poste le plus lourd des données téléchargées. Moins de données signifie directement une page plus rapide, en particulier sur les connexions mobiles lentes.

L'AVIF transporte en outre des choses que le JPG ne peut pas transporter : le canal alpha, une profondeur de couleur de 10 à 12 bits, un gamut de couleurs étendu et le HDR. Vous ne pouvez pas diffuser en JPG un élément nécessitant de la transparence — vous êtes contraint de passer au PNG et vous en payez le prix fort en taille. L'AVIF règle cela dans un seul fichier.

La compatibilité : le JPG est sans rival

Les navigateurs grand public à jour prennent en charge l'AVIF. C'est un seuil important pour votre site et la raison de fond pour prendre l'AVIF au sérieux.

Mais le tableau ne s'arrête pas là :

Les appareils et systèmes d'exploitation anciens. Les téléphones et ordinateurs qui n'ont pas reçu de mise à jour depuis longtemps ne peuvent pas afficher le fichier.
Les anciennes versions de navigateurs. Dans les environnements d'entreprise et sur les marchés à faible revenu, l'usage de navigateurs non à jour est une réalité bien concrète.
Le fichier téléchargé par l'utilisateur. Lorsqu'un visiteur fait un clic droit sur l'image et l'enregistre, il se retrouve avec un AVIF qu'il ne pourra peut-être pas ouvrir dans son programme de bureau.
Les systèmes hors de votre contrôle. Une personne qui téléverse votre image sur une autre plateforme, la joint à un e-mail ou l'insère dans un document peut rencontrer un problème.

Aucun de ces problèmes ne se pose avec le JPG. Il fonctionne partout depuis plus de trente ans et cela ne changera pas dans un avenir proche.

La qualité : la conversion n'apporte rien

Dissipons une confusion fréquente. Convertir vos JPG existants en AVIF n'améliore pas l'image.

Les détails que le JPG a jetés pendant la compression ne sont plus dans le fichier ; l'AVIF se contente d'emballer plus efficacement ce qu'il en reste. Si l'image comporte des artefacts de blocs, des bandes ou du flou, ils seront aussi présents en AVIF.

Plus important encore, si vous choisissez un réglage de qualité trop bas, deux couches de compression avec perte se superposent et le résultat devient visiblement moins bon que la source. En réalisant la conversion, utilisez une valeur de qualité raisonnable ; l'AVIF étant déjà efficace, vous obtiendrez même dans ce cas un gain de taille sérieux.

Si vous disposez d'une source plus propre que le JPG — la photo d'origine, sa version PNG, le fichier brut — produire l'AVIF à partir de celle-ci donne toujours un meilleur résultat.

La charge de travail : soyons réalistes

Le coût négligé du passage à l'AVIF est d'ordre opérationnel.

Vous devez produire et stocker une seconde version de chaque image. Vous devez mettre à jour vos gabarits de page pour assurer une diffusion avec repli. Vous devez répéter ce processus pour chaque nouvelle image ajoutée.

Sur un site petit et statique, c'est un travail ponctuel. Sur un site où du contenu est ajouté en continu, ce n'est pas tenable sans mettre en place une automatisation. Si votre système de gestion de contenu sait produire automatiquement les variantes d'image, le travail est simple ; s'il ne le sait pas, il vous faut concevoir un processus.

Tenez également compte du fait que l'encodage AVIF est lourd en calcul. Convertir une grande archive prend nettement plus de temps qu'un enregistrement en JPG.

La réponse professionnelle : les deux à la fois

La véritable solution à ce débat est de ne pas choisir.

La balise picture du HTML vous permet de déclarer plusieurs sources pour une même image. Le navigateur lit la liste de haut en bas et télécharge la première qu'il sait prendre en charge. Un navigateur qui gère l'AVIF reçoit l'AVIF et profite de la vitesse ; un navigateur qui ne le gère pas retombe silencieusement sur le JPG et le visiteur ne remarque rien.

La beauté de cette approche, c'est qu'elle supprime totalement le risque. Aucun visiteur ne voit d'image cassée, et ceux qui prennent en charge le format sont récompensés.

Conséquence pratique : produisez de l'AVIF, ne supprimez pas les JPG. Les originaux sont désormais votre couche de repli.

Où utiliser quoi ?

Des recommandations concrètes :

Images d'en-tête, grandes bannières, galeries : ce sont elles qui gagnent le plus à l'AVIF, car leurs dimensions sont importantes. Diffusez-les avec repli.
Petites icônes et graphiques simples : comme ils sont déjà légers, le gain est modeste ; la charge de travail supplémentaire peut ne pas en valoir la peine. Si le vectoriel (SVG) convient, c'est le plus souvent une meilleure réponse.
Images que l'utilisateur est censé télécharger : catalogue produit, dossier de presse, photo téléchargeable. Proposez ici du JPG ; que l'utilisateur puisse ouvrir le fichier importe davantage que la vitesse.
Éléments nécessitant de la transparence : l'AVIF offre ici un avantage de taille sérieux par rapport au PNG, mais le repli doit être un PNG.

En résumé

L'AVIF gagne sur l'efficacité, le JPG sur la compatibilité. Ces deux réalités ne se contredisent pas ; elles se complètent. Sur un site riche en images, passer à l'AVIF procure un gain de vitesse bien réel, mais il faut positionner le JPG en repli plutôt que de le faire disparaître. N'oubliez pas que la conversion n'apporte aucun gain de qualité et qu'à des réglages bas elle en fait perdre. Et ne sous-estimez pas la charge de travail — une optimisation qu'on ne pourra pas maintenir est plus nuisible qu'une optimisation jamais faite.