Images et poids des pages : la moitié de votre vitesse tient là
Une page lente coûte des visiteurs avant de coûter du classement, et dans la plupart des cas la cause tient en un mot : les images. Ce mémo donne les quatre corrections qui comptent, dans l'ordre du rapport entre le gain et l'effort, et dit à quel moment il faut arrêter de s'en occuper.
À lire avant de décider
Ce mémo aborde des sujets encadrés par la réglementation ou qui engagent financièrement. Les règles, les tarifs et les pratiques évoluent : le texte décrit l'état du droit français à sa date de publication, et rien ne garantit qu'il soit encore exact aujourd'hui.
Il n'a pas valeur de conseil juridique, fiscal ou comptable. Pour une décision qui engage, faites vérifier votre cas par un professionnel. Avertissement et limites d'usage
1. Le trajet d'une photo, de l'appareil à l'écran Là où tout se perd
Un appareil photo récent produit un fichier de 4 à 8 méga-octets, en 6000 pixels de large. Cette image finit affichée dans un cadre de 800 pixels sur l'écran d'un visiteur. Entre les deux, si personne n'a rien fait, le fichier entier a traversé le réseau : le navigateur a téléchargé huit millions d'octets pour en afficher l'équivalent de cent mille.
Ce n'est pas une inefficacité théorique. Sur une connexion mobile ordinaire, huit méga-octets représentent plusieurs secondes pendant lesquelles la page est vide, et plusieurs secondes suffisent à faire partir une bonne partie des visiteurs. Le relevé du HTTP Archive donne l'ordre de grandeur : une page d'accueil moyenne contient près de soixante images.
2. Les quatre corrections, par ordre de rendement La première vaut à elle seule les trois autres
| Correction | Gain typique | Effort | Risque |
|---|---|---|---|
| 1. Redimensionner avant d'envoyer Ramener l'image à la taille où elle sera vue |
De 4 Mo à 150 Ko, soit 95 % du poids | Une minute par image, aucun outil payant | Aucun |
| 2. Changer de format Passer les JPEG et PNG en WebP ou AVIF |
25 à 50 % de poids en moins à qualité égale | Automatisable, ou une extension du gestionnaire de contenu | Faible |
| 3. Déclarer les dimensions Les attributs de largeur et de hauteur |
Aucun gain de poids, mais supprime le saut de mise en page | Un attribut par image | Vérifier le style |
| 4. Différer ce qui est hors écran Ne charger une image qu'à l'approche |
Sur une page longue, la moitié des images n'est jamais téléchargée | Un attribut par image | Pas sur la première image |
3. Le saut de mise en page L'agacement que tout le monde a vécu sans savoir le nommer
Vous ouvrez un article, vous commencez à lire, le texte saute de dix centimètres et vous avez cliqué sur une publicité. Ce qui s'est passé : une image dont le navigateur ignorait les dimensions vient d'arriver, et il a fallu lui faire de la place en poussant tout le reste vers le bas.
La correction tient en deux attributs, largeur et hauteur, posés sur chaque image. Le navigateur réserve alors l'espace exact avant même d'avoir le fichier, et plus rien ne bouge. Ce n'est pas du confort : Google en a fait l'une de ses trois mesures principales d'expérience utilisateur, et un site qui saute est pénalisé pour cela.
4. Quel format pour quoi Sans entrer dans la théorie de la compression
WebP
Le remplaçant naturel du JPEG et du PNG. Compris par tous les navigateurs en service, y compris anciens. Il gère la transparence, ce que le JPEG ne sait pas faire, et pèse en moyenne un quart à la moitié de moins à qualité équivalente.
Le choix par défaut
AVIF
Plus efficace encore, surtout sur les photos. Plus lent à produire, et un peu plus capricieux sur les outils anciens. À réserver aux sites où le poids est critique, ou quand la génération est automatisée.
Si l'outil le fait pour vous
SVG
Pour tout ce qui est dessiné et non photographié : logo, icône, schéma, pictogramme. Il pèse quelques kilo-octets, reste net à n'importe quelle taille, et se colore par le style. Un logo en PNG de 200 Ko est presque toujours une erreur.
Pour les logos
JPEG et PNG
Encore utiles comme solution de repli, et parfaitement acceptables si le fichier est correctement dimensionné. Une photo en JPEG de 150 Ko bien redimensionnée vaut mieux qu'un WebP de 2 Mo : le format compte moins que la taille.
Acceptable
5. Quand ce ne sont pas les images Les trois autres causes, dans l'ordre
Si vos images sont propres et que la page reste lente, la cause est ailleurs. Trois suspects, faciles à distinguer.
1 Les ressources qui bloquent
Chaque feuille de style et chaque script déclaré dans l'en-tête doit être téléchargé avant que la première ligne de texte s'affiche. Dix fichiers dans l'en-tête, c'est dix allers-retours avant que le visiteur voie quoi que ce soit.
La correction : reporter les scripts non essentiels en fin de page ou les marquer comme différés, et regrouper les feuilles de style.
2 Le temps de réponse du serveur
Le délai avant le premier octet. S'il dépasse une demi-seconde, aucune optimisation d'image ne le compensera : le visiteur attend avant même que le téléchargement commence.
La correction : activer un cache, ou changer d'offre d'hébergement. Ce n'est pas un problème de page, c'est un problème de serveur.
3 La compression absente
Un serveur correctement réglé compresse le HTML, les styles et les scripts avant de les envoyer, ce qui divise leur poids par trois ou quatre. C'est une case à cocher chez la plupart des hébergeurs, et elle est parfois décochée.
La correction : une ligne de configuration, aucun effet sur le contenu.
6. Mesurer avant et après Sinon vous optimisez à l'aveugle
| Ce qu'on mesure | Comment | Le seuil à viser |
|---|---|---|
| Le poids total de la page | Outils de développement du navigateur, onglet Réseau, colonne de la taille transférée. | Sous 1 Mo pour une page vitrine. Beaucoup de sites dépassent 5 Mo sans que personne ne l'ait jamais regardé. |
| L'affichage du contenu principal | Un outil de mesure de performance, ou les données réelles de vos visiteurs si votre trafic le permet. | Sous 2,5 secondes pour trois visiteurs sur quatre. |
| La stabilité de la mise en page | Même outil. Correspond directement au saut décrit en section 3. | Une valeur sous 0,1. |
| Le temps de réponse du serveur | curl -o /dev/null -s -w "%{time_starttransfer}\n" https://votre-site.fr |
Sous 0,5 seconde. Au-delà d'une seconde, traitez ce point en premier. |
7. Le plan, et le moment où il faut s'arrêter Une matinée, pas trois semaines
Mesurer l'existant, quinze minutes
Poids de la page d'accueil et de deux pages importantes. Notez les chiffres : ils serviront à savoir si l'effort a payé, et c'est la seule façon de ne pas s'en remettre à une impression.
Les cinq images les plus lourdes, une heure
L'onglet Réseau les classe par taille. Redimensionner et convertir ces cinq-là suffit souvent à ramener une page de 6 Mo sous les 2 Mo. C'est la moitié du bénéfice pour un vingtième du travail.
Les attributs, une heure
Dimensions déclarées partout, chargement différé sur tout sauf la première image visible. Si votre site utilise un gestionnaire de contenu, une extension le fait pour toutes les images d'un coup, à condition de vérifier ce qu'elle fait de l'image du haut.
Prendre l'habitude
Redimensionner avant de publier, systématiquement. Cinq minutes à chaque publication valent mieux qu'une journée de rattrapage deux fois par an, et la dette cesse de grossir.
Savoir s'arrêter
Une fois la page sous le méga-octet et l'affichage principal sous deux secondes et demie, arrêtez. Gagner les 200 derniers kilo-octets demande autant de travail que le premier méga-octet et ne se verra pas. Le temps restant est mieux employé à écrire une page de plus.
Mémo publié par NET&PRO à titre pédagogique. Information générale, sans garantie d'exactitude, d'exhaustivité ni d'actualité, et sans valeur de conseil personnalisé. Avertissement et limites d'usage
Dans le glossaire
Les mots croisés au fil de ce mémo, définis en une phrase. Ils sont soulignés dans le texte : un clic y mène directement.
Mémos liés
Le Frontend & UI/UX de A à Z
HTML, CSS, JS, frameworks, npm, API, design systems, accessibilité et tendances 2026 : du newbie à l'expert.
Lire le mémoChoisir son hébergement de A à Z
Cinq familles d'hébergement, ce qu'elles font tourner vraiment, ce qu'elles coûtent une fois toutes les lignes ajoutées.
Lire le mémoLe SEO de A à Z
Setup initial, routine récurrente, outils, veille et hacks : tout ce qu'il faut pour poser les fondations et maintenir la performance SEO.
Lire le mémoLe faire vous-même
C'est le seul chantier de performance qu'on peut mener seul du début à la fin sans rien comprendre au code du site. Cinq images redimensionnées suffisent souvent à diviser le poids d'une page par trois.
- Le temps réel : quinze minutes de mesure, une heure sur les cinq images les plus lourdes, une heure pour les attributs. Puis cinq minutes à chaque publication.
- Les outils gratuits : l'onglet Réseau de votre navigateur, qui classe les fichiers par taille, et n'importe quel outil de redimensionnement. Aucun logiciel payant n'est nécessaire.
- Le piège : appliquer le chargement différé à toutes les images, image principale comprise. Vous retardez précisément ce que Google mesure, et la page paraît plus lente après l'optimisation qu'avant.
Si vous préférez me le confier
Sur ce sujet, voici ce que je fais pour mes clients. Les formules disent ce qui est compris, ce qui ne l'est pas, et ce que ça coûte au bout de trois ans.