Optimisation d'image 101 : fichiers plus petits, pages plus nettes
Ouvrez l'onglet Réseau de votre navigateur sur presque tous les sites Web et vous verrez la même histoire : les images représentent la majorité du poids de la page. C’est également la victoire la plus simple en termes de performances Web. Vous n'avez pas besoin de refactoriser votre base de code : il vous suffit d'arrêter de diffuser des images plus grandes que nécessaire.
La vitesse des pages n'est pas une vanité. Il s'agit d'un facteur de classement Google confirmé via les Core Web Vitals, et la plus grande image à l'écran est généralement ce qui détermine votre score LCP (Largest Contentful Paint). Voici comment corriger correctement les images, dans l'ordre.
Étape 1 : Redimensionner avant de télécharger
L'erreur la plus courante consiste à diffuser une photo de 4 000 px directement depuis l'appareil photo d'un téléphone dans un emplacement de 800 px. Le navigateur télécharge tous ces pixels gaspillés, puis les réduit. Redimensionnez l'image à la taille la plus grande qu'elle affichera en premier : utilisez notre redimensionneur d'image gratuit. Cette étape réduit souvent la taille du fichier de 80 % ou plus.
Étape 2 : Compresser sans perte visible
Après le redimensionnement, compressez. La taille de la plupart des photos peut diminuer de 40 à 70 % sans perte de qualité perceptible, car JPEG et WebP suppriment les détails que l'œil enregistre à peine. Notre compresseur d'images vous permet de choisir le compromis qualité/taille et de prévisualiser le résultat avant de le télécharger.
Étape 3 : Utiliser des formats modernes
WebP offre la même qualité visuelle que les formats JPEG et PNG, pour une taille bien inférieure, et il est pris en charge par tous les navigateurs modernes. La documentation WebP de Google fait état de 25 à 35 % d'économies par rapport aux fichiers JPEG comparables. Convertissez vos fichiers avec JPG en WebP ou PNG en WebP. Si jamais vous avez besoin de revenir en arrière, WebP vers JPG s'en charge également.
Étape 4 : Choisissez le bon format pour le travail
- Photographies : WebP ou JPEG : excellente compression pour les images complexes.
- Logos, icônes, dessins au trait : SVG ou PNG : bords nets, transparence, petite taille pour les graphiques simples.
- Tout ce qui contient du texte : évitez le format JPEG, qui rend les bords nets flous ; utilisez PNG ou WebP.
Étape 5 : Aidez le navigateur à se charger intelligemment
Ajoutez les attributs largeur et hauteur afin que le navigateur réserve de l'espace et évite le changement de mise en page (la métrique CLS). Utilisez loading="lazy" sur les images situées en dessous de la ligne de flottaison afin qu'elles ne se chargent qu'en cas de besoin, et laissez votre image au-dessus de la ligne de flottaison la plus importante se charger avec impatience. Les bonnes pratiques en matière d'images mettent également l'accent sur le texte alt descriptif, ce qui est bon pour l'accessibilité et pour le classement dans Google Images.
Étape 6 : Proposer des tailles responsives
Un téléphone et un écran de 27 pouces ne devraient pas télécharger la même image. L'attribut srcset permet au navigateur de choisir la taille la plus appropriée pour chaque écran, afin que les utilisateurs mobiles ne soient pas punis avec des fichiers de la taille d'un ordinateur de bureau. Même un simple srcset de deux ou trois tailles peut réduire considérablement les données sur les appareils là où cela est le plus important. Si votre CMS ou framework propose des images réactives, activez la fonctionnalité : il s'agit de l'une des options les plus efficaces disponibles.
Étape 7 : Mesurer la victoire
Ne devinez pas : vérifiez. Exécutez votre page via le vérificateur de vitesse de page avant et après pour constater l'amélioration réelle du temps de chargement et des Core Web Vitals. Portez une attention particulière au Largest Contentful Paint (LCP) : si l'image de votre héros était le goulot d'étranglement, vous la verrez disparaître immédiatement.
Un workflow avant-après rapide
- Redimensionnez l'image à sa taille d'affichage réelle.
- Compressez-le et observez la qualité.
- Convertir en WebP.
- Ajoutez la largeur, la hauteur, l'alt et le chargement différé.
- Retestez la page et confirmez l'amélioration du LCP.
Exécutez cette boucle sur vos trois ou quatre images les plus lourdes et vous capturerez la grande majorité des gains de vitesse disponibles.
N'oubliez pas le référencement des images
Les images optimisées ne se chargent pas seulement plus rapidement : elles peuvent également générer du trafic. Les noms de fichiers descriptifs (« blue-running-shoes.webp » bat « IMG_4821.webp ») et un texte alternatif significatif vous aident à vous classer dans Google Images et rendent votre site accessible aux utilisateurs de lecteurs d'écran. Choisir le bon format est important ici aussi ; notre guide sur JPG vs PNG vs WebP vs SVG explique exactement quand utiliser chacun.
Résultat
Redimensionnez, compressez, convertissez en WebP, définissez les dimensions, chargez paresseusement et proposez des tailles réactives. Faites ces choses et la plupart des sites connaîtront leur plus grand gain de performances avec le moins d'effort : des pages plus rapides, des visiteurs plus satisfaits, une meilleure accessibilité et un coup de pouce mesurable dans les classements.
