Poids des images : pourquoi elles ralentissent ton site

1 Accroche

Une belle image peut ralentir ton site

Tu viens de prendre une belle photo. Elle fait 8 Mo. Tu la trouves magnifique. Tu l'envoies directement sur ton site. Sur ton ordinateur, tout semble fonctionner. Mais sur un téléphone avec une connexion moyenne, le visiteur attend. Et attend encore. Le problème ne vient peut-être pas de ton serveur. Il vient simplement… de ton image.

C'est un problème assez courant. Une image peut sembler parfaitement normale lorsqu'on la regarde sur son ordinateur, tout en représentant une quantité importante de données à télécharger pour le navigateur. Et lorsque plusieurs images lourdes sont présentes sur une même page, le problème peut rapidement s'accumuler.

Alors, comment éviter de charger beaucoup plus de données que nécessaire ?

2 Ce que tu vas apprendre

À la fin de ce chapitre, tu sauras

✓ Pourquoi une image lourde ralentit une page
✓ Comment connaître le poids d'une image
✓ Pourquoi les dimensions d'une image comptent
✓ Comment réduire le poids d'une image sans dégrader inutilement sa qualité
✓ Quelles erreurs éviter avec les images

3 Le concept expliqué simplement

Pourquoi une image lourde ralentit-elle une page ?

Une image numérique est composée de données. Plus elle contient de pixels et plus elle est enregistrée avec une qualité importante, plus son fichier peut être lourd. Par exemple, une image de 4 000 × 3 000 pixels contient énormément plus d'informations qu'une petite image de 800 × 600 pixels. Et toutes ces données doivent être téléchargées par le navigateur avant de pouvoir être affichées.

C'est là que le poids d'une image devient important. Plus le fichier est lourd, plus la quantité de données à transférer est importante.

💡 Analogie — Imagine que tu dois déménager. Tu peux transporter une petite boîte. Ou transporter une armoire entière alors que tu n'avais besoin que d'un seul tiroir. Dans les deux cas, tu transportes quelque chose. Mais le deuxième voyage demande beaucoup plus de temps et d'efforts. Pour les images, c'est pareil. Envoyer une image de 5 Mo alors qu'une version de 150 Ko suffit revient souvent à transporter une armoire pour déplacer un livre.

Le poids d'une image et ses dimensions sont deux choses liées, mais différentes

Il faut également distinguer deux notions. D'un côté, tu as les dimensions de l'image : 4 000 × 3 000 pixels. De l'autre, tu as le poids du fichier : 5 Mo. Une grande image peut être lourde. Mais deux images ayant exactement les mêmes dimensions peuvent également avoir des poids différents. Le format, la qualité et la compression utilisée peuvent notamment faire varier le poids du fichier.

Pour optimiser une image, il faut donc regarder à la fois ses dimensions et son poids.

Réduire l'affichage ne réduit pas forcément le poids

C'est un piège très courant. Imagine que tu possèdes une image de 3 000 pixels de large. Mais que ton site ne l'affiche que dans un espace de 500 pixels. Visuellement, tu vois bien une petite image. Mais le fichier original peut toujours faire 3 000 pixels de large.

💡 Analogie — Imagine une grande affiche pliée dans une petite boîte. Le fait de la mettre dans une petite boîte ne change pas la taille de l'affiche. Pour une image, c'est pareil. Réduire son affichage avec du CSS ne réduit pas forcément son poids.

La compression permet de réduire le poids

La compression permet de réduire la quantité de données nécessaire pour stocker une image. Elle peut donc permettre d'obtenir un fichier beaucoup plus léger. Il existe notamment deux grandes approches : compression avec perte (certaines informations sont supprimées afin de réduire davantage le poids) et compression sans perte (les informations originales sont conservées).

L'objectif n'est pas nécessairement d'obtenir le fichier le plus petit possible. Il faut trouver un bon équilibre entre poids et qualité visuelle.

⚠️ Les pièges à éviter

✗ Envoyer directement des photos très lourdes sur son site
✗ Penser qu'une image affichée en petit est forcément légère
✗ Négliger les dimensions originales de l'image
✗ Compresser tellement une image que sa qualité devient insuffisante
✗ Utiliser une image beaucoup plus grande que nécessaire
✗ Charger des images qui n'apportent aucune réelle valeur à la page

4 Exemple concret

Une bannière de 7 Mo pour un affichage de 1 200 pixels

