Comment optimiser les images de votre site : guide pratique

Les images représentent souvent une part importante du transfert et peuvent aussi affecter découverte, décodage, mise en page et Largest Contentful Paint. L’optimisation peut apporter des gains, mais aucune économie fixe ni effet de classement ne vaut pour chaque page. Voici un flux mesurable étape par étape.

Pourquoi l'optimisation des images est plus importante que jamais

Le rapport de poids de page du HTTP Archive montre que les images restent importantes sur de nombreuses pages, même si les médianes évoluent. Largest Contentful Paint (LCP) mesure le rendu du plus grand élément éligible du viewport ; il s’agit souvent, mais pas toujours, d’une image.

Les seuils LCP publiés par Google classent jusqu’à 2.5 secondes comme bon et plus de 4 comme mauvais, au 75e centile des visites. Le travail sur l’image peut déplacer une page quand la ressource LCP est le goulot, mais ne garantit seul ni validation des Core Web Vitals ni position de recherche.

Étape 1 : Choisir le bon format

Le choix du format peut fortement affecter taille et fonctions. La comparaison est qualitative, car les benchmarks dépendent de la source, de l’encodeur, des réglages et de la cible de qualité :

WebP est un candidat par défaut utile, pas une réponse universelle. Si pipeline et public acceptent AVIF, testez-le comme <source> antérieure avec repli WebP ou JPEG. Vous pouvez convertir JPG en WebP ou en AVIF avec Vizua ; le fichier est traité dans le navigateur et non envoyé à notre serveur.

Pour approfondir, consultez notre comparaison WebP vs AVIF et l’explication de la compression avec ou sans pertes.

Étape 2 : Redimensionner aux dimensions d'affichage réelles

Une photo de 4000 × 3000 pixels affichée à 800 × 600 contient bien plus de pixels que l’emplacement rendu n’en nécessite. Un écran responsive haute densité peut demander un candidat plus grand, mais envoyer l’original de l’appareil ajoute généralement transfert et décodage inutiles.

Le principe consiste à proposer des candidats proches de la taille et densité rendues. Utilisez srcset et sizes et tenez compte de largeur, densité, qualité, zoom et direction artistique plutôt que de figer un multiplicateur « Retina ».

Exemples de dimensions de départ à adapter à votre mise en page :

• Hero pleine largeur : partir du plus grand emplacement rendu, puis générer des candidats pour densités et ruptures pertinentes
• Image de contenu : correspondre à la colonne et à tout état responsive plus large
• Vignette : générer un candidat proche de chaque taille de carte au lieu de réutiliser le hero
• Avatar : considérer cercle ou carré affiché, densité et éventuelle vue détaillée

Utilisez le redimensionneur d’images de Vizua pour créer les candidats avant compression. Le gain dépend des pixels d’origine et de destination ; mesurez les fichiers.

Étape 3 : Compresser avec le bon niveau de qualité

Après choix du format et redimensionnement, réglez l’encodeur. Les échelles de qualité ne sont ni linéaires ni normalisées entre encodeurs ou formats. Une valeur plus basse échange généralement plus d’information contre moins d’octets avec pertes, mais taille et changement visuel doivent être mesurés sur la sortie.

Niveaux de qualité recommandés :

• JPEG : 75–85 peut être une plage de départ prudente pour les photos. Les échelles diffèrent ; inspectez la sortie.
• WebP : 75–80 est une plage de départ, pas l’équivalent garanti d’une valeur JPEG.
• AVIF : 60–75 peut servir de départ dans certains outils ; échelles et encodeurs diffèrent.
• PNG : essayez d’abord une compression sans pertes plus forte. Quantifier la palette à 256 entrées au plus peut économiser davantage, mais réduit les couleurs avec pertes et doit être inspecté.

Le compresseur JPEG de Vizua permet d’ajuster la qualité et d’examiner la sortie. Pour une méthode détaillée, voyez comment compresser sans perdre en qualité.

Étape 4 : Servir les images efficacement

Une bonne compression ne représente que la moitié du travail. La façon dont vous servez les images au navigateur est tout aussi importante pour les performances.

Définir les dimensions explicitement

Donnez à chaque <img> des valeurs intrinsèques exactes de width et height, ou réservez son emplacement par une règle volontaire. Le navigateur établit ainsi tôt le ratio. Cela réduit le mouvement lié à l’image, même si polices, contenu injecté, animations et styles erronés peuvent encore affecter le Cumulative Layout Shift (CLS).

Appliquer le lazy-loading aux images sous la ligne de flottaison

Envisagez loading="lazy" pour les images assez loin du viewport initial. Ne l’appliquez pas mécaniquement à l’image LCP probable ou au contenu immédiatement nécessaire. Heuristiques, carrousels, impression, défilement rapide et mises en page cachées exigent des tests.

Prioriser votre image hero

Ne différez pas l’image LCP probable. Envisagez fetchpriority="high" si la ressource mérite vraiment la bande passante initiale et rendez-la découvrable dans le HTML initial. N’attribuez pas largement la priorité ; confirmez dans une trace et les données terrain.

Utiliser les images responsives

srcset et sizes fournissent les candidats et décrivent l’emplacement attendu. Le navigateur considère viewport, densité, cache et implémentation. sizes doit correspondre à la vraie mise en page ; une valeur fausse peut choisir un candidat trop grand ou petit.

Étape 5 : auditer et mesurer régulièrement

L'optimisation n'est pas une tâche ponctuelle. Chaque nouvelle image ajoutée est une occasion de régression.

• PageSpeed Insights : lancez PageSpeed Insights sur des pages représentatives. Examinez séparément LCP terrain et labo puis les diagnostics actuels, sans dépendre d’une étiquette changeante.
• Réseau DevTools : triez les requêtes par taille et examinez les grandes images en contexte. Demandez si dimensions, format, compression, cache et priorité correspondent au rôle au lieu d’imposer une limite universelle en Ko.
• Automatiser : ajoutez l’optimisation au pipeline de build pour détecter les images surdimensionnées avant publication.

Liste de contrôle rapide

• Générer et comparer des variantes JPEG, WebP, AVIF, PNG ou SVG adaptées
• Redimensionner aux dimensions réelles d’affichage, sans dépasser le nécessaire
• Commencer par des réglages prudents, comparer octets et rendu ; ne pas égaler les chiffres de qualité entre formats
• Réserver un emplacement exact à chaque <img>, généralement avec width et height intrinsèques
• Envisager fetchpriority="high" pour l’image LCP probable, puis mesurer
• Différer les images hors écran adaptées ; tester défilement et mise en page
• Utiliser srcset/sizes pour la distribution responsive
• Définir les budgets de performance à partir de la page, du public et des données terrain
• Supprimer les métadonnées privées inutiles, mais conserver profils couleur ou données nécessaires — voir le guide EXIF et confidentialité
• Auditer régulièrement avec PageSpeed Insights

Questions fréquentes