Pourquoi les images peuvent ralentir votre site

Les images représentent en moyenne 50 % du poids total d'une page web. Si elles ne sont pas optimisées, elles ralentissent considérablement le chargement de votre site. Et un site lent, c'est :

  • Des visiteurs qui partent avant même d'avoir vu votre contenu (53 % des visiteurs quittent une page qui met plus de 3 secondes à charger).
  • Un référencement pénalisé : Google favorise les sites rapides dans ses résultats de recherche.
  • Une mauvaise expérience utilisateur, surtout sur mobile avec une connexion plus lente.

La bonne nouvelle : optimiser vos images ne demande pas de compétences techniques. Quelques bonnes pratiques et des outils gratuits suffisent pour gagner en vitesse sans sacrifier la qualité visuelle.

Comprendre les formats d'image

Avant de compresser quoi que ce soit, il faut choisir le bon format. Chaque format a ses forces et ses faiblesses.

JPEG (ou JPG)

Le format le plus courant pour les photos. Il offre un bon compromis entre qualité et poids de fichier. Utilisez-le pour les images avec beaucoup de couleurs et de détails : photos de produits, de votre équipe, de votre commerce.

PNG

Idéal pour les images qui ont besoin de transparence (un logo sur fond transparent, par exemple) ou les images avec du texte et des aplats de couleur. Le PNG est plus lourd que le JPEG, donc ne l'utilisez pas pour les photos.

WebP

Un format moderne développé par Google qui offre une meilleure compression que le JPEG et le PNG tout en conservant une excellente qualité. La plupart des navigateurs modernes le prennent en charge. C'est le format à privilégier si possible.

SVG

Un format vectoriel parfait pour les logos, icônes et illustrations simples. Les fichiers SVG sont très légers et s'affichent parfaitement quelle que soit la taille d'écran. En revanche, il n'est pas adapté aux photos.

Quel format choisir ?

Type d'image Format recommandé
Photo de produit WebP ou JPEG
Logo SVG ou PNG (avec transparence)
Icône SVG
Illustration simple SVG ou PNG
Bannière / photo d'ambiance WebP ou JPEG
Capture d'écran PNG ou WebP

Étape 1 : redimensionnez vos images

L'erreur la plus fréquente : mettre en ligne une photo tout droit sortie de votre appareil photo ou de votre téléphone. Ces images font souvent 4000 × 3000 pixels ou plus, alors que l'espace d'affichage sur votre site ne dépasse généralement pas 1200 pixels de large.

Les bonnes dimensions

  • Image pleine largeur (bannière, hero) : 1200 à 1920 pixels de large.
  • Image dans un article : 800 à 1200 pixels de large.
  • Miniature / vignette : 300 à 600 pixels de large.
  • Logo : 200 à 400 pixels de large (ou en SVG pour une qualité parfaite à toute taille).

Redimensionner une image de 4000 pixels à 1200 pixels peut diviser son poids par 5 ou plus, sans aucune perte de qualité visible sur votre site.

Comment redimensionner

  • Sur Windows : ouvrez l'image avec l'application Photos, cliquez sur les trois points > Redimensionner.
  • Sur Mac : ouvrez l'image avec Aperçu, allez dans Outils > Ajuster la taille.
  • En ligne : utilisez un outil gratuit comme iLoveIMG ou Birme.

Étape 2 : compressez vos images

La compression réduit le poids d'un fichier image en éliminant des données invisibles à l'œil nu. Une image bien compressée peut peser 70 à 80 % de moins que l'originale, sans différence visible.

Les outils gratuits de compression

  • Squoosh : un outil en ligne de Google, simple et puissant. Glissez votre image et ajustez le curseur de qualité. Vous voyez le résultat en temps réel.
  • TinyPNG : excellent pour les PNG et les JPEG. Glissez-déposez jusqu'à 20 images à la fois.
  • Compressor.io : prend en charge JPEG, PNG, SVG et WebP.
  • iLoveIMG : interface en français, simple d'utilisation.

Quel niveau de compression viser ?

Pour la plupart des images sur un site web, une qualité de 75 à 85 % offre le meilleur rapport qualité/poids. En dessous de 60 %, les artefacts de compression deviennent visibles.

Objectif : chaque image de votre site devrait peser moins de 200 Ko. Les miniatures et les logos devraient être en dessous de 50 Ko.

Étape 3 : rédigez des textes alternatifs (attribut alt)

Le texte alternatif (ou attribut « alt ») est une description textuelle de votre image. Il remplit deux fonctions essentielles :

Pour l'accessibilité

Les personnes malvoyantes utilisent des lecteurs d'écran qui lisent le texte alternatif à voix haute. Sans attribut alt, ces visiteurs ne savent pas ce que représente votre image.

Pour le référencement

Google ne « voit » pas les images comme nous. Il se base sur le texte alternatif pour comprendre le contenu de l'image et la faire apparaître dans Google Images. Un bon texte alt améliore votre SEO.

Comment rédiger un bon texte alt

  • Soyez descriptif et précis : « Vitrine de la boulangerie Le Fournil à Bordeaux » plutôt que « image1 ».
  • Intégrez un mot-clé naturellement si c'est pertinent, mais ne forcez pas.
  • Restez concis : une phrase courte suffit (10 à 15 mots maximum).
  • Ne commencez pas par « Image de... » : le lecteur d'écran sait déjà que c'est une image.

Quelques exemples :

Mauvais Bon
photo.jpg Façade du salon de coiffure Élégance à Lyon
produit Bouquet de roses rouges pour la Saint-Valentin
IMG_4521 Équipe de l'entreprise Martin Plomberie lors d'un chantier

Étape 4 : nommez correctement vos fichiers

Le nom du fichier image compte aussi pour le référencement. Avant de mettre votre image en ligne, renommez-la avec un nom descriptif.

Les règles de nommage

  • Utilisez des mots en minuscules, séparés par des tirets : facade-boulangerie-bordeaux.jpg.
  • Évitez les caractères spéciaux, les accents et les espaces.
  • Intégrez un mot-clé pertinent si c'est naturel.
  • Oubliez les noms génériques comme IMG_4521.jpg ou photo-1.png.

Étape 5 : pensez au chargement différé

Le chargement différé (lazy loading) est une technique qui consiste à ne charger les images que lorsque le visiteur fait défiler la page jusqu'à elles. Les images situées tout en bas de la page ne sont pas téléchargées immédiatement, ce qui accélère considérablement l'affichage initial.

La plupart des éditeurs de sites web et des CMS modernes intègrent cette fonctionnalité. Vérifiez que cette option est activée dans les paramètres de votre site.

Vérifiez la vitesse de votre site

Après avoir optimisé vos images, testez la vitesse de votre site avec ces outils gratuits :

  • PageSpeed Insights : l'outil de Google qui vous donne un score de performance et des recommandations concrètes.
  • GTmetrix : une analyse détaillée avec le poids de chaque élément de votre page.
  • WebPageTest : pour un test approfondi depuis différents emplacements géographiques.

Visez un score supérieur à 80 sur PageSpeed Insights. Si vos images sont bien optimisées, vous devriez y arriver sans difficulté.

En résumé

Optimiser les images de votre site est l'une des actions les plus rentables que vous puissiez faire pour améliorer sa performance. Redimensionnez vos images à la bonne taille, compressez-les avec un outil gratuit, choisissez le bon format, ajoutez des textes alternatifs descriptifs et renommez vos fichiers. Ces gestes prennent quelques minutes par image et peuvent diviser le temps de chargement de votre site par deux ou trois.