Pourquoi les images pèsent-elles si lourd dans WordPress ?
WordPress génère automatiquement plusieurs variantes de chaque image uploadée dans la médiathèque. Par défaut, pour chaque fichier original, WordPress crée une miniature (150×150 px), une taille moyenne (300×300 px max), une grande taille (1 024×1 024 px max) et conserve l'original. Selon votre thème et vos plugins, des tailles supplémentaires peuvent être générées — il n'est pas rare qu'un thème ajoute 3 à 5 tailles personnalisées pour les en-têtes, les vignettes d'articles et les sliders.
Le résultat : uploader une photo de 5 Mo peut entraîner la création de 15 à 20 Mo de fichiers sur le serveur (original + 4 à 6 variantes). Multipliez par quelques centaines d'images sur un site actif, et le dossier wp-content/uploads devient rapidement un gouffre de stockage. Aucune compression automatique n'est appliquée par WordPress sur les fichiers originaux — seulement une légère compression JPEG à 82 % sur les tailles redimensionnées.
La conséquence sur les performances est directe. Une page qui charge des images non optimisées génère des fichiers de plusieurs mégaoctets à transférer vers le navigateur. Google PageSpeed Insights pénalise les pages avec des images non optimisées dans son score de performance, qui influence indirectement le référencement.
Comprimer avant d'uploader
L'optimisation la plus efficace se fait en amont : préparer les images correctement avant de les uploader dans la médiathèque. Deux paramètres à ajuster : le format et les dimensions.
Pour les photos (paysages, portraits, images de produits), le WebP est le meilleur choix depuis WordPress 5.8 qui le supporte nativement. Un WebP à 80 % de qualité est 25 à 35 % plus léger qu'un JPEG équivalent à qualité visuelle identique. Si vous devez supporter d'anciens navigateurs ou que votre thème affiche des problèmes avec le WebP, le JPEG à 80-85 % reste une bonne option.
Les dimensions méritent autant d'attention que le format. Uploader une photo de 4 000 × 3 000 px quand votre thème affiche les images d'articles en 1 200 × 800 px maximum est un gaspillage pur. WordPress réduit l'image à l'affichage, mais le fichier original de 4 000 px reste sur le serveur et est proposé en téléchargement si quelqu'un clique sur l'image. Redimensionner au préalable à 1 400-1 600 px de large (pour garder une marge pour les écrans Retina 2x) réduit la taille du fichier de 80 % par rapport à un original 4K.
Lazy loading et attribut loading='lazy'
Le lazy loading est une technique qui consiste à ne charger les images que lorsqu'elles sont sur le point d'entrer dans le viewport de l'utilisateur — c'est-à-dire quand il scrolle vers elles. Les images en bas de page ne sont pas chargées lors du chargement initial, ce qui accélère considérablement l'affichage de la partie visible.
WordPress intègre le lazy loading nativement depuis la version 5.5 (sortie en août 2020). L'attribut loading="lazy" est automatiquement ajouté à toutes les balises <img> générées par WordPress, à l'exception de la première image de la page. Cette exception est délibérée : la première image (souvent une image hero ou une vignette mise en avant) doit se charger immédiatement pour un bon score LCP.
Si votre thème utilise des images en background CSS plutôt que des balises <img>, le lazy loading natif ne s'applique pas. Dans ce cas, une solution JavaScript (Intersection Observer API) ou un plugin spécialisé est nécessaire. Les images de fond CSS sont un anti-pattern pour les images importantes — préférez les balises <img> avec un texte alternatif et la gestion native du lazy loading.
Core Web Vitals et images : LCP et CLS
Le LCP (Largest Contentful Paint) mesure le temps d'affichage du plus grand élément visible à l'écran lors du chargement de la page. Dans la grande majorité des sites, cet élément est une image — l'image hero, le slider principal, ou l'image d'un article en une. Un LCP supérieur à 2,5 secondes est considéré "à améliorer" par Google.
Pour améliorer le LCP d'une image, deux techniques sont efficaces. La première est le préchargement avec la balise <link rel="preload"> dans le <head> du document — elle indique au navigateur de télécharger l'image en priorité, avant même que le parseur HTML ne rencontre la balise <img>. La deuxième est l'attribut fetchpriority="high" directement sur la balise <img> de l'image hero — disponible depuis 2022 dans les navigateurs modernes.
Le CLS (Cumulative Layout Shift) mesure la stabilité visuelle de la page. Un CLS élevé signifie que des éléments de la page "sautent" pendant le chargement, ce qui est désagréable et source d'erreurs de clic. Pour les images, la cause principale du CLS est l'absence des attributs width et height sur les balises <img>. Sans ces attributs, le navigateur ne sait pas combien d'espace réserver avant que l'image soit chargée — il alloue 0 pixel, puis redessine la page quand l'image arrive. Toujours spécifier width et height sur chaque image, même si CSS redimensionne l'image ensuite.