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