Comment Optimiser les Images pour votre Site et le PageSpeed

La vitesse de chargement est un facteur de classement confirmé par Google depuis 2018 pour le desktop et depuis 2021 pour le mobile. Plus que cela, elle affecte directement le taux de conversion : chaque seconde de chargement supplémentaire augmente l'abandon de la page jusqu'à 32 %, selon les données de Google lui-même. Et en e-commerce, des études de Portent montrent que les pages qui chargent en 1 seconde convertissent jusqu'à 3 fois plus que les pages qui mettent 5 secondes.

Les images représentent généralement 50 à 80 % du poids total d'une page web. Les optimiser correctement est donc l'intervention ayant le plus d'impact sur la performance de n'importe quel site.

Ce que PageSpeed Insights évalue sur les images

Google PageSpeed Insights (PSI) analyse votre page et signale les problèmes liés aux images dans plusieurs catégories. Les plus courantes sont :

• « Diffusez des images au format nouvelle génération » : apparaît quand le site utilise du JPG ou PNG là où le WebP (ou l'AVIF) réduirait significativement la taille.
• « Dimensionnez les images correctement » : apparaît quand l'image envoyée au serveur est plus grande que l'espace où elle est affichée. Exemple : envoyer une photo de 2000px pour l'afficher en 400px.
• « Différez les images hors écran » : apparaît quand les images sous la ligne de flottaison sont chargées avec le reste de la page, au lieu de seulement quand l'utilisateur défile jusqu'à elles (lazy loading).
• « Encodez les images de façon efficace » : apparaît quand la compression appliquée aux images a encore une marge de réduction sans perte de qualité perceptible.
• « Image LCP » : identifie quelle image est le Largest Contentful Paint de la page — l'élément principal qui détermine l'une des métriques Core Web Vitals.

Les 6 principes d'optimisation d'images pour le web

1. Utilisez le bon format pour chaque type d'image

Le choix du format est la décision ayant le plus d'impact, même avant toute compression :

Le WebP produit des fichiers 25 à 35 % plus légers que le JPG et 20 à 30 % plus légers que le PNG à qualité visuelle équivalente. En 2026, la compatibilité dépasse 97 % des navigateurs en usage — il n'y a plus de raison technique de l'éviter sur des sites neufs.

2. Compressez sans sacrifier la qualité visible

La compression est le processus qui réduit la taille du fichier en gardant les dimensions de l'image. Pour les photos JPG, réduire la qualité de 100 % à 80 % produit des fichiers 5 à 10 fois plus légers avec une différence imperceptible à l'écran. C'est la plage idéale pour le web.

Repères pratiques de poids par type d'image :

• Hero / bannière principale : moins de 200 Ko
• Photo de produit (e-commerce) : 50–150 Ko
• Image d'article de blog : 50–120 Ko
• Miniature : 10–30 Ko
• Logo (PNG/WebP) : moins de 30 Ko
• Icônes SVG : moins de 5 Ko

3. Envoyez les images aux dimensions réelles d'affichage

C'est l'erreur la plus courante et aussi l'une des plus impactantes : envoyer des images bien plus grandes que l'espace où elles sont affichées. Le navigateur télécharge l'image complète puis jette les pixels excédentaires au rendu.

Exemples du coût de cette erreur :

• Une photo de produit de 3000×3000px affichée dans un cadre de 600×600px : le navigateur télécharge 9 millions de pixels et n'en utilise que 360 000 — 96 % de gaspillage.
• Une bannière de 4000px de large sur un site au layout maximal de 1440px : 63 % des pixels téléchargés sont immédiatement jetés.

La règle est simple : l'image envoyée au serveur doit avoir au maximum le double des dimensions d'affichage (le double pour couvrir les écrans Retina/HiDPI). Pour un espace de 600px de large, envoyez au maximum 1200px.

Utilisez le Redimensionneur d'Image d'ImageTools pour ajuster les dimensions avant l'upload, en saisissant les valeurs exactes en pixels ou en pourcentage.

4. Implémentez le lazy loading

Le lazy loading est la technique consistant à charger les images seulement quand elles sont sur le point d'entrer dans la zone visible de l'écran, plutôt que de télécharger toutes les images de la page d'un coup au chargement initial. L'impact est significatif : sur les pages avec beaucoup d'images (listes de produits ou articles longs), le lazy loading peut réduire le poids initial de la page de 60 à 80 %.

L'implémentation la plus simple est native dans le HTML moderne — il suffit d'ajouter l'attribut loading="lazy" aux balises d'image :

<!-- Image qui doit charger immédiatement (au-dessus de la ligne de flottaison) -->
<img src="banner-principal.webp" alt="Bannière" loading="eager">

<!-- Images qui peuvent attendre (sous la ligne de flottaison) -->
<img src="produit-1.webp" alt="Produit 1" loading="lazy">
<img src="produit-2.webp" alt="Produit 2" loading="lazy">

Important : n'appliquez jamais loading="lazy" à l'image principale au-dessus de la ligne de flottaison (hero, bannière, première photo de produit). Cela retarde le LCP — la métrique la plus importante des Core Web Vitals — et nuit directement à la note PageSpeed.

5. Définissez width et height sur les balises d'image

Quand le navigateur commence à charger une page, il construit le layout avant de connaître la taille des images. Si width et height ne sont pas définis, le navigateur ne réserve pas le bon espace — et quand l'image charge, le layout « saute », déplaçant le texte et les boutons. C'est ce que PageSpeed mesure comme Cumulative Layout Shift (CLS), un autre Core Web Vital.

<!-- Sans dimensions : cause un layout shift -->
<img src="produit.webp" alt="Produit">

<!-- Avec dimensions : réserve le bon espace dès le début -->
<img src="produit.webp" alt="Produit" width="600" height="600">

Les valeurs de width et height dans le HTML n'ont pas besoin de correspondre à la taille d'affichage visuelle — elles définissent juste la proportion. Le CSS gère la taille d'affichage.

6. Utilisez des images responsives avec srcset

La balise srcset permet de fournir différentes versions d'une image pour différents appareils — en envoyant une image plus petite aux mobiles et plus grande aux ordinateurs. Le navigateur choisit automatiquement la version la plus adaptée à l'écran de l'utilisateur.

<img
  src="produit-800.webp"
  srcset="produit-400.webp 400w,
          produit-800.webp 800w,
          produit-1200.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 900px) 800px,
         1200px"
  alt="Produit"
  width="800"
  height="800"
  loading="lazy"
