Les images sont généralement l'élément le plus lourd d'une page, ce qui en fait le plus grand levier de vitesse que vous contrôlez. Réglez bien leurs dimensions et leur poids et les pages semblent instantanées. Ratez-les et vous échouez aux Core Web Vitals, aussi propre que soit votre code. Voici les cibles et le flux de travail pour les atteindre.
Cibles de dimensions
Accordez la taille en pixels de l'image à l'endroit où elle apparaît réellement. Guide approximatif :
- Bannière pleine largeur : 1600–2000 px de large couvrent la plupart des mises en page de bureau. Aller plus large aide rarement et coûte beaucoup d'octets.
- Photo dans le contenu : la largeur de votre colonne de contenu, couramment 800–1200 px.
- Vignette / image de carte : 300–500 px.
- Avatar / icône : 48–200 px à la taille d'affichage.
Servir une image de 4000 px dans un emplacement de 800 px signifie que le navigateur télécharge et décode 25× plus de pixels qu'il n'en montrera jamais. C'est du pur gaspillage — et décoder de grandes images saccade aussi le fil principal.
Cibles de poids
Les dimensions fixent le plafond ; la compression fixe le poids réel. Visez :
- Image de bannière : sous 200 Ko (idéalement 100–150 Ko).
- Photo dans le contenu : 80–150 Ko.
- Vignette : 10–30 Ko.
- Total des images par page : essayez de rester sous ~1 Mo pour toute la page.
Si une seule image dépasse ~300 Ko, traitez cela comme un bug à investiguer.
Pourquoi cela pilote les Core Web Vitals
Le Largest Contentful Paint (LCP) de Google mesure le temps avant l'affichage du plus grand élément à l'écran — et sur la plupart des pages, ce plus grand élément est une image (généralement la bannière). Une bannière lourde et surdimensionnée gonfle directement le LCP. Un bon LCP est sous 2,5 secondes ; une bannière obèse peut le dépasser à elle seule sur des connexions mobiles.
Deux autres gains liés aux images :
- Définissez les attributs de largeur et de hauteur pour que le navigateur réserve l'espace — cela protège votre score de Cumulative Layout Shift (CLS).
- Priorisez la bannière (ne différez pas le chargement de l'image LCP) et différez le chargement de tout ce qui est sous la ligne de flottaison.
Le flux en deux étapes
Étape 1 — redimensionner à la largeur d'affichage réelle. Utilisez le redimensionneur d'images pour ramener chaque image à la taille à laquelle elle apparaît. Verrouillage du format activé, réduction de haute qualité. À elle seule, cette étape allège souvent de 80 à 90 %.
Étape 2 — compresser. Passez les fichiers redimensionnés au compresseur d'images : qualité 75–85 pour les photos (visuellement sans perte), quantification 256 couleurs pour les PNG. Il ne produit jamais un fichier plus gros que l'original, gère les lots, et propose un plafond de largeur optionnel pour effectuer les deux étapes d'un coup. Pour les navigateurs modernes, convertir les photos en WebP extrait 25 à 35 % de plus.
Mesurez, ne devinez pas
Une fois vos images optimisées, confirmez que la page est bien devenue plus rapide. Le contrôle qualité de page d'IMG.DIY audite une URL en direct via Google PageSpeed Insights et rapporte le poids des images de la page pour repérer tout fichier encore trop lourd. Une réserve : le contrôle qualité de page nécessite une connexion Internet — contrairement aux outils d'image, il appelle l'API PageSpeed de Google, il ne peut donc pas fonctionner hors ligne. Utilisez-le après déploiement pour vérifier votre vrai LCP et votre budget d'images.
Privé par défaut
Les outils de redimensionnement, de compression et de conversion fonctionnent entièrement dans votre navigateur avec Canvas et WebAssembly — rien n'est téléversé, et après votre première visite ils sont mis en cache et marchent hors ligne. Vous pouvez préparer toutes les images d'un site sans connexion, puis lancer le contrôle qualité de page en ligne une fois la page publiée.
Récapitulatif rapide : dimensionnez correctement, compressez aux cibles de poids, priorisez la bannière pour le LCP, et vérifiez avec le contrôle qualité de page.