Tu as une bannière qui s'affiche sur ton site avec une largeur de 1 200 pixels. Mais tu as envoyé directement une photo originale de 6 000 × 4 000 pixels — 7 Mo. Le navigateur doit alors télécharger cette grosse image. Pourtant, ton site n'a pas nécessairement besoin d'une image aussi grande. Une version adaptée à l'usage pourrait par exemple faire 1 600 × 1 067 pixels — 200 Ko.

Visuellement, la différence peut être difficile à percevoir. Mais la quantité de données à télécharger est radicalement différente. Tu passes ici d'un fichier de 7 Mo à 200 Ko.

L'objectif n'est donc pas de supprimer les images de ton site. Il est de servir une image adaptée à son usage.

5 Comment le mettre en pratique

1

Fais l'inventaire

Commence par regarder les images présentes sur tes pages principales. Identifie notamment les images qui semblent particulièrement lourdes. Tu peux commencer par ta page d'accueil, tes pages les plus visitées, tes pages commerciales ou tes fiches produits si tu as un e-commerce. L'objectif est simplement de savoir quelles images méritent ton attention en priorité.

2

Regarde leurs dimensions

Vérifie ensuite les dimensions de tes images. Une image destinée à être affichée dans un petit bloc n'a probablement pas besoin de faire 5 000 pixels de large. Compare toujours les dimensions du fichier avec l'espace réellement utilisé sur la page.

💡 Bon réflexe — Demande-toi toujours : « Quelle taille cette image doit-elle réellement avoir pour être affichée correctement ? »

3

Compresse tes images

La compression permet de réduire le poids d'un fichier. L'objectif est de diminuer la quantité de données à télécharger tout en conservant une qualité visuelle suffisante. Teste différentes compressions si nécessaire. Une image destinée à être affichée en petit peut souvent supporter davantage d'optimisation qu'une grande image très visible.

4

Utilise un format adapté

Plusieurs formats d'image peuvent être utilisés selon les besoins. Tu peux notamment rencontrer JPEG, WebP et AVIF. Le choix du format peut avoir une influence sur le poids du fichier et sur sa qualité. Nous verrons ces différents formats plus précisément dans le prochain chapitre.

5

Adapte la taille à l'usage

Une image affichée en 400 pixels de large n'a généralement pas besoin d'être envoyée dans une version gigantesque. Si ton site affiche une image dans un petit espace, évite de lui fournir systématiquement une image beaucoup plus grande que nécessaire. L'idée est simple : envoyer la bonne taille pour le bon usage.

6

Évite les images inutiles

La meilleure image pour la performance est parfois… celle que tu n'as pas besoin de charger. Toutes les images présentes sur une page ne sont pas forcément indispensables. Si une image est uniquement décorative et n'apporte aucune information ou valeur particulière, demande-toi si elle est réellement nécessaire. Chaque ressource supprimée est une ressource que le navigateur n'a pas besoin de télécharger.

6 Le jargon de ce chapitre

Mini-lexique

Terme	Définition simple
Poids d'une image	Taille du fichier à télécharger
Pixel	Petit élément qui compose une image numérique
Résolution	Dimensions d'une image en pixels
Compression	Technique permettant de réduire le poids d'un fichier
Compression avec perte	Compression qui réduit le poids en supprimant certaines informations
Compression sans perte	Compression qui conserve les informations originales

7 Quiz — Vérifie que tu as compris

Question 1/4

Question 1 — Pourquoi une image lourde ralentit-elle une page ?

A Elle nécessite davantage de données à télécharger

B Elle augmente automatiquement le nombre de pages

C Elle bloque toujours Google

D Elle empêche systématiquement le site de fonctionner

💡 Bonne réponse : A. Plus une image est lourde, plus la quantité de données à télécharger est importante.

8 Et après ?

Tu sais maintenant pourquoi une image trop lourde peut ralentir ton site. Tu as également vu qu'il ne suffit pas de réduire visuellement une image : il faut aussi faire attention à ses dimensions, à son poids et à sa compression.

Mais il reste une question importante : quel format utiliser pour ses images ?

JPEG, WebP, AVIF… Ces formats ne fonctionnent pas exactement de la même manière et peuvent avoir un impact différent sur le poids et la qualité des images.

Chapitre suivant

Les formats d'image modernes : WebP, AVIF et JPEG

Continuer →

Le poids des images et pourquoi ça ralentit ton site