>

Pour les e-commerces avec beaucoup de photos de produit, srcset peut réduire le volume de données transférées aux utilisateurs mobiles de 40 à 60 %.

Checklist complète d'optimisation d'images

Utilisez cette liste avant de publier une page ou de mettre à jour des images existantes :

• ☐ Images en WebP (ou SVG pour les vectorielles)
• ☐ Compression appliquée — photos sous 150 Ko dès que possible
• ☐ Dimensions correctes — pas plus du double de l'espace d'affichage
• ☐ loading="lazy" sur toutes les images sous la ligne de flottaison
• ☐ loading="eager" (ou sans attribut) sur l'image principale au-dessus de la ligne de flottaison
• ☐ width et height définis sur toutes les balises <img>
• ☐ Attribut alt descriptif sur toutes les images (accessibilité + SEO)
• ☐ srcset pour les images qui s'affichent dans des tailles très différentes entre mobile et bureau
• ☐ Image LCP sans loading="lazy" et avec fetchpriority="high" si possible

Optimisation par plateforme

WordPress

WordPress convertit automatiquement en WebP à partir de la version 6.1 si le serveur le supporte. Pour vous assurer : installez un plugin d'optimisation comme Imagify, ShortPixel ou Smush — ils compressent, convertissent en WebP et ajoutent le lazy loading automatiquement sur les images déjà existantes dans la bibliothèque de médias.

Shopify

Shopify convertit les images en WebP automatiquement et sert la bonne version selon l'appareil depuis 2021. Ce que le commerçant doit contrôler manuellement, c'est la taille des images envoyées — le recommandé est 2048×2048px pour les photos de produit, que Shopify redimensionne pour chaque contexte d'affichage.

Wix, Squarespace et autres créateurs de sites

La plupart des créateurs de sites modernes appliquent déjà la compression et le lazy loading automatiquement. Ce qui dépend encore de l'utilisateur, c'est d'envoyer des images aux dimensions raisonnables — envoyer des photos d'appareil de 8 Mo surcharge le serveur et peut résulter en variantes plus grandes que nécessaire.

Sites HTML/CSS pur ou frameworks (Next.js, Nuxt, etc.)

Dans ces cas, toute l'optimisation relève du développeur. Le composant <Image> de Next.js, par exemple, automatise le lazy loading, le srcset et la conversion en WebP. Pour les frameworks sans cette abstraction, l'optimisation manuelle suivant la checklist ci-dessus est nécessaire.

Comment mesurer l'impact des optimisations

Après avoir appliqué les optimisations, mesurez le résultat avec ces outils :

• Google PageSpeed Insights (pagespeed.web.dev) — analyse complète avec diagnostic par élément, séparée pour mobile et desktop.
• Google Search Console → Rapport d'Expérience de Page — montre l'état des Core Web Vitals avec des données réelles des utilisateurs de votre site.
• WebPageTest.org — analyse technique détaillée avec waterfall de chargement, utile pour identifier quelle image précise retarde le LCP.
• Chrome DevTools → Network — filtrez par « Img » pour voir toutes les images chargées, leurs tailles et temps de téléchargement.

Questions fréquentes