Optimiser le poids des images

Voici un guide pratique (rapide puis détaillé) pour réduire le poids de vos images dans WordPress tout en gardant une bonne qualité.

Les 5 “quick wins” (10 minutes)

  1. Activez la compression sur téléversement via un plugin: ShortPixel, Imagify, EWWW Image Optimizer ou Optimole (choisissez-en un).
  2. Convertissez automatiquement en WebP (et AVIF si possible) et servez le bon format selon le navigateur.
  3. Limitez la largeur maximale des images de contenu à ~1200–1600 px (suffisant pour la plupart des thèmes).
  4. Laissez le lazy‑loading par défaut, mais mettez l’image LCP (la grande image du “hero”) en “eager” pour éviter un LCP lent.
  5. Régénérez les miniatures après changement de thème ou de tailles: plugin “Regenerate Thumbnails”.

Avant l’import: règles d’or

  • Exportez vos visuels aux bonnes dimensions (pas d’images 4000 px pour une zone qui affiche 1200 px).
  • Utilisez des formats modernes:
    • Photos: WebP (qualité 70–82) ou AVIF (qualité 45–60) selon compatibilité.
    • Illustrations/PNG: WebP sans perte ou SVG optimisé (si autorisé et sécurisé).
  • Ciblez des poids réalistes:
    • Image de contenu: 60–150 Ko.
    • Image “hero”/plein écran: 150–300 Ko (max) selon la largeur d’affichage.
  • Nommez vos fichiers proprement (mot‑clé.jpg) pour le SEO.

Réglages WordPress à connaître

  • Réglages > Médias: adaptez les tailles “Vignette/Moyenne/Grande” à votre mise en page réelle.
  • Seuil des “grandes images”: WordPress limite par défaut la taille des originaux. Vous pouvez ajuster si besoin:
// functions.php (thème enfant ou Snippets)
add_filter('big_image_size_threshold', function(){ return 2560; }); // ou 1600
  • Responsive images: WordPress génère srcset/sizes. Assurez-vous que votre thème définit une largeur de contenu cohérente pour “servir des images adaptées”.

Plugins efficaces (un seul à la fois)

  • ShortPixel / Imagify / EWWW Image Optimizer: compression + conversion WebP, nettoyage EXIF.
  • Optimole / Smush Pro CDN / Bunny Optimizer / ImageKit: optimisation côté CDN (redimensionnement à la volée, WebP/AVIF, lazy, retina).
  • Perfmatters / WP Rocket: préchargement/priorité de l’image LCP, désactivation du lazy sur la première image, “delay JS”.

Paramètres conseillés (exemple type):

  • Qualité WebP: 75–82 (photo) ; Lossless pour icônes/illustrations.
  • Redimensionnement auto à l’upload: 1600 px max (côté long).
  • Convertir et servir WebP/AVIF avec fallback JPEG/PNG.

Lazy‑load et LCP (performance Core Web Vitals)

  • Laissez le lazy‑load sur la majorité des images.
  • Excluez l’image LCP (souvent la première image visible):
    • via votre plugin de performance (option “Exclude first image from lazy‑load”),
    • ou avec un filtre:
add_filter('wp_lazy_loading_enabled', function($default, $tag, $context){
  if ($tag === 'img' && $context === 'the_content') {
    static $i = 0; $i++;
    if ($i === 1) return false; // 1ère image non lazy
  }
  return $default;
}, 10, 3);
  • Ajoutez fetchpriority="high" à l’image LCP (via Perfmatters/WP Rocket ou un hook), et gardez les attributs width/height pour éviter le CLS.

Attention aux images d’arrière‑plan

  • Les images en CSS (background-image) échappent souvent aux optimisations automatiques.
  • Solution: utilisez des blocs/éléments qui insèrent des balises <img> quand c’est possible (meilleure prise en charge srcset/lazy).
  • Sinon, uploadez une version déjà optimisée (dimensions/poids) et servez différents arrière‑plans selon la largeur via media queries.

Nettoyer les tailles inutiles

Beaucoup de thèmes/plugins créent des tailles d’images dont vous n’avez pas besoin.

add_filter('intermediate_image_sizes_advanced', function($sizes){
  unset($sizes['medium_large'], $sizes['1536x1536'], $sizes['2048x2048']); // adaptez selon vos besoins
  return $sizes;
});

Après modification, régénérez les miniatures.

CDN d’images (option “plus” mais très efficace)

  • Cloudflare (Polish/Images), Bunny Optimizer, ImageKit, Cloudimage, Jetpack Site Accelerator.
  • Avantages: redimensionnement à la volée, formats modernes, cache edge. Configurez un “max width” (ex. 1600 px) et la conversion WebP/AVIF automatique.

Contrôle qualité et audit

  • Testez quelques pages dans PageSpeed Insights / Lighthouse.
  • Repérez l’image LCP: réduisez sa taille, servez-la en WebP/AVIF, pas de lazy, fetchpriority="high".
  • Vérifiez “Serve des images au format moderne” et “Images correctement dimensionnées”.
  • Sur mobile, visez un total < 1,5 Mo pour la page, idéalement < 1 Mo.

Check‑list récapitulative

  • Formats: WebP/AVIF activés.
  • Dimensions: max 1200–1600 px pour le contenu, 1920–2560 px pour un hero pleine largeur.
  • Compression: qualité ~75 (photo).
  • Lazy‑load: oui, sauf l’image LCP (eager + fetchpriority).
  • Tailles inutiles: désactivées et miniatures régénérées.
  • CDN d’images: optionnel mais recommandé pour sites à trafic.

Si vous me donnez votre thème (ex. GeneratePress), la largeur de votre contenu et un lien vers une page type, je peux proposer des tailles exactes, un réglage plugin précis et un petit snippet pour l’image LCP.

Leçon Précédent
Retour à la/au Leçon
Chapitre Suivant