WebP vs AVIF vs JPEG: Which Image Format Should You Use? - PIC0.ai

L'erreur de 47 000 $ qui a changé ma façon de penser aux formats d'images

Je suis Sarah Chen, et je suis ingénieure en performance sur une plateforme de commerce électronique de taille intermédiaire depuis huit ans. L'année dernière, j'ai pris une décision qui a coûté à mon entreprise 47 000 $ en revenus perdus au cours d'un seul trimestre. J'ai converti tout notre catalogue de produits—plus de 180 000 images—de JPEG à WebP sans tester correctement chez notre base d'utilisateurs. Quel a été le résultat ? Une augmentation de 23 % des taux de rebond des utilisateurs sur les anciens appareils iOS qui voyaient des images cassées au lieu de nos produits.

Cette leçon chère m'a appris quelque chose de crucial : choisir un format d'image ne consiste pas à choisir le "meilleur"—il s'agit de comprendre les compromis et de les adapter à votre public et à votre cas d'utilisation spécifiques. Aujourd'hui, je vais partager tout ce que j'ai appris en gérant la livraison d'images pour une plateforme qui sert 2,3 millions d'images par jour à des utilisateurs dans 47 pays.

Le paysage des formats d'images a évolué de manière spectaculaire. Quand j'ai commencé dans ce domaine, le JPEG était le roi incontesté pour les photographies, et le PNG s'occupait de tout le reste. Maintenant, nous avons WebP, AVIF, JPEG XL, et une soupe alphabétique d'autres formats, chacun promettant une meilleure compression et qualité. Mais voici ce que la plupart des articles ne vous diront pas : le "meilleur" format dépend entièrement de vos contraintes spécifiques—les appareils de votre public, votre infrastructure serveur, vos ressources de développement et vos objectifs de performance.

, je vais décomposer les trois formats les plus pratiques pour une utilisation web aujourd'hui : JPEG (le vétéran fiable), WebP (le juste milieu pragmatique), et AVIF (le nouvel arrivant à la pointe de la technologie). Je partagerai des chiffres réels de notre environnement de production, expliquerai quand chaque format a du sens, et vous donnerai un cadre pour prendre cette décision pour vos propres projets. À la fin, vous comprendrez non seulement quel format choisir, mais pourquoi—et comment l'implémenter sans commettre les mêmes erreurs coûteuses que moi.

Comprendre les fondamentaux : comment ces formats fonctionnent réellement

Avant de plonger dans les comparaisons, établissons de quoi nous parlons réellement. Les formats d'images ne sont pas juste des extensions de fichier différentes—ils représentent fondamentalement des approches différentes pour stocker et compresser les informations visuelles. Comprendre ces différences est crucial car elles impactent directement la performance de votre site, l'expérience utilisateur, et même vos coûts serveurs.

Choisir un format d'image ne consiste pas à choisir le "meilleur"—il s'agit de comprendre les compromis et de les adapter à votre public et à votre cas d'utilisation spécifiques.

Le JPEG, développé en 1992, utilise une compression avec perte basée sur la transformation cosinus discrète. En termes simples, il analyse les images en blocs de 8x8 pixels et élimine les informations que l'œil humain est moins susceptible de remarquer. C'est pourquoi le JPEG excelle dans les photographies avec des transitions de couleur graduelles mais lutte avec les bords nets et le texte. Après trois décennies, le JPEG reste le format le plus universellement pris en charge—je n'ai jamais rencontré d'appareil ou de navigateur qui ne puisse pas afficher un JPEG. Cette compatibilité universelle vaut son pesant d'or lorsque vous servez un public mondial.

WebP, introduit par Google en 2010, a été conçu spécifiquement pour le web. Il prend en charge la compression avec perte et sans perte, ainsi que la transparence et l'animation. La compression avec perte utilise le codage prédictif—elle examine les pixels voisins pour prédire ce qu'un pixel devrait être, puis ne stocke que la différence. Dans nos tests, WebP atteint généralement des tailles de fichiers 25-35 % plus petites que le JPEG à qualité visuelle équivalente. Le format a gagné en traction autour de 2020 lorsque Safari a enfin ajouté le support, lui offrant une couverture sur tous les navigateurs principaux.

AVIF (AV1 Image File Format) est le plus récent venu, standardisé en 2019. Il est basé sur le codec vidéo AV1 et utilise des techniques de compression incroyablement sophistiquées, y compris des transformations adaptées au contenu et des modes de prédiction avancés. Dans nos benchmarks, les fichiers AVIF sont généralement 40-50 % plus petits que des JPEG équivalents, et 20-30 % plus petits que WebP. Le hic ? C'est coûteux en ressources pour encoder et décoder, et le support des navigateurs, bien qu'en croissance, n'est pas encore universel.

