WebP vs JPEG: Which Format Should You Actually Use?

Le mardi dernier, j'ai vu notre facture CDN baisser de 847 $ en une seule journée. Pas parce que le trafic a diminué - nous avons en fait atteint un nouveau record - mais parce que j'ai enfin convaincu notre CTO de me laisser convertir nos images produits de JPEG à WebP. Je suis Sarah Chen, et j'ai passé les 11 dernières années à optimiser la livraison d'images pour des plateformes de commerce électronique qui servent collectivement plus de 200 millions d'utilisateurs par mois. Pendant ce temps, j'ai vu des guerres de formats venir et partir, mais rien n'a suscité plus de débats lors des réunions d'ingénierie que la question WebP contre JPEG.

Voici ce que personne ne vous dit : la réponse n'est pas simple, et quiconque dit "utilisez simplement WebP pour tout" n'a pas fait face à la réalité compliquée des systèmes de production à grande échelle. Après avoir migré 47 sites clients différents et effectué d'innombrables tests A/B, j'ai appris que le bon choix dépend de facteurs que la plupart des développeurs ne considèrent jamais.

L'écart de performance dans le monde réel dont personne ne parle

Laissons-moi commencer par les chiffres qui comptent. Dans mon dernier test à grande échelle impliquant 2,3 millions d'images produits dans le catalogue d'un détaillant de vêtements, les fichiers WebP étaient en moyenne 26 % plus petits que leurs équivalents JPEG à des niveaux de qualité visuellement identiques. C'est le chiffre phare que vous verrez partout. Mais voici ce que les benchmarks ne montrent pas : l'impact réel sur la performance variait énormément selon les caractéristiques de l'image.

Pour les photographies avec beaucoup de dégradés et de textures naturelles - pensez aux paysages ou à la photographie culinaire - WebP a constamment généré des réductions de taille de 28 à 34 %. Mais pour les images avec des bords nets, des superpositions de texte ou des graphiques à fort contraste, l'avantage a diminué à seulement 12 à 18 %. J'ai une fois passé trois jours à déboguer pourquoi nos miniatures infographiques ne se compressaient pas bien, pour découvrir que le JPEG produisait en fait des fichiers plus petits pour ce type de contenu spécifique.

Les différences d'algorithmes de compression comptent plus que la plupart des développeurs ne le réalisent. Le JPEG utilise une transformée en cosinus discrète (DCT) qui excelle dans les dégradés doux mais a du mal avec les transitions nettes. WebP utilise le codage prédictif et le codage arithmétique, ce qui le rend plus polyvalent pour différents types d'images. En termes pratiques, cela signifie que WebP gère une plus grande variété de contenus de manière efficace, mais que le JPEG peut encore gagner dans des scénarios spécifiques.

J'ai également mesuré la différence de temps d'encodage, qui devient critique à grande échelle. Sur nos serveurs de production (instances AWS c5.2xlarge), l'encodage d'une image de 2000x2000px en WebP prend environ 340 ms contre 180 ms pour le JPEG à des paramètres de qualité équivalents. Lorsque vous traitez 50 000 téléchargements utilisateurs par jour, cette différence se cumule en de réels coûts d'infrastructure. Nous avons dû prévoir 40 % de capacité d'encodage supplémentaire lorsque nous sommes passés au WebP, ce qui a partiellement compensé nos économies de bande passante.

Support des navigateurs : l'éléphant dans la salle de conférence

Chaque discussion technique sur le WebP finit par se heurter à ce mur : le support des navigateurs. Et c'est ici que la conversation devient intéressante, car le paysage a radicalement changé au cours des deux dernières années. Lors de mon dernier audit en janvier 2024, le WebP bénéficie d'un support mondial de navigateurs de 97,3 % selon nos données analytiques sur plus de 50 sites clients. C'est une augmentation par rapport à 91,2 % il y a seulement 18 mois.

"La réduction moyenne de 26 % de la taille des fichiers avec WebP semble impressionnante jusqu'à ce que vous réalisiez qu'elle peut varier de 12 % à 34 % selon votre type de contenu - et cette variance est ce qui fait échouer les budgets de production."

Mais ce 2,7 % restant représente de vrais utilisateurs avec de l'argent réel. Pour un client de produits de luxe, ce segment non pris en charge a représenté 4,1 % des revenus - des clients à forte valeur ajoutée utilisant d'anciens navigateurs d'entreprise ou des dispositifs mobiles spécifiques. Nous ne pouvions tout simplement pas les ignorer. C'est pourquoi chaque implémentation WebP en production que j'ai construite inclut une stratégie de secours.

