Optimiser le réferencement des images

Voici un plan d’action clair pour optimiser les images dans WordPress sans sacrifier la qualité ni le SEO.

1) Réglages de base (à faire une fois)

  • Réglages > Médias: adaptez les tailles “Vignette/Moyenne/Grande” à votre mise en page (ex. contenu max 1200–1400 px).
  • Évitez d’uploader des originaux géants: exportez vos images à la bonne largeur (1600–1920 px pour un hero, 1200–1400 px pour le contenu).

2) Formats modernes et compression

  • Activez la conversion automatique en WebP (et AVIF si dispo). Plugins fiables: ShortPixel, Imagify, EWWW, Optimole, Bunny Optimizer, ImageKit. Utilisez-en un seul.
  • Réglages types:
    • Qualité photo WebP: 75–82
    • Redimensionnement auto à l’upload: long côté 1600 px
    • Nettoyage des métadonnées EXIF: oui (sauf si utile)
  • Poids cibles:
    • Image de contenu: 60–150 Ko
    • Hero/plein écran: 150–300 Ko (max), selon la largeur

3) Responsive et “images à la bonne taille”

  • WordPress génère srcset/sizes. Assurez-vous que le thème fixe une largeur de contenu cohérente.
  • Servez des images “scaled”: ne pas afficher un 2000 px dans un bloc à 800 px.
  • Pour les images de fond en CSS (background-image), chargez des versions déjà redimensionnées et compressez-les manuellement.

4) Lazy‑load et LCP (Core Web Vitals)

  • Gardez le lazy‑load par défaut sur toutes les images.
  • Excluez l’image LCP (la plus grande image visible au-dessus de la ligne de flottaison):
    • Via votre plugin de performance (Perfmatters, WP Rocket: “Exclude first image from lazy‑load”).
    • Ajoutez fetchpriority= »high » à l’image LCP et laissez width/height pour éviter le CLS.

5) Nettoyer les tailles inutiles

Beaucoup de thèmes/plugins créent trop de formats. Désactivez ceux que vous n’utilisez pas puis régénérez les miniatures.

  • Plugin: Regenerate Thumbnails.
  • Filtre (optionnel, à adapter):
add_filter('intermediate_image_sizes_advanced', function($sizes){
  unset($sizes['medium_large'], $sizes['1536x1536'], $sizes['2048x2048']);
  return $sizes;
});

6) CDN d’images (optionnel mais puissant)

  • Cloudflare Images/Polish, Bunny Optimizer, ImageKit, Jetpack Site Accelerator.
  • Avantages: resize à la volée, WebP/AVIF automatique, cache edge. Fixez un “max width” (ex. 1600 px).

7) Accessibilité et SEO

  • Renseignez des textes alternatifs pertinents (alt).
  • Nommez les fichiers proprement (mots‑clés séparés par tirets).
  • Évitez le texte dans les images; préférez du HTML + CSS.

8) Contrôles qualité

  • Testez vos pages avec PageSpeed Insights/Lighthouse: visez “Serve des images au format moderne” et “Images correctement dimensionnées” OK.
  • Sur mobile, gardez la page < 1–1,5 Mo total.
  • Ré-auditez après changement de thème ou de plugin.

9) Check‑list express

  • Conversion WebP/AVIF activée
  • Long côté à l’upload ≤ 1600–1920 px
  • Qualité ~75 (photo), lossless pour icônes
  • Lazy‑load partout sauf LCP (fetchpriority high)
  • Tailles inutiles désactivées + miniatures régénérées
  • CDN d’images si trafic important
Chapitre Précédent
Retour à la/au Leçon
Chapitre Suivant