Voici un exemple concret de notre catalogue produits : une photo de produit de 1200x800 pixels qui fait 245 Ko en tant que JPEG devient 178 Ko en tant que WebP (réduction de 27 %) et 142 Ko en tant que AVIF (réduction de 42 %). Ces économies se multiplient sur des milliers d'images. Pour notre plateforme, passer de JPEG à WebP a permis d'économiser environ 4,2 To de bande passante par mois. Cela s'est traduit par 1 340 $ d'économies sur les coûts CDN—pas une révolution, mais pas négligeable non plus.

Support des navigateurs : la vérification de la réalité dont vous avez besoin

C'est ici que la théorie rencontre la réalité, et où j'ai commis mon erreur de 47 000 $. Le support des navigateurs n'est pas binaire—ce n'est pas juste "supporté" ou "non supporté". C'est un paysage complexe de support partiel, de particularités spécifiques aux versions, et de cas particuliers qui peuvent casser votre site de manière subtile.

D'après mes dernières données de notre analyse (recouvrant 2,1 millions de sessions le mois dernier), voici ce que nous observons : le JPEG a un support à 100 %, évidemment. WebP a un support de 96,8 % dans notre base d'utilisateurs. Ce 3,2 % manquant représente environ 67 000 utilisateurs par mois—principalement sur d'anciens appareils iOS (avant iOS 14) et certains environnements d'entreprise avec des navigateurs obsolètes. AVIF a un support de 73,4 %, ce qui signifie que plus d'un quart de nos utilisateurs ne peuvent pas voir les images AVIF de manière native.

Mais voici la nuance qui m'a coûté cher : même lorsqu'un navigateur "supporte" un format, la qualité de l'implémentation varie. Nous avons découvert que certains appareils Android exécutant Chrome 85-89 échouaient parfois à décoder les images WebP de plus de 4 mégapixels, affichant plutôt une icône d'image cassée. Cela a affecté moins de 0,5 % des utilisateurs, mais dans le commerce électronique, cela fait la différence entre une vente et un rebond.

La solution consiste à utiliser une amélioration progressive avec l'élément picture et des solutions de repli. Voici ce que nous avons mis en œuvre après ma leçon coûteuse :

Nous servons AVIF aux navigateurs qui le supportent (économisant ainsi la bande passante maximale), alternons avec WebP pour les navigateurs qui le supportent, et enfin servons JPEG comme solution de repli universelle. Cette approche a augmenté la complexité de notre mise en œuvre, mais nous a permis d'obtenir le meilleur des deux mondes. Notre code de livraison d'images vérifie désormais le support et sert le format le plus efficace que chaque navigateur peut gérer.

Un aperçu critique : ne vous fiez pas seulement aux statistiques globales des navigateurs—analysez votre base d'utilisateurs réelle. Notre public est légèrement plus âgé et inclut de nombreux utilisateurs d'entreprises, ce qui signifie que nous avons plus d'utilisation de navigateurs hérités qu'un site ciblant peut-être des démographies plus jeunes. Un site de jeux ou un blog technologique pourrait avoir un support AVIF de plus de 85 %, tandis qu'un site de services gouvernementaux pourrait n'en avoir que 60 %. Votre expérience variera absolument.

J'ai également appris à surveiller les taux d'erreur spécifiques aux formats. Nous avons mis en place un suivi pour suivre les échecs de chargement d'images par format, ce qui a révélé le problème WebP sur Android que j'ai mentionné. Sans ce suivi, nous aurions volé à l'aveugle, perdant des conversions sans comprendre pourquoi. Maintenant, nous suivons non seulement si les images se chargent, mais aussi combien de temps cela prend pour les décoder—car un format qui est techniquement supporté mais qui prend 800 ms à décoder sur un téléphone de milieu de gamme n'est pas vraiment "supporté" dans un sens significatif.

Taille de fichier et qualité : les chiffres qui comptent vraiment

Parlons de la métrique qui intéresse tout le monde : combien plus petites sont vraiment ces fichiers ? J'ai réalisé des milliers de conversions dans notre catalogue de produits, et je peux vous donner des chiffres réels—pas des repères théoriques, mais des résultats réels à partir d'images de production.

Le "meilleur" format dépend entièrement de vos contraintes spécifiques : les appareils de votre public, votre infrastructure serveur, vos ressources de développement, et vos objectifs de performance.

Pour le contenu photographique (nos images de produits, photos de style de vie et images principales), voici ce que nous voyons systématiquement : en commençant avec un JPEG de haute qualité au niveau de qualité 85 (notre base), la conversion à WebP à qualité perceptuelle équivalente réduit la taille du fichier de 24 à 32 %. La conversion à AVIF la réduit de 38 à 48 %. Ce ne sont pas des différences mineures—sur nos 180 000 images de produits, passer de JPEG à AVIF permettrait d'économiser approximativement...