Guide complet : Optimiser les images WordPress

Optimiser les images WordPress : le levier de performance n°1

Les images représentent en moyenne 50 à 70% du poids total d’une page WordPress. Sur les connexions mobiles au Sénégal (3G à 1-5 Mbps en moyenne), des images non optimisées rendent votre site inutilisable. Une page de 5 Mo met 8-10 secondes à charger en 3G. Après optimisation, la même page à 800 Ko charge en 2 secondes. Ce guide couvre toutes les techniques d’optimisation, du plus simple au plus avancé.

1. Dimensionner correctement avant l’upload

La première erreur : uploader une photo de 4000×3000 pixels (3-8 Mo) alors qu’elle s’affiche en 800×450 pixels sur votre page. WordPress génère des miniatures, mais stocké quand même l’original.

Dimensions recommandées

Redimensionner avant l’upload

Outils gratuits pour redimensionner :

• Squoosh.app (web) — glissez votre image, ajustez la taille et la qualité, exportez en WebP
• GIMP (logiciel gratuit) — Image → Échelle et taille de l’image
• Paint.NET (Windows) — Image → Redimensionner
• Sur mobile : l’app « Photo Compress » (Android) réduit les photos avant upload

2. Choisir le bon format d’image

Recommandation : utilisez WebP comme format principal. C’est le meilleur rapport qualité/poids/compatibilité en 2024.

3. Plugin d’optimisation automatique

ShortPixel (recommandé)

ShortPixel offre 100 crédits gratuits/mois et optimise automatiquement chaque image uploadée :

1. Installez ShortPixel Image Optimizer depuis Extensions → Ajouter
2. Créez un compte gratuit sur shortpixel.com pour obtenir votre clé API
3. Configuration recommandée :
   • Type de compression : Lossy (meilleur ratio, perte imperceptible)
   • Créer des versions WebP : Oui
   • Redimensionner les grandes images : Oui, largeur max 1920px
   • Supprimer les métadonnées EXIF : Oui (réduit le poids et protège la vie privée)
   • Optimiser les miniatures : Oui
4. Lancez l’optimisation en masse : Médias → Bulk ShortPixel

Alternatives

• Imagify — du même éditeur que WP Rocket. 20 Mo gratuits/mois. Interface simple
• Smush — optimisation illimitée en gratuit mais compression moins agressive. Pas de WebP gratuit
• EWWW Image Optimizer — compression locale (pas de cloud), bon pour la confidentialité des images

4. Servir les images en WebP

Avec un plugin (méthode simple)

ShortPixel, Imagify ou EWWW génèrent des versions WebP et les servent automatiquement via des règles .htaccess ou la balise <picture>.

Via .htaccess (sans plugin)

Si vous générez les WebP vous-même (avec un script ou cwebp) :

# Servir WebP si le navigateur le supporte et le fichier existe
<IfModule mod_rewrite.c>
  RewriteEngine On
  
  # Vérifier que le navigateur accepte WebP
  RewriteCond %{HTTP_ACCEPT} image/webp
  
  # Vérifier que le fichier WebP existe
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
  
  # Rediriger JPEG/PNG vers WebP
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

# Varier le cache selon l'en-tête Accept
<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

# Définir le type MIME correct
AddType image/webp .webp

Via la balise picture (contrôle total)

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Description" loading="lazy" 
    width="800" height="450">
</picture>

5. Lazy loading : ne charger que le visible

Le lazy loading retarde le chargement des images hors écran. WordPress l’activé nativement depuis la version 5.5 avec l’attribut loading="lazy".

Vérifier que le lazy loading fonctionne

Inspectez une image dans votre page (F12 → Éléments). Vous devriez voir :

<img src="photo.jpg" loading="lazy" width="800" height="450" alt="...">

Exclure les images au-dessus de la ligne de flottaison

L’image hero et le logo ne doivent PAS être en lazy loading — elles doivent charger immédiatement. WordPress 6.3+ gère automatiquement cela avec fetchpriority="high" sur la première image. Pour les versions antérieures :

// Désactiver le lazy loading sur la première image du contenu
add_filter('wp_img_tag_add_loading_attr', function($value, $image, $context) {
    static $count = 0;
    if ($context === 'the_content') {
        $count++;
        if ($count <= 1) return false; // Pas de lazy loading sur la 1ère image
    }
    return $value;
}, 10, 3);

