Comment optimiser les images pour WordPress

Les images représentent presque toujours la part la plus lourde d'une page WordPress. Sur un site classique, elles comptent pour 50 à 80 % du poids total de la page, et il n'est pas rare qu'une seule image héros non optimisée pèse plus que tout le HTML, le CSS et le JavaScript réunis. Si votre site vous semble lent, les images sont la première chose à examiner. La bonne nouvelle, c'est que l'optimisation des images offre certains des gains de performance les plus importants et les plus simples à obtenir.

Pourquoi les images représentent le principal facteur de poids d'une page

Un appareil photo de smartphone moderne produit des photos de 3 à 8 Mo chacune. Si vous les téléversez directement dans WordPress sans aucun traitement, c'est ce que vos visiteurs devront télécharger. Multipliez cela par 5 à 10 images sur une page, et vous obtenez 30 à 80 Mo de données d'images, suffisant pour ralentir même les connexions rapides.

Le poids de la page influence directement le temps de chargement, qui à son tour affecte l'expérience utilisateur et le SEO. Google utilise la vitesse de chargement comme facteur de classement, et les Core Web Vitals (en particulier le Largest Contentful Paint) sont fortement influencés par la taille des images. Chaque kilo-octet économisé sur vos images se traduit par des temps de chargement plus rapides, des taux de rebond plus faibles et un meilleur classement dans les recherches.

Choisir le bon format d'image

Le format que vous choisissez pour chaque image peut faire une énorme différence dans la taille du fichier. Voici quand utiliser chaque format :