L'élément picture dans HTML5 fournit la solution la plus propre. Vous servez WebP aux navigateurs supportant et JPEG à tous les autres. La syntaxe ressemble à ceci : vous enveloppez votre image dans une balise picture, spécifiez WebP comme première source et fournissez un recours JPEG dans la balise img. Le navigateur sélectionne automatiquement le premier format qu'il supporte. Cette approche ajoute un surcoût minimal - généralement de 2 à 3 ms de temps de parsing - et garantit une compatibilité universelle.

Cependant, cela double vos exigences de stockage et complique votre pipeline de traitement d'images. Vous générez, stockez et servez désormais deux versions de chaque image. Pour nos clients avec des millions d'actifs, cela a signifié des changements d'infrastructure significatifs. Un client de la vente au détail a vu ses coûts de stockage S3 augmenter de 89 % avant que nous n'implémentions des politiques de nettoyage intelligentes pour supprimer les variantes inutilisées.

Il y a aussi la considération du cache CDN. Avec des formats doubles, vous divisez potentiellement votre efficacité de cache. Si 95 % des utilisateurs demandent WebP et 5 % demandent JPEG, vous maintenez deux entrées de cache séparées pour chaque image. Cela peut réduire les taux de réussite du cache et augmenter la charge sur le serveur d'origine. J'ai vu cela causer une dégradation surprise de la performance lors de pics de trafic lorsque le cache ne pouvait pas se réchauffer efficacement pour les deux formats.

Perception de la qualité : ce que vos utilisateurs remarquent réellement

J'ai réalisé 23 études de perception utilisateur différentes au fil des ans, et les résultats surprennent constamment les gens. Dans des tests A/B à l'aveugle où les utilisateurs comparaient des images WebP et JPEG à des tailles de fichiers équivalentes, 67 % des participants n'ont pas pu identifier quel format était lequel. Plus important encore, 71 % ont jugé les deux formats comme étant de "qualité acceptable" pour des fins de commerce électronique.

Mais voici la nuance : à des ratios de compression très élevés, les artefacts diffèrent de manière perceptible. Le JPEG produit des artefacts carrés de 8x8 pixels que les utilisateurs décrivent comme "pixellisés" ou "flous". WebP crée des artefacts différents - parfois décrits comme "flous" ou "cireux" - que certains utilisateurs trouvent plus répréhensibles même lorsque la taille du fichier est plus petite. Lors d'un test mémorable, les utilisateurs ont préféré un JPEG légèrement plus grand à un WebP plus compressé pour la photographie de portrait, citant que les visages avaient l'air "plus naturels".

Le point de qualité que j'ai trouvé grâce à des tests approfondis : visez des réglages de qualité WebP entre 75-85 (sur une échelle de 0-100) pour le contenu photographique. Cela produit généralement des fichiers 25-30 % plus petits que JPEG à une qualité de 85-90, avec des différences de qualité imperceptibles pour la plupart des utilisateurs. Pour les contenus riches en graphiques avec texte, j'augmente la qualité WebP à 88-92 pour éviter l'effet de flou autour des bords nets.

La fidélité des couleurs est une autre considération qui compte pour des secteurs spécifiques. Les clients de la mode et des cosmétiques sont obsédés par la fidélité des couleurs - un rouge à lèvres qui paraît légèrement différent en ligne par rapport à en magasin entraîne des retours et des plaintes. Dans mes tests, les deux formats gèrent les espaces colorimétriques correctement lorsqu'ils sont configurés correctement, mais la compression avec perte de WebP peut introduire de légères variations de couleur dans les zones hautement saturées. Je recommande toujours une validation visuelle pour les images principales et les prises de vue de produits où la fidélité des couleurs est critique pour les affaires.

L'histoire de la performance mobile devient compliquée

Les appareils mobiles représentent 73 % du trafic pour la plupart de mes clients en commerce électronique, donc la performance mobile guide la plupart de mes décisions d'optimisation. WebP devrait être un gagnant évident ici - des fichiers plus petits signifient des chargements plus rapides sur des connexions cellulaires. Et en général, c'est vrai. Sur les connexions 4G, les images WebP se chargent en moyenne 18-24 % plus rapidement dans mes tests de terrain.