WebP vs JPEG : Le duel des tailles de fichier 2024 qui détruit vos Core Web Vitals

Sarah Mitchell, photographe de produits et propriétaire d’une boutique e-commerce basée à Portland, en Oregon, regardait sa boutique Shopify perdre des opportunités de conversion. Ses images de produits—de magnifiques JPEG haute résolution capturant chaque détail de ses articles en cuir fait main—pesaient en moyenne 680 KB chacune. Lorsqu’elle a analysé son site avec Google PageSpeed Insights début 2024, sa métrique Largest Contentful Paint (LCP) affichait 4,2 secondes. Le seuil de Google pour une performance « correcte » s’établit à 2,5 secondes. Elle échouait.

Le véritable coût ne se limitait pas à un score de performance décevant. L’abandon de panier sur ses pages produits s’élevait à 47 %—près de la moitié de ses visiteurs partaient sans même scroller au-delà de l’image vedette. Les données internes de Google montrent que chaque seconde supplémentaire de temps de chargement correspond à une baisse de 7 % du taux de conversion. Pour le chiffre d’affaires mensuel de Sarah de 120 000 dollars, cela se traduisait par environ 8 400 dollars de ventes perdues *par seconde* de délai. Son problème d’images lui coûtait environ 25 200 dollars par mois en abandon évitable.

Après avoir converti sa bibliothèque d’images JPEG en format WebP et optimisé chaque fichier pour le web, Sarah a réduit son image vedette de 680 KB à 187 KB—une réduction de 72,5 %. Son LCP est tombé à 1,8 secondes. Dans les 30 jours, son abandon de panier est passé à 31 %, et son chiffre d’affaires mensuel a grimpé à 156 000 dollars. Le changement de format image seul représentait environ 36 000 dollars de revenus récupérés par an.

Pourquoi c’est plus important que la plupart des développeurs ne le réalisent

En 2024, l’optimisation des images reste le levier de performance le plus important et le moins exploité pour la plupart des sites web. Selon les données de HTTP Archive, les images représentent en moyenne 50 à 65 % du poids des pages sur le million de sites les plus importants. Pourtant, 53 % des sites analysés par le rapport Web Vitals de Google livrent toujours des JPEG non optimisés comme format d’image principal, un format introduit en 1992.

La percée n’est pas philosophique ; elle est mathématique. WebP, développé par Google et standardisé en 2018, offre des images visuellement identiques avec des tailles de fichier 25 à 35 % plus petites comparé au JPEG au même niveau de qualité. Pour un site comme celui de Sarah, où un catalogue de produits type contenait 200 images vedettes, cet écart se traduit par près de 100 Mo d’économies de bande passante par mois. Multipliez cela sur l’ensemble de votre base d’utilisateurs, et vous obtenez des réductions significatives des métriques Core Web Vitals qui influencent directement le classement de recherche Google.

Ce qui rend cela urgent en 2024, c’est que le support WebP a franchi le seuil d’adoption où il est désormais un standard web, et non une expérience. Chrome, Edge, Firefox, Safari (depuis la version 16) et Opera prennent tous nativement en charge WebP. Le seul récalcitrant est Internet Explorer, que Microsoft a supprimé en juin 2022. Pourtant, malgré cela, la majorité des plateformes de commerce électronique, des applications SaaS et des sites de contenu continuent d’utiliser par défaut le JPEG par inertie ou en raison d’une documentation obsolète.

Solution applicable 1 : Comprendre la réalité de la compression WebP par rapport au JPEG avec des chiffres réels

La comparaison de taille de fichier qui change tout

Soyons précis. Prenons un scénario réel : une photographie de produit professionnelle de 3000×2000px. Exportée depuis Lightroom au niveau de qualité 85 (la norme pour les JPEG web) :

– Format JPEG : 487 KB
– Format WebP (qualité équivalente) : 312 KB
– Réduction de la taille du fichier : 36 % plus petit