• WebP : le meilleur format polyvalent pour les images web aujourd'hui. WebP produit des fichiers 25 à 35 % plus petits que JPEG à qualité visuelle équivalente, et prend en charge la compression avec et sans perte, ainsi que la transparence. Tous les navigateurs modernes prennent en charge WebP (Chrome, Firefox, Safari 14+, Edge). Sauf si vous devez prendre en charge des navigateurs très anciens, WebP devrait être votre choix par défaut.
• AVIF : le format le plus récent, offrant des fichiers 20 à 30 % plus petits que WebP. AVIF produit d'excellents résultats avec des paramètres de qualité faibles, ce qui le rend idéal pour les grandes images héros où chaque kilo-octet compte. La prise en charge par les navigateurs progresse (Chrome, Firefox, Safari 16.4+), mais l'encodage est plus lent que pour WebP. Utilisez-le lorsque la compression maximale est essentielle et que vous pouvez vous permettre le temps d'encodage.
• JPEG : toujours le format le plus largement pris en charge et un choix solide pour les photographies. Utilisez des paramètres de qualité entre 80 et 85 % pour un bon équilibre entre taille de fichier et qualité visuelle. En dessous de 75 %, les artéfacts de compression deviennent perceptibles. Au-dessus de 90 %, l'amélioration de qualité est à peine visible mais l'augmentation de la taille du fichier est significative.
• PNG : n'utilisez PNG que lorsque vous avez besoin de transparence (logos, icônes avec arrière-plan transparent) ou d'une reproduction parfaite au pixel près (captures d'écran, diagrammes). Les fichiers PNG sont généralement 3 à 5 fois plus volumineux que les JPEG/WebP pour du contenu photographique. Si vous avez besoin de transparence avec des fichiers plus petits, envisagez plutôt WebP avec canal alpha.
• SVG : parfait pour les logos, icônes et illustrations simples. Les SVG sont vectoriels, ils s'adaptent à n'importe quelle taille sans perte de qualité et ne pèsent généralement que quelques kilo-octets. Ils peuvent également être stylisés avec du CSS. N'utilisez pas SVG pour les photographies.

Comprendre la compression d'images : avec perte ou sans perte

Il existe deux types fondamentaux de compression, et comprendre la différence vous aide à prendre de meilleures décisions d'optimisation :

La compression avec perte supprime les données d'image moins perceptibles à l'œil humain. Cela permet d'atteindre des taux de compression bien plus élevés (souvent 70 à 90 % de réduction) mais le processus est irréversible. Vous ne pouvez pas récupérer la qualité d'origine. Pour les images web, la compression avec perte au bon niveau de qualité est presque toujours le bon choix, car les économies de taille sont énormes et la différence de qualité est invisible aux distances de visualisation classiques.

La compression sans perte réduit la taille du fichier sans supprimer de données. L'image d'origine peut être parfaitement reconstruite. Le compromis est qu'elle n'atteint généralement que 10 à 30 % de réduction. Utilisez la compression sans perte pour des images où chaque pixel compte, comme la photographie de produits e-commerce avec zoom, l'imagerie médicale ou les captures d'écran de texte.

Pour la plupart des sites WordPress, un réglage de compression avec perte à 80-85 % de qualité offre un excellent équilibre. À ce niveau, la différence visuelle avec l'original est pratiquement indétectable, mais le fichier est généralement 60 à 75 % plus petit.

Dimensions d'image recommandées pour WordPress

Téléverser des images plus grandes que nécessaire gaspille de la bande passante et ralentit votre site. Voici des recommandations pratiques pour les tailles d'image WordPress courantes :

• Images héros pleine largeur : 1920 px de large suffisent pour la plupart des écrans. Aller jusqu'à 2560 px est raisonnable si vous souhaitez couvrir les écrans haute densité (Retina) en pleine largeur.
• Images mises en avant des articles : 1200 px de large couvrent la plupart des mises en page de thème et restent nettes sur les écrans Retina.
• Images dans le contenu des articles : adaptez-les à la largeur de la colonne de contenu de votre thème. Si votre zone de contenu fait 800 px de large, téléversez vos images à 1600 px (2x pour Retina).
• Miniatures et images d'archives : 600x400 px est une taille courante, mais vérifiez ce que votre thème utilise réellement.
• Images de produits WooCommerce : 800 à 1200 px sur le côté le plus long, selon que votre thème prend en charge le zoom ou non.

Inutile de téléverser une image de 6000 px alors qu'elle ne sera jamais affichée à plus de 1920 px. Redimensionnez avant le téléversement, ou utilisez une extension qui redimensionne au téléversement.

Tailles d'images WordPress et régénération

Lorsque vous téléversez une image, WordPress génère automatiquement plusieurs tailles : miniature (150x150), moyenne (300x300), moyenne_large (768 px de large) et grande (1024x1024). Votre thème et vos extensions peuvent enregistrer des tailles supplémentaires.

Vous pouvez voir et ajuster les tailles par défaut dans Réglages, puis Médias. Si vous modifiez ces dimensions après avoir téléversé des images, les miniatures existantes ne se mettront pas à jour automatiquement. Vous devez les régénérer avec une extension comme Regenerate Thumbnails ou via WP-CLI :

# Régénérer toutes les miniatures
wp media regenerate --yes

# Régénérer les miniatures pour une image spécifique
wp media regenerate 42

Si votre thème enregistre des tailles d'image personnalisées que vous utilisez rarement, ces tailles inutiles gaspillent de l'espace disque et du temps de traitement à chaque téléversement. Vous pouvez utiliser l'extension Stop Generating Unnecessary Thumbnails pour désactiver les tailles dont vous n'avez pas besoin.

Extensions d'optimisation d'images

Le moyen le plus simple d'optimiser les images dans WordPress est d'utiliser une extension dédiée qui les compresse automatiquement au téléversement. Voici les options les plus populaires :

• ShortPixel Image Optimizer : propose des modes de compression avec perte, glossy et sans perte. Inclut la conversion WebP et AVIF. Fonctionne via une API cloud, ce qui ne sollicite pas votre serveur. Le plan gratuit inclut 100 crédits par mois (un crédit par taille d'image générée). Le mode glossy est particulièrement bon, car il offre une qualité visuelle quasi sans perte avec des tailles de fichier de la compression avec perte.
• Imagify : développée par l'équipe à l'origine de WP Rocket. Propose les modes Normal (sans perte), Aggressive (avec perte) et Ultra (compression maximale). Inclut la conversion WebP et un outil d'optimisation en lot. L'interface est claire et facile à comprendre. Le plan gratuit inclut 20 Mo par mois.
• Smush : option gratuite populaire offrant une compression sans perte sans limite mensuelle. La version gratuite compresse les images jusqu'à 5 Mo et gère l'optimisation en lot pour 50 images à la fois. La version Pro ajoute la compression avec perte, la conversion WebP et la livraison via CDN.
• EWWW Image Optimizer : unique en ce qu'elle peut exécuter la compression localement sur votre serveur sans API externe. Bon choix pour les sites avec des préoccupations de confidentialité ou de gros volumes. Prend en charge la conversion WebP, le chargement différé et le redimensionnement automatique. Le mode basé sur API offre de meilleurs taux de compression.

Toutes ces extensions peuvent également optimiser les images téléversées avant leur installation. Recherchez la fonctionnalité « optimisation en lot » pour traiter votre médiathèque existante.

Convertir les images en WebP

Si vous servez encore des fichiers JPEG et PNG, la conversion en WebP est l'un des gains les plus faciles à obtenir. La plupart des extensions d'optimisation d'images intègrent la conversion WebP comme fonctionnalité native. Elles génèrent une version WebP en parallèle de l'original et la servent aux navigateurs qui la prennent en charge.

Pour une conversion WebP manuelle, vous pouvez utiliser des outils en ligne de commande :

# Convertir une seule image en WebP
cwebp -q 80 input.jpg -o output.webp

# Conversion en lot de tous les JPEG d'un dossier
for file in *.jpg; do cwebp -q 80 "$file" -o "${file%.jpg}.webp"; done

Pour servir des images WebP aux navigateurs compatibles tout en proposant un repli vers JPEG/PNG pour les anciens navigateurs, vous pouvez ajouter ce qui suit à votre fichier .htaccess :

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.+).(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}.webp -f
  RewriteRule (.+).(jpe?g|png)$ $1.$2.webp [T=image/webp,E=REQUEST_image]
</IfModule>

Chargement différé des images dans WordPress

Le chargement différé (lazy loading) retarde le chargement des images qui ne sont pas actuellement visibles dans la fenêtre du navigateur. Au lieu de télécharger toutes les images au premier chargement, le navigateur ne récupère les images que lorsque l'utilisateur fait défiler la page jusqu'à elles. Cela peut considérablement réduire le temps de chargement initial, en particulier sur les pages contenant de nombreuses images.

Depuis WordPress 5.5, la plateforme ajoute automatiquement loading="lazy" aux images. Ce chargement différé natif au niveau du navigateur est pris en charge par tous les navigateurs modernes et ne nécessite aucun JavaScript.

Voici quelques points importants à garder à l'esprit :

• Ne différez pas le chargement des images au-dessus de la ligne de flottaison : votre image héros, votre logo et toute image visible sans défilement doivent se charger immédiatement. Les charger en différé nuit en réalité aux performances car le navigateur retarde le chargement de contenu déjà visible. Depuis WordPress 5.9, la plateforme ignore automatiquement le chargement différé pour la première image de la page.
• Utilisez fetchpriority="high" pour les images héros : ajouter fetchpriority="high" à votre image la plus importante au-dessus de la ligne de flottaison indique au navigateur de prioriser son téléchargement. Cela peut améliorer significativement le score Largest Contentful Paint.
• Vérifiez que votre thème ne supprime pas le chargement différé : certains thèmes anciens ou constructeurs de pages retirent l'attribut loading. Examinez le code source de votre page pour confirmer sa présence.

Images responsives avec srcset

WordPress génère automatiquement les attributs srcset et sizes pour les images ajoutées via l'éditeur de contenu. Ces attributs indiquent au navigateur quelle taille d'image télécharger en fonction de la largeur de la fenêtre, de sorte qu'un utilisateur mobile télécharge une image plus petite qu'un utilisateur sur ordinateur.

Assurez-vous que votre thème ne supprime pas ce comportement. Une balise d'image responsive correctement configurée ressemble à ceci :

<img src="photo-1024.jpg"
     srcset="photo-300.jpg 300w, photo-768.jpg 768w, photo-1024.jpg 1024w, photo-1536.jpg 1536w"
     sizes="(max-width: 768px) 100vw, 800px"
     width="1024" height="768"
     loading="lazy"
     alt="Un texte alternatif descriptif" />

Si vous ajoutez des images via du code personnalisé ou un constructeur de pages, veillez à utiliser wp_get_attachment_image() au lieu d'écrire manuellement des balises <img>. Cette fonction inclut automatiquement les attributs srcset et sizes.

Utiliser un CDN pour la livraison des images

Un Content Delivery Network (CDN) stocke des copies de vos images sur des serveurs répartis dans le monde et les sert depuis l'emplacement le plus proche de chaque visiteur. Cela réduit la latence et accélère la livraison des images, en particulier pour les visiteurs éloignés de votre serveur d'hébergement.

Les options CDN populaires pour les images WordPress incluent :

• Cloudflare : le plan gratuit inclut un CDN avec couverture mondiale. Le plan Pro ajoute des fonctionnalités d'optimisation d'images comme Polish (compression automatique) et la conversion WebP.
• BunnyCDN : tarification abordable à l'utilisation avec d'excellentes performances. Inclut une fonctionnalité d'optimisation d'images appelée Bunny Optimizer qui gère le redimensionnement, la compression et la conversion WebP à la volée.
• KeyCDN : CDN convivial pour les développeurs avec des extensions d'intégration WordPress disponibles.

La plupart des extensions de cache (WP Rocket, LiteSpeed Cache, W3 Total Cache) incluent des paramètres d'intégration CDN qui rendent la configuration simple.

SEO des images : texte alternatif et noms de fichiers

L'optimisation des images ne concerne pas uniquement la taille des fichiers. De bonnes pratiques SEO aident vos images à apparaître dans Google Image Search, ce qui peut générer un trafic significatif :

• Texte alternatif : rédigez un texte alternatif descriptif pour chaque image. Cela aide les moteurs de recherche à comprendre le contenu de l'image et est essentiel pour l'accessibilité (lecteurs d'écran). Restez concis mais descriptif : « Chaussures de course rouges sur fond blanc » est meilleur que « chaussures » ou « IMG_4532 ».
• Noms de fichiers : renommez les fichiers d'images avant le téléversement. Utilisez des noms descriptifs avec tirets comme chaussures-course-rouges.jpg au lieu de DSC_0042.jpg. Les moteurs de recherche utilisent les noms de fichiers comme signal de classement pour la recherche d'images.
• Attributs title : moins importants pour le SEO que le texte alternatif, mais utiles pour fournir un contexte supplémentaire au survol dans certains navigateurs.
• Légendes : les légendes d'images sont lues plus fréquemment que le texte du corps par de nombreux visiteurs. Utilisez-les lorsqu'elles apportent de la valeur au contenu.

Vérifiez votre optimisation d'images avec InspectWP

Après avoir optimisé vos images, lancez une analyse InspectWP pour vérifier les résultats. InspectWP indique le nombre total d'images sur votre page et vous aide à identifier comment le nombre d'images et le poids de la page sont liés à vos métriques de performance globales. Utilisez la fonctionnalité de rapport automatique d'InspectWP pour surveiller votre optimisation d'images dans le temps et détecter toute régression après des mises à jour de contenu ou d'extensions.