Pourquoi la taille des images affecte votre référencement
Google mesure les Core Web Vitals pour évaluer l'expérience utilisateur. Le LCP (Largest Contentful Paint) - délai de chargement du plus grand élément visible - doit rester sous 2,5 secondes pour être jugé "bon". L'image principale d'une page est souvent l'élément LCP.
Une image de 3000 px affichée en 800 px dans le CSS pèse 4 fois trop lourd. PageSpeed Insights (outil gratuit de Google, très utilisé par les référenceurs français) le signale systématiquement comme "Taille des images incorrecte". Cette erreur fréquente plombe le score de performance des sites .fr.
La bonne pratique : servir l'image à la taille réellement affichée, en WebP, avec l'attribut width et height définis pour éviter le CLS (Cumulative Layout Shift).
Algorithmes de redimensionnement : choisir le bon
Quand vous réduisez les dimensions d'une image, plusieurs pixels sources se combinent en moins de pixels en sortie. C'est le rééchantillonnage.
Lanczos est la référence pour réduire des photographies. Il analyse une grande zone de pixels environnants et produit un résultat net avec peu d'aliasing. C'est l'algorithme par défaut de la plupart des outils professionnels.
Bicubique est légèrement plus rapide que Lanczos avec des résultats proches. C'est le mode par défaut de Photoshop dans "Taille de l'image". Excellent pour la grande majorité des cas.
Bilinéaire est plus rapide mais produit un résultat plus doux. Acceptable pour les miniatures de petite taille où la vitesse de traitement prime.
Plus proche voisin prend simplement le pixel le plus proche sans interpolation. Adapté au pixel art (qui doit conserver ses bords nets), totalement inadapté aux photographies.
La technique en plusieurs étapes pour les grandes réductions
Pour des réductions de plus de 50% des dimensions originales, réduire en une seule étape peut faire perdre des détails. La technique professionnelle consiste à réduire par paliers de 50% successifs.
Exemple : passer de 4000 px à 500 px (réduction de 87,5%) :
- 4000 px → 2000 px (50%)
- 2000 px → 1000 px (50%)
- 1000 px → 500 px (50%)
La plupart des outils modernes appliquent cette approche automatiquement. Si vous utilisez un outil basique qui ne le fait pas, les étapes manuelles donnent de meilleurs résultats.
Accentuation après redimensionnement
La réduction adoucit légèrement l'image. Un filtre d'accentuation (unsharp mask) après le redimensionnement redonne de la netteté :
- Rayon : 0,5 à 1 pixel pour les images web
- Quantité : 80 à 120%
- Seuil : 0 à 2 niveaux
Ces valeurs conviennent pour les images affichées entre 600 et 1200 pixels de large. Pour les grandes impressions, le rayon monte à 1-2 pixels.
Le format de sortie : WebP d'abord
Après redimensionnement, la conversion en WebP est l'étape suivante pour l'optimisation web. Le WebP produit des fichiers 25 à 35% plus légers que JPEG à qualité visuelle équivalente.
Le RGAA (Référentiel Général d'Amélioration de l'Accessibilité) français impose un attribut alt sur toutes les images informatives, quel que soit le format. Le redimensionnement et la conversion ne changent rien à cette obligation.
<img
src="photo.webp"
alt="Description précise du contenu de l'image"
width="800"
height="600"
loading="lazy"
>
L'attribut loading="lazy" différant le chargement des images hors de la vue initiale - sauf pour l'image LCP principale qui doit utiliser loading="eager" ou fetchpriority="high".
Agrandir : les limites réelles
L'agrandissement est le cas difficile. On ne peut pas inventer des détails qui n'existaient pas dans l'original. Chaque algorithme doit interpoler des pixels manquants.
Agrandissement traditionnel (bicubique) : Acceptable jusqu'à 120-150% des dimensions originales. Au-delà, le résultat devient visible ment flou.
Agrandissement par intelligence artificielle : Les outils comme Topaz Gigapixel ou Adobe Super Resolution utilisent des modèles entraînés sur des millions d'images pour halluciner des détails plausibles. Ils produisent des résultats acceptables jusqu'à 4x pour les photographies.
La limite réaliste : Pour agrandir sans dégradation visible, la règle pratique est de ne pas dépasser 150% sans recourir à l'IA. Au-delà, l'image source en plus haute résolution est la seule vraie solution.
Considérations JPEG : éviter la dégradation cumulative
Si votre source est un JPEG, chaque cycle ouverture-edition-sauvegarde-JPEG ajoute des artefacts de compression. Pour éviter cette accumulation :
- Redimensionnez depuis l'original en plus haute résolution disponible
- Travaillez en PNG pendant les étapes intermédiaires
- Exportez en JPEG ou WebP uniquement pour la version finale
La qualité de sortie recommandée pour le web :
- JPEG : 80-85% pour les photos, 90-95% pour les images avec texte
- WebP lossy : 75-80% (qualité perçue équivalente à JPEG 85%)
Règles pratiques pour les Core Web Vitals
Pour passer au vert dans PageSpeed Insights sur vos images :
- Servez les images aux dimensions exactes affichées (pas de redimensionnement CSS)
- Utilisez le format WebP pour toutes les images raster
- Déclarez
widthetheightsur toutes les balises<img>pour éviter le CLS - Utilisez
loading="lazy"pour les images sous la ligne de flottaison - Préchargez l'image LCP avec
<link rel="preload" as="image"> - Visez moins de 150 Ko pour l'image LCP principale