6. Dimensions explicites : éviter le CLS

Le Cumulative Layout Shift (CLS) se produit quand les images chargent et poussent le contenu vers le bas. Pour l'éviter, spécifiez toujours width et height :

/* Permettre le responsive tout en réservant l'espace */
img {
  max-width: 100%;
  height: auto;
}

/* Ratio fixe pour les conteneurs d'images */
.image-container {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

WordPress ajoute automatiquement les attributs width et height aux images insérées via l'éditeur. Mais les images ajoutées manuellement dans les templates doivent les inclure explicitement.

7. CDN pour les images

Un CDN (Content Delivery Network) sert vos images depuis un serveur proche du visiteur. Pour un public en Afrique de l'Ouest :

• Cloudflare (gratuit) — activé automatiquement la mise en cache des images via ses points de présence africains (Lagos, Johannesburg)
• BunnyCDN (~1$/mois) — excellentes performances Afrique, point de présence à Johannesburg, tarification à l'usage

Activer la conversion WebP automatique sur Cloudflare

Si vous avez Cloudflare Pro (20$/mois) : Speed → Optimization → Image Optimization. Cloudflare convertit et sert automatiquement les WebP sans plugin WordPress.

8. Images responsives natives WordPress

WordPress génère automatiquement l'attribut srcset pour servir la bonne taille selon l'écran :

<img src="photo-1024x576.jpg"
     srcset="photo-300x169.jpg 300w,
             photo-768x432.jpg 768w,
             photo-1024x576.jpg 1024w,
             photo-1536x864.jpg 1536w"
     sizes="(max-width: 768px) 100vw, 
            (max-width: 1024px) 768px, 
            1024px"
     alt="Description"
     loading="lazy">

Pour que cela fonctionne correctement, vérifiez les tailles de miniatures dans Réglages → Médias :

• Miniature : 300 × 300 px (recadrage activé)
• Moyenne : 768 × 0 px (proportionnel)
• Grande : 1024 × 0 px (proportionnel)

Ajouter des tailles personnalisées

// Ajouter une taille optimisée pour les cartes de blog
add_action('after_setup_theme', function() {
    add_image_size('card-thumb', 400, 250, true);  // Recadrage
    add_image_size('hero-banner', 1920, 600, true); // Bannière
    add_image_size('square-sm', 300, 300, true);    // Carré petit
});

9. Optimisation en masse des images existantes

Si vous avez des centaines d'images non optimisées :

Avec ShortPixel

Allez dans Médias → Bulk ShortPixel et lancez l'optimisation. Le plugin traite toutes les images de la médiathèque. Comptez environ 1 seconde par image.

Avec WP-CLI (serveur dédié)

# Régénérer toutes les miniatures (si vous avez changé les tailles)
wp media regenerate --yes

# Lister les images non optimisées par taille
wp db query "SELECT ID, guid, 
  ROUND(LENGTH(post_content)/1024) as size_kb 
  FROM wp_posts 
  WHERE post_type='attachment' 
  AND post_mime_type LIKE 'image%' 
  ORDER BY LENGTH(post_content) DESC 
  LIMIT 20"

10. Checklist d'optimisation des images

• ☐ Redimensionner les images AVANT l'upload (max 1920px de large)
• ☐ Installer un plugin d'optimisation (ShortPixel ou Imagify)
• ☐ Activer la conversion WebP automatique
• ☐ Vérifier que le lazy loading fonctionne (inspecter le HTML)
• ☐ Ajouter width et height sur toutes les images
• ☐ Configurer les tailles de miniatures dans Réglages → Médias
• ☐ Lancer l'optimisation en masse sur les images existantes
• ☐ Tester la vitesse avec PageSpeed Insights (score mobile > 80)
• ☐ Activer un CDN (Cloudflare gratuit minimum)
• ☐ Supprimer les images inutilisées de la médiathèque (plugin Media Cleaner)

L'optimisation des images est le changement le plus impactant que vous puissiez faire pour la vitesse de votre site. Sur une connexion 3G typique au Sénégal, la différence entre un site avec des images optimisées et un site sans peut être de 3 à 15 secondes de temps de chargement. Testez votre score avant et après sur PageSpeed Insights pour mesurer l'amélioration.