Vous avez publié un article avec trois belles photos, vous ouvrez la page sur votre téléphone, et elle met quatre secondes à s’afficher. Dans la grande majorité des cas, le coupable est là, sous vos yeux : ce sont les images WordPress importées telles qu’elles sortent de l’appareil photo ou de la banque d’images, sans le moindre traitement. On va reprendre le problème dans l’ordre, avec la seule méthode qui compte : mesurer, redimensionner, convertir, revérifier. Aucune ligne de code, aucune manipulation risquée, et un résultat visible dès la première page traitée.
En bref
Une image importée en pleine résolution pèse souvent dix à trente fois le poids nécessaire à son affichage réel.
La première étape est de mesurer, avec PageSpeed Insights et l’inspecteur du navigateur, avant de toucher à quoi que ce soit.
Redimensionner à la largeur d’affichage réelle du thème apporte le plus gros gain, avant toute conversion de format.
Une extension de conversion en WebP et le chargement différé terminent le travail sur la médiathèque existante.
Résumer cet article avec une IA
ChatGPTPourquoi le poids des visuels décide de la vitesse de la page
Une page WordPress classique se compose de texte, de feuilles de style, de scripts et d’images. Les images WordPress y occupent presque toujours la première place en volume. Le texte pèse quelques dizaines de kilo-octets, les styles et les scripts quelques centaines. Une seule photographie sortie d’un appareil récent peut peser à elle seule plusieurs méga-octets, soit davantage que tout le reste de la page réuni. C’est cette disproportion qui explique qu’un site puisse être parfaitement bien construit et rester lent.
Le point de mesure que Google regarde en priorité s’appelle le plus grand élément affiché, le LCP. Sur un article, cet élément le plus grand est presque toujours l’image mise en avant. Tant qu’elle n’est pas chargée, le navigateur considère que la page n’est pas prête, et le chronomètre continue de tourner. Alléger cette seule image change donc directement la note obtenue.
Le sujet dépasse d’ailleurs la seule question du confort de lecture. Les robots qui parcourent le web pour le compte des moteurs et des assistants génératifs disposent d’un temps limité par site, et une page lente en consomme davantage. Nous avons détaillé ce mécanisme à propos de la navigation agentique et du score PageSpeed dédié aux agents, où la vitesse cesse d’être un simple critère de confort pour devenir une condition d’accès.
Une précision utile avant d’attaquer la manipulation. Alléger une image ne veut pas dire la dégrader visuellement. À l’écran, une photographie affichée sur 900 pixels de large ne montrera aucune différence entre un fichier de 3 méga-octets et un fichier de 120 kilo-octets correctement préparé. La totalité du poids supprimé correspond à des pixels que personne ne voit et à des données que l’appareil photo a enregistrées pour l’impression.
Repérer les images WordPress qui ralentissent réellement le site
Commencez par PageSpeed Insights, l’outil de mesure gratuit publié par Google. Collez l’adresse d’un de vos articles, lancez l’analyse, et descendez jusqu’à la section des recommandations. Deux lignes vous intéressent : celle qui parle de dimensionner correctement les images, et celle qui propose de servir des formats nouvelle génération. Chacune liste les fichiers concernés avec l’économie possible en kilo-octets.
Le deuxième relevé se fait directement dans le navigateur, et il est plus instructif encore. Sur votre page, faites un clic droit sur une image, choisissez d’inspecter l’élément, puis survolez l’adresse du fichier. Le navigateur affiche deux informations précieuses : la taille réelle du fichier en pixels, et la taille à laquelle il est affiché. Un fichier de 4032 pixels de large présenté dans un cadre de 780 pixels vous donne immédiatement l’ampleur du gaspillage.
Notez cette largeur d’affichage quelque part, car elle servira de référence à toutes vos images WordPress ensuite. Selon les thèmes, la zone de contenu d’un article fait généralement entre 700 et 1200 pixels de large. C’est votre plafond utile. Aucune image ne doit dépasser le double de sa largeur d’affichage, ce facteur deux servant uniquement à rester net sur les écrans à haute densité de pixels.
Un dernier repère avant de passer à l’action : regardez le poids affiché dans la médiathèque, colonne par colonne, en triant par taille de fichier. Les extensions d’optimisation ne sont pas nécessaires pour ce diagnostic. Vous verrez très vite si votre bibliothèque contient dix fichiers lourds ou trois cents, et cette réponse change complètement la méthode à employer ensuite.
Redimensionner avant l’envoi, l’étape qui apporte le plus gros gain
La correction la plus efficace est aussi la plus simple, et elle se fait avant l’import. Ouvrez l’image dans l’Aperçu de votre ordinateur ou dans n’importe quel outil de retouche en ligne, réglez la largeur sur la valeur relevée à l’étape précédente, et enregistrez en qualité 80 %. Une photographie de 5 méga-octets tombe couramment sous les 200 kilo-octets par cette seule opération, sans différence visible à l’écran.
Prenez l’habitude de le faire systématiquement pour tout nouvel envoi. WordPress génère bien plusieurs formats intermédiaires à l’import, mais il conserve aussi le fichier d’origine, et certains thèmes ou constructeurs de page vont chercher la version la plus grande sans prévenir. Envoyer un fichier déjà à la bonne taille supprime le problème à la racine plutôt que de compter sur le comportement du thème.
Pour la médiathèque déjà remplie, le redimensionnement manuel n’est évidemment pas tenable au-delà de quelques dizaines de fichiers. C’est là qu’une extension prend le relais, avec une fonction de traitement en masse qui parcourt la bibliothèque et régénère chaque fichier à une largeur maximale que vous définissez. Lancez ce traitement sur une nuit, sur un site dont la sauvegarde vient d’être vérifiée.
L’erreur classique à cette étape consiste à vouloir tout traiter d’un coup sur un hébergement mutualisé modeste. Le traitement en masse consomme beaucoup de ressources et peut faire tomber le site pendant quelques minutes. Traitez par lots de cent ou deux cents fichiers, en dehors des heures de trafic, et vérifiez le rendu de quelques pages entre chaque lot.
Convertir en WebP et activer le chargement différé
Le format WebP produit des fichiers nettement plus légers que le JPEG à qualité équivalente, et tous les navigateurs actuels l’affichent. C’est le format vers lequel converger pour vos images WordPress. La conversion se fait par extension : EWWW Image Optimizer, présent sur la plupart des sites que nous suivons, ShortPixel ou Imagify remplissent le même rôle. Le principe est identique dans les trois cas : l’extension crée une version WebP de chaque fichier et la sert automatiquement au visiteur, en gardant l’original en réserve.
Activez ensuite le chargement différé, souvent appelé lazy load dans les réglages. Cette option retarde le téléchargement des images situées plus bas dans la page jusqu’au moment où le visiteur y arrive vraiment. Sur un article qui porte huit visuels, seul le premier se charge à l’ouverture, ce qui allège considérablement le démarrage sans rien retirer au contenu.
Une exception mérite d’être connue, parce qu’elle produit l’effet inverse de celui recherché. L’image mise en avant, celle qui s’affiche en haut de l’article, ne doit surtout pas être différée : c’est précisément l’élément que le navigateur attend pour considérer la page prête. La plupart des extensions proposent d’exclure les premières images de la règle, et cette case mérite d’être cochée.
Profitez de cette passe pour remplir le texte alternatif de chaque visuel, ce champ qui décrit l’image en une phrase dans la médiathèque. Il sert d’abord aux personnes qui naviguent avec un lecteur d’écran, et il constitue la seule description exploitable du visuel par une machine. La question de savoir ce que les moteurs génératifs en font reste ouverte, comme le montrait notre suivi de la manière dont AI Overviews produit ses propres images sans créditer les sources.
Vérifier que le gain est réel après la conversion
Repassez la même page dans PageSpeed Insights, sur l’onglet mobile, et comparez le nouveau relevé au précédent. Les deux recommandations concernant les images doivent avoir disparu ou porter sur des économies devenues négligeables. Si elles persistent, l’extension sert probablement encore les fichiers d’origine, ce qui arrive quand un cache n’a pas été vidé après la conversion.
Contrôlez aussi le rendu visuel sur trois ou quatre pages différentes, dont votre page d’accueil et un article ancien. Une conversion mal réglée peut sortir des visuels au grain visible, notamment sur les captures d’écran contenant du texte fin. Dans ce cas, remontez la qualité de conversion à 85 ou 90 % dans les réglages de l’extension et relancez le traitement sur ces fichiers.
Un mot sur l’empilement d’extensions, qui finit toujours par poser problème. Une seule extension doit s’occuper des images. Deux outils qui convertissent en parallèle produisent des doublons dans le dossier des envois et des comportements incohérents selon les pages. Le sujet rejoint plus largement ce que vos extensions WordPress s’autorisent sans vraiment le dire, qui vaut d’être lu avant d’en installer une de plus.
Dernier réflexe, à prendre une fois par trimestre. Retriez la médiathèque par poids de fichier et regardez quelles images WordPress sont arrivées depuis votre dernier passage. Un site vivant reçoit régulièrement des visuels envoyés en vitesse, par vous ou par un tiers qui rédige, et le poids moyen remonte lentement. Ce contrôle prend cinq minutes, se note dans l’agenda comme n’importe quelle tâche de maintenance, et évite de refaire tout le chantier dans un an.
Continuez de progresser sur SEO Noobies.
[…] Commencez par les images, parce que c’est presque toujours là que se jouent vos Core Web Vitals, et le LCP en particulier. Une image de couverture servie en pleine résolution, non compressée, dans un format ancien, suffit à faire échouer la note à elle seule. Le trio qui règle la question tient en trois gestes : conversion au format WebP, dimensions réelles adaptées à l’affichage, et attribut de chargement différé sur tout ce qui se trouve sous la ligne de flottaison. C’est exactement le chantier détaillé dans notre guide sur le poids des images WordPress. […]