Comment réduire le poids des images sans perte de qualité visible

Les images sont souvent la partie la plus lourde d'une page web, et une seule photo non optimisée peut peser plus que tout le HTML, le CSS et le JavaScript de la page réunis. La bonne nouvelle, c'est que l'essentiel de ce poids est invisible : des pixels que personne ne voit et des détails que l'œil ne perçoit pas. Les supprimer accélère les pages, surtout sur téléphone et sur les connexions mobiles, sans rien enlever à leur apparence.

Réduire le poids des images se ramène à quatre choses : les bonnes dimensions, le bon format, une compression raisonnable et le bon comportement de chargement.

Commencez par repérer vos images les plus lourdes

Ouvrez les outils de développement de votre navigateur, allez dans l'onglet Réseau, filtrez sur « Img », rechargez la page et triez par taille. Les plus gros fichiers sont ceux qui offrent les plus grosses économies. L'outil de test de vitesse de Rudra lance Lighthouse sur la page et liste les audits en échec, dont les audits d'images (images surdimensionnées ou mal compressées, par exemple) lorsqu'ils s'appliquent. Lors des crawls de site complets, Rudra signale aussi les images sans attributs de largeur et de hauteur, ainsi que les pages qui chargent plus de dix images sans lazy loading.

Réduire le poids des images, étape par étape

1. Redimensionnez à la taille d'affichage

C'est en général le gain le plus important. Une photo de 4000 pixels de large affichée dans une colonne de 800 pixels transporte environ 25 fois plus de pixels que nécessaire. Trouvez la plus grande taille à laquelle l'image est réellement affichée (inspectez-la dans les outils de développement) et exportez-la à cette largeur, ou jusqu'au double pour garder de la netteté sur les écrans à haute densité. Réduire une image en CSS n'allège pas le téléchargement ; le fichier complet est tout de même envoyé.

2. Choisissez le bon format

• JPEG : photographies et images complexes, lorsqu'il vous faut une compatibilité maximale.
• PNG : images qui exigent une qualité sans perte ou de la transparence avec des contours nets, comme des captures d'écran d'interfaces ou des schémas comptant peu de couleurs. Le PNG est un mauvais choix pour les photos.
• WebP : pris en charge par tous les grands navigateurs actuels, et en général plus léger que le JPEG ou le PNG à qualité visuelle comparable. Il gère aussi la transparence et l'animation.
• AVIF : souvent encore plus léger que le WebP à qualité visuelle égale, et pris en charge par tous les grands navigateurs actuels, même si son encodage est plus lent.
• SVG : logos, icônes et illustrations simples. Format vectoriel, il reste net à toutes les tailles et se révèle souvent minuscule.
• La vidéo plutôt que le GIF : un GIF animé pèse en général plusieurs fois plus que le même extrait en vidéo MP4 ou WebM. Utilisez <video autoplay muted loop playsinline>.

3. Compressez, et vérifiez à l'œil

Les formats avec perte (JPEG, WebP, AVIF) permettent d'arbitrer entre poids du fichier et qualité. Pour les photos, un réglage de qualité compris entre 70 et 85 constitue un point de départ courant, qui donne souvent un rendu identique à l'original ; mais la bonne valeur dépend de l'image, alors comparez le résultat en taille réelle. Supprimez également les métadonnées, comme les informations sur l'appareil photo et la position GPS, qui alourdissent le fichier et peuvent en révéler plus que vous ne le souhaitez. Quelques outils utiles :

• Squoosh (dans le navigateur) : comparez côte à côte les formats et les niveaux de qualité, une image à la fois.
• ImageOptim (macOS) ou des outils de bureau similaires : glissez-y un dossier pour une optimisation avec ou sans perte.
• Ligne de commande : cwebp -q 80 photo.jpg -o photo.webp convertit en WebP ; magick photo.jpg -resize 1600x -quality 80 photo-1600.jpg redimensionne et recompresse avec ImageMagick.
• Dans une chaîne de build : des bibliothèques comme sharp (Node.js) peuvent redimensionner et convertir automatiquement chaque image au moment du build ou de l'envoi.

4. Servez des tailles différentes selon les écrans

Un téléphone ne devrait pas télécharger l'image prévue pour un grand écran d'ordinateur. Avec srcset et sizes, le navigateur choisit le plus petit fichier qui restera net :

<img src="hero-800.jpg" srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w" sizes="(min-width: 1024px) 800px, 100vw" width="1600" height="900" alt="Hikers crossing a ridge at sunrise">

srcset énumère les fichiers et leur largeur ; sizes indique au navigateur la largeur à laquelle l'image sera affichée (800 pixels sur les grands écrans, toute la largeur de la fenêtre sinon). Pour proposer des formats modernes avec une solution de repli, placez l'image dans un <picture> contenant un <source type="image/avif" srcset="..."> et un <source type="image/webp" srcset="..."> avant le <img> ; les navigateurs retiennent le premier format qu'ils prennent en charge.

5. Chargez en différé les images sous la ligne de flottaison, mais pas l'image principale

Ajoutez loading="lazy" aux images situées plus bas dans la page : le navigateur ne les récupérera que lorsque le visiteur s'en approchera en faisant défiler. Ne chargez pas en différé l'image principale du haut de page : c'est souvent l'élément Largest Contentful Paint, et la retarder donne une impression de lenteur. Pour cette image, envisagez fetchpriority="high" afin que le navigateur la récupère tôt.

6. Indiquez toujours la largeur et la hauteur

Les attributs de largeur et de hauteur permettent au navigateur de réserver le bon espace avant l'arrivée de l'image : le texte ne saute donc pas à son chargement, ce qui est une cause fréquente de décalage de mise en page (CLS). Renseignez-les avec les dimensions intrinsèques de l'image, et gardez des images fluides grâce à img { max-width: 100%; height: auto; } dans votre CSS.

7. Automatisez

L'optimisation manuelle ne survit pas au prochain envoi de fichier. Confiez-la à votre plateforme : WordPress génère plusieurs tailles de chaque image envoyée et ajoute srcset automatiquement, et des extensions d'optimisation peuvent y ajouter la compression et la conversion en WebP ou en AVIF ; le composant <Image> de Next.js redimensionne, convertit et charge en différé par défaut ; et les CDN d'images transforment les images à la volée à partir de paramètres d'URL. Associez le tout à de longues durées de cache pour les fichiers image, afin que les visiteurs qui reviennent ne les téléchargent pas de nouveau.

Les erreurs courantes

• Charger en différé l'image principale, ce qui retarde le contenu le plus important.
• Mettre en ligne des photos d'appareil ou de téléphone en pleine résolution et laisser le CSS les réduire.
• Enregistrer des photographies en PNG.
• Placer des images importantes en arrière-plan CSS, où le navigateur les découvre tardivement et où elles ne peuvent pas avoir de texte alternatif.
• Recompresser encore et encore un JPEG déjà compressé, ce qui ajoute à chaque fois des artefacts visibles.
• Oublier la largeur et la hauteur, et provoquer des décalages de mise en page.
• Trop compresser les photos de produits, jusqu'à faire disparaître le détail que les clients veulent voir.

Ce que les outils peuvent juger, et ce qui leur échappe

Les audits automatiques savent bien repérer les images plus grandes que leur taille d'affichage, l'absence de formats modernes ou de dimensions, et ils estiment l'économie possible. Ils ne peuvent pas vous dire si une image compressée reste d'une qualité suffisante pour son usage. Une illustration de blog supporte une forte compression ; une photo de produit ou une pièce de portfolio, pas forcément. Tranchez à l'œil.