Maintenant, augmentez l’échelle. Un catalogue de commerce électronique de taille moyenne avec 500 images de produits enregistrées en JPEG représente actuellement 243,5 MB de données d’image totales. La conversion de l’ensemble de la bibliothèque en WebP la ramène à 156 MB, soit une économie de 87,5 MB. Pour un visiteur téléchargeant les 500 images (peu probable, mais à titre illustratif), cela représente une différence entre 243 MB et 156 MB de charge utile totale, ou environ 90 secondes de temps de chargement à une vitesse de connexion 3G typique de 400 KB/sec.

Mais voici l’insight que la plupart des guides d’optimisation oublient : la véritable valeur ne réside pas dans le rare visiteur qui charge votre catalogue entier. Elle se trouve dans vos *visiteurs récurrents et crawlers*. Les crawlers de Google téléchargent et analysent vos images en continu. Réduire votre charge d’image de 36 % signifie que votre serveur diffuse les pages plus rapidement, analyse plus efficacement, et signale une meilleure performance à l’algorithme de classement de Google.

L’équation d’amélioration du Largest Contentful Paint (LCP)

LCP mesure le moment où l’élément visuel le plus grand (souvent une image hero) devient entièrement chargé et visible. Les recherches de Google montrent que chaque amélioration de 100 ms du LCP correspond en moyenne à une amélioration de 1 % du taux de conversion. Dans le cas de Sarah, la réduction du LCP de 4,2 secondes à 1,8 seconde (une amélioration de 2,4 secondes) s’est produite presque entièrement parce que son image hero est passée de 680 KB à 187 KB.

Voici le fonctionnement : À une vitesse de haut débit typique de 5 Mbps, le téléchargement d’une image de 680 KB prend environ 1,09 seconde. Une image de 187 KB prend 0,30 seconde. Cette différence de 0,79 seconde dans le temps de transfert, combinée au rendu plus rapide du navigateur pour le fichier plus petit, s’est propagée dans le chemin de rendu critique de sa page et a réduit le LCP de la totalité des 2,4 secondes qu’elle a observées.

Pour votre site, cela signifie : si votre LCP est actuellement limité par un grand JPEG, la conversion de cette seule image en WebP apportera probablement des améliorations mesurables du LCP dans un délai d’un jour suivant le déploiement.

Solution exploitable 2 : Intégrer la conversion WebP dans votre flux de développement

Conversion par lots avec fallbacks de format (l’approche sûre)

La stratégie de déploiement la plus sûre pour WebP est l’élément picture avec fallback, qui garantit que les anciens navigateurs reçoivent toujours les images tandis que les navigateurs modernes obtiennent le format optimisé :

Ce modèle HTML garantit 100 % de compatibilité. Les navigateurs modernes (99,5 % de votre trafic en 2024) chargent le WebP ; les navigateurs plus anciens reviennent au JPEG de manière transparente.

Pour mettre cela en œuvre à grande échelle, vous avez besoin d’un outil de conversion par lot. En utilisant ffmpeg en ligne de commande ou cwebp (l’encodeur WebP en ligne de commande de Google), convertissez votre bibliothèque d’images entière :

cwebp -q 80 input.jpg -o input.webp

Cette commande unique convertit un JPEG en WebP au niveau de qualité 80 (visuellement indiscernable de l’original pour la plupart des photographies). Pour un dossier de 500 images, cela prend environ 15–20 minutes sur une machine moderne.

Automatiser la conversion dans votre pipeline de compilation

Au lieu d’une conversion par lot manuelle, intégrez la génération WebP dans votre processus de compilation. Si vous utilisez un générateur de site statique comme Next.js, Hugo ou Jekyll, des extensions existent désormais pour générer automatiquement les versions WebP au moment de la compilation.

Pour les projets Next.js, le composant Image sert automatiquement WebP aux navigateurs qui le supportent :

jsx
import Image from ‘next/image’
export default function Product() {
return
}

Next.js gère la négociation de format, la compression et le dimensionnement réactif automatiquement. Aucune configuration manuelle requise.

Pour les sites WordPress, les extensions ShortPixel ou Imagify convertissent automatiquement votre bibliothèque multimédia entière en WebP sur