Pourquoi les images sont le levier numéro un de performance web
Dans la majorité des sites web, les images représentent 50 à 75 % du poids total des pages. Ce sont elles qui déterminent principalement votre score LCP (Largest Contentful Paint) dans les Core Web Vitals de Google — le temps avant que le contenu principal de la page soit visible.
Un LCP sous 2,5 secondes est considéré "bon" par Google. Un LCP au-delà de 4 secondes est "mauvais" et impacte directement votre positionnement dans les résultats de recherche. Les images non optimisées sont la cause la plus fréquente de LCP dégradé.
La bonne nouvelle : l'optimisation des images est l'une des interventions les plus simples et les plus rentables que vous puissiez faire sur un site.
Étape 1 : choisir le bon format
La règle de base est simple : WebP pour tout ce qui va sur le web.
WebP est 25 à 35 % plus léger qu'un JPEG à qualité visuelle équivalente, et 20 à 30 % plus léger qu'un PNG. Tous les navigateurs modernes le supportent. C'est le choix par défaut pour les images web depuis 2022.
Utilisez PNG uniquement si vous avez besoin de transparence et que WebP n'est pas supporté par votre environnement cible (rare). Utilisez JPEG uniquement pour les exports vers des systèmes qui ne supportent pas encore WebP.
Si votre CMS ou votre pipeline de build ne gère pas la conversion vers WebP automatiquement, Zipero le fait en quelques secondes directement dans votre navigateur.
Étape 2 : comprimer correctement
Le format seul ne suffit pas. Un WebP non compressé peut être plus lourd qu'un JPEG bien compressé.
Pour les photos et images complexes : WebP avec pertes à 80-85 %. La différence visuelle est imperceptible dans la quasi-totalité des usages, et le gain de poids est massif — typiquement 60 à 80 % de réduction par rapport à l'original.
Pour les graphiques et logos : WebP sans perte ou PNG. Compresser un logo en WebP avec pertes introduit des artefacts sur les contours nets.
Pour les images héros et bannières (grandes images pleine largeur) : WebP à 75-80 %. Ce sont souvent les images qui pèsent le plus et impactent directement le LCP.
Étape 3 : dimensionner correctement
Une image de 4000×3000 pixels affichée dans une colonne de 800px envoie 15 fois plus de données que nécessaire. Redimensionnez toujours vos images à la taille maximale à laquelle elles seront affichées, avec un facteur 2× pour les écrans Retina.
Pour une image affichée à 800px de large : générez une version 1600px pour les écrans Retina et une version 800px pour les écrans standards.
Étape 4 : utiliser les images responsives
L'attribut srcset en HTML permet au navigateur de choisir la version de l'image adaptée à la densité d'écran et à la largeur de la fenêtre :
<img
src="hero-800.webp"
srcset="hero-800.webp 800w, hero-1600.webp 1600w"
sizes="(max-width: 800px) 100vw, 800px"
alt="Description"
/>
Next.js et la plupart des frameworks modernes gèrent cela automatiquement via leurs composants Image optimisés.
Étape 5 : le lazy loading
Les images hors écran n'ont pas besoin d'être chargées immédiatement. L'attribut loading="lazy" demande au navigateur de ne charger une image que lorsqu'elle approche du viewport :
<img src="image.webp" loading="lazy" alt="Description" />
Exception importante : n'appliquez jamais loading="lazy" à votre image héros ou à l'image principale de la page — c'est elle qui détermine votre LCP, et la retarder dégraderait votre score.
Mesurer l'impact
Avant et après optimisation, mesurez avec Google PageSpeed Insights ou Lighthouse (intégré dans Chrome DevTools). Les métriques clés : LCP, TBT, CLS, et le score global Performance.
Un passage de JPEG non compressé à WebP 80 % peut faire passer un score Performance de 45 à 85 sur PageSpeed Insights. Ce n'est pas marginal.
Optimiser en pratique avec Zipero
Zipero compresse vos images et les convertit en WebP directement dans votre navigateur — sans upload sur nos serveurs, sans compte requis. Vous pouvez traiter vos images une par une en quelques secondes avant de les intégrer à votre site.