Une belle image n’est pas forcément une image bien préparée pour le Web. Sur un site WordPress, un visuel importé directement depuis un appareil photo ou un outil de création peut être bien plus grand que l’espace où il apparaît. Le navigateur télécharge alors des données inutiles, surtout sur mobile. Pour optimiser les images WordPress, il faut traiter la chaîne complète : choix du visuel, dimensions, format, compression, affichage et contrôle après publication.
Repérer les images qui ralentissent vraiment la page
Avant de compresser toute la médiathèque, ouvrez une page représentative : accueil, page service, article ou fiche projet. Testez-la sur mobile avec PageSpeed Insights. Regardez les images signalées comme trop lourdes ou mal dimensionnées, puis repérez visuellement celle qui occupe la plus grande zone au chargement. Le rapport donne une piste, pas une liste de corrections à appliquer sans examen.
Vérifiez aussi le fichier réellement téléchargé dans l’onglet Réseau du navigateur. Une image affichée à quelques centaines de pixels n’a généralement pas besoin d’être servie depuis un original de plusieurs milliers de pixels. Mais une image nette sur écran haute densité demande parfois une variante plus grande que sa seule largeur CSS. L’objectif n’est donc pas un poids universel en kilo-octets : c’est le meilleur compromis entre rendu et transfert pour chaque emplacement.
Choisir les bonnes dimensions avant l’envoi
Partez de l’emplacement final. Une vignette de carte, une image au milieu d’un article et un visuel pleine largeur n’ont pas les mêmes besoins. Exportez un fichier dont les dimensions couvrent raisonnablement l’affichage prévu, sans conserver par défaut la taille maximale de l’original. Gardez une copie source séparée pour les recadrages futurs.
WordPress génère plusieurs tailles lors de l’import et peut fournir des variantes via srcset et sizes. Cela aide le navigateur à choisir le bon fichier selon l’écran. Ce mécanisme ne corrige toutefois pas un original déjà inutilement lourd, un visuel ajouté comme arrière-plan CSS ou un thème qui demande systématiquement la taille complète. La documentation WordPress sur les images adaptatives explique ce fonctionnement.
Vérifier quelle image WordPress envoie réellement
La médiathèque montre l’original, mais ce n’est pas forcément le fichier que télécharge un téléphone. Pour contrôler une page, ouvrez-la dans votre navigateur, puis affichez ses outils de développement et l’onglet Réseau. Rechargez la page avec cet onglet ouvert et filtrez les requêtes par images.
- Repérez l’image visible à l’écran : son nom, son URL et la taille transférée. Ne confondez pas cette taille avec celle de l’original affiché dans la médiathèque.
- Comparez la largeur du fichier téléchargé à la place qu’il occupe sur la page. Si une vignette de quelques centaines de pixels télécharge systématiquement un visuel immense, vérifiez la taille sélectionnée dans WordPress et les attributs
srcsetetsizes. - Refaites le contrôle dans une largeur mobile. Une image de fond Divi peut ne pas suivre le même mécanisme qu’un élément
<img>et doit être examinée séparément. - Si l’image est la plus grande dans la zone visible au chargement, notez si elle est chargée tôt ou retardée. Contrôlez ensuite la page dans PageSpeed Insights ; comparez à la mesure initiale à conditions proches.
Cette vérification évite de traiter toute la médiathèque lorsqu’une seule image de hero ou un mauvais choix de taille explique l’essentiel du problème sur une page commerciale. À l’inverse, un fichier déjà léger dans la médiathèque peut encore être servi de façon inefficace si le thème ou le constructeur demande la mauvaise variante.
JPEG, PNG, WebP ou AVIF : quel format utiliser ?
Pour une photographie, comparez une exportation JPEG de qualité maîtrisée avec un format moderne comme WebP ou AVIF. Pour un visuel avec transparence, PNG peut être nécessaire, mais WebP ou AVIF peuvent également convenir selon votre chaîne de production et les navigateurs visés. Un SVG est adapté à certaines illustrations vectorielles simples, à condition de maîtriser sa provenance et sa sécurité. Évitez de convertir automatiquement tous les fichiers sans vérifier le résultat : les aplats, les textes intégrés à une image et les détails fins ne réagissent pas de la même manière à la compression.
La bonne décision se prend à l’œil, sur les tailles réellement affichées. Comparez les contours, les dégradés et les zones de texte. Si la perte de qualité saute aux yeux, le gain de poids n’en vaut pas la peine. À l’inverse, un fichier plus léger qui reste visuellement fidèle est un bon candidat. Web.dev détaille les leviers de performance des images.
Un choix de format selon le rôle du visuel
| Visuel | Premier essai | Ce qu’il faut contrôler |
|---|---|---|
| Photo de projet ou portrait | JPEG ou WebP, puis AVIF si la chaîne du site le permet. | Rendu des détails, poids et variante réellement servie. |
| Capture d’écran avec du texte | PNG ou format moderne avec réglage préservant la netteté. | Lisibilité des lettres et des contours après compression. |
| Illustration avec transparence | PNG, WebP ou AVIF selon l’outil et le support du site. | Transparence, bords et rendu sur les fonds du thème. |
| Logo ou pictogramme vectoriel | SVG si la provenance et la sécurité sont maîtrisées. | Affichage, accessibilité et politique d’import WordPress. |
Il n’existe pas un format gagnant dans tous les cas. Faites un essai sur une image représentative avant de modifier des centaines de médias. Le gain de poids doit être mis en balance avec la qualité visuelle, la compatibilité et le temps de gestion supplémentaire.
Compresser sans dégrader : une méthode reproductible
- Conservez l’original hors de la médiathèque de production.
- Recadrez et redimensionnez pour l’usage prévu.
- Exportez deux versions avec des réglages de qualité différents, puis comparez-les à taille réelle.
- Chargez la meilleure version dans WordPress et sélectionnez la taille adaptée dans l’éditeur.
- Contrôlez la page publiée sur ordinateur et mobile, y compris le fichier effectivement demandé.
Pour une médiathèque déjà volumineuse, une extension de compression peut traiter les nouveaux imports et, selon ses fonctions, les anciens. Faites d’abord une sauvegarde exploitable du site WordPress et testez sur un petit lot. Certaines extensions conservent les originaux et permettent un retour arrière ; vérifiez ce point, ainsi que les limites de l’offre et le comportement avec votre hébergement. N’empilez pas plusieurs outils qui recompressent les mêmes fichiers.
Exemple réel : alléger l’illustration de cet article
Pour l’image à la une de cette page, j’ai comparé deux fichiers du même visuel, aux mêmes dimensions (1 672 × 941 pixels). L’export source en PNG pèse 1 466 452 octets ; la version JPEG retenue pèse 227 059 octets. Cela représente environ 85 % de données en moins pour ce fichier. Le rendu a été contrôlé visuellement après l’export.
| Version mesurée | Dimensions | Poids du fichier | Décision |
|---|---|---|---|
| Source PNG | 1 672 × 941 px | 1 466 452 octets | Conservée comme original de travail. |
| Export JPEG | 1 672 × 941 px | 227 059 octets | Retenu pour l’article après contrôle visuel. |
Cette comparaison porte sur le fichier, pas sur le temps de chargement mesuré chez un visiteur : WordPress peut ensuite générer des tailles intermédiaires et le navigateur ne télécharge pas toujours l’original. Elle ne prouve pas non plus que JPEG battra PNG, WebP ou AVIF pour toutes les images. Les photographies, captures avec texte et dessins à aplats réagissent différemment. La méthode transférable est de comparer un même visuel au même cadrage, puis de vérifier le fichier réellement servi sur la page.
Traiter l’image principale séparément
L’image visible dès l’ouverture de la page mérite une attention particulière. Si elle devient le plus grand élément affiché, elle peut peser fortement sur le Largest Contentful Paint (LCP). Ne lui appliquez pas machinalement le chargement différé réservé aux images situées plus bas. Assurez-vous qu’elle est découverte tôt et que sa variante n’est pas surdimensionnée. Le guide Web.dev sur l’optimisation du LCP explique pourquoi une image principale chargée tard peut ralentir l’affichage.
Dans Divi ou un autre constructeur, vérifiez si le visuel est un élément <img> ou un arrière-plan CSS. Le comportement de chargement et la découverte par Google ne sont pas identiques. Ne remplacez pas une image de fond sans examiner le design et la version mobile. Sur un site professionnel, ce sont souvent les visuels du hero et les cartes de projets qui méritent le premier passage.
Optimiser aussi la compréhension des images par Google
Un nom de fichier descriptif est plus utile que IMG_4827.jpg, mais il ne compense pas une page pauvre en contexte. Renseignez un texte alternatif qui décrit la fonction ou le contenu de l’image lorsqu’elle apporte une information. Pour un élément purement décoratif, un texte alternatif vide peut être préférable. Évitez les listes de mots-clés répétées dans chaque image : elles nuisent à la lecture et n’aident pas l’utilisateur.
Placez le visuel près du passage auquel il se rapporte. Quand c’est possible, utilisez un vrai élément image HTML et vérifiez qu’il n’est pas bloqué aux moteurs. Google précise ces points dans ses bonnes pratiques pour les images dans la recherche. L’optimisation SEO des images accompagne donc l’amélioration du contenu ; elle ne se réduit pas à installer un plugin.
Reprendre une médiathèque WordPress existante sans casser les pages
Sur un site déjà publié, l’objectif n’est pas de convertir tous les fichiers en une fois. Commencez par les pages qui reçoivent du trafic ou présentent un visuel particulièrement lourd. Notez pour chacune l’URL, le fichier réellement chargé, ses dimensions, son poids et son rôle dans la page. Cette liste évite de traiter au hasard des centaines de médias qui n’ont presque aucun effet.
- Conservez une sauvegarde exploitable. Vérifiez qu’elle inclut les fichiers médias et que vous savez restaurer une image ou la page concernée.
- Testez un petit échantillon. Remplacez une image principale, une capture et un visuel de carte avant de généraliser la méthode.
- Contrôlez les variantes. WordPress génère plusieurs tailles et peut servir une variante selon l’écran ; une conversion de l’original ne prouve pas que le visiteur reçoit le nouveau fichier.
- Vérifiez les pages et le cache. Comparez bureau et mobile, puis purgez le cache concerné avant la mesure de performance.
- Étendez par lots mesurables. Gardez la possibilité de revenir au fichier précédent si le cadrage, la netteté ou l’affichage se dégrade.
Sur Divi, inspectez aussi les images de fond des sections et des modules : elles ne se repèrent pas toujours dans la liste des balises image. Une image à la une peut également être affichée dans les cartes d’articles avec un cadrage différent de celui du haut de page. Le bon contrôle se fait sur les emplacements réels, pas seulement dans la médiathèque.
Quels contrôles après optimisation ?
- Le visuel reste net et correctement cadré sur mobile et ordinateur.
- La page sert une variante cohérente avec l’emplacement, plutôt que systématiquement l’original.
- L’image principale ne dépend pas d’un chargement différé inapproprié.
- Le texte alternatif est utile lorsqu’il y a une information à transmettre.
- Le test de performance est comparé à la mesure prise avant le changement, à conditions proches.
- La sauvegarde permet de restaurer les fichiers si un traitement en masse pose problème.
Évitez de modifier simultanément les images, le cache, les polices et le thème si vous cherchez à mesurer un effet. Une série de changements isolés permet de comprendre ce qui a réellement amélioré la page. Dans une démarche plus large, un audit SEO aide à hiérarchiser les corrections plutôt qu’à multiplier les micro-optimisations.
FAQ : images WordPress et performance
Faut-il installer une extension pour optimiser les images WordPress ?
Non. Vous pouvez redimensionner et compresser avant l’import, puis vérifier ce que WordPress livre sur la page. Une extension devient intéressante pour automatiser les nouveaux médias ou reprendre une médiathèque importante. Faites d’abord un essai sur quelques images, une sauvegarde et un contrôle du résultat : le nombre d’extensions n’est pas un indicateur de performance.
WebP ou AVIF garantit-il un site plus rapide ?
Non. Un format plus efficace peut réduire le poids transféré, mais il ne corrige ni des dimensions excessives, ni une image chargée trop tard, ni une section qui télécharge un fond disproportionné. Comparez la qualité, les octets réellement livrés et le comportement mobile avant de choisir le format final.
Quelle taille choisir pour une image à la une WordPress ?
Il n’existe pas une largeur universelle. Relevez d’abord la largeur d’affichage sur ordinateur et mobile, ainsi que le cadrage des cartes d’articles. Préparez ensuite un fichier suffisamment net pour ces usages, sans envoyer une image bien plus grande que nécessaire. Contrôlez les variantes srcset générées par WordPress et le fichier réellement téléchargé.
Changer le texte alternatif améliore-t-il la vitesse ?
Non. Le texte alternatif décrit l’image lorsqu’elle transmet une information ; il contribue à l’accessibilité et aide les moteurs à comprendre le visuel. La vitesse dépend notamment des dimensions, du poids transféré et de l’ordre de chargement. Une image décorative peut avoir un texte alternatif vide.
Faut-il remplacer toutes les anciennes images en une fois ?
Non. Commencez par les visuels des pages importantes et les fichiers les plus coûteux, sauvegardez les originaux, puis avancez par petits lots. Vérifiez à chaque étape les pages, le cadrage mobile, les variantes et le cache. Cette approche permet de mesurer le gain et de revenir en arrière si nécessaire.
Conclusion : optimiser les images qui comptent
Une bonne optimisation WordPress part de la page, pas du format à la mode : identifiez l’image qui pèse réellement, adaptez ses dimensions, choisissez un format à qualité égale et contrôlez ce que le navigateur reçoit. Traitez séparément l’image principale, puis reprenez les autres visuels par ordre d’impact. Une mesure avant/après, sur la même page et dans des conditions comparables, vaut mieux qu’une conversion massive impossible à attribuer.
Ressources pour aller plus loin
Sur ce site : sauvegarder un site WordPress avant une reprise de la médiathèque ; référencement naturel pour replacer la performance des images dans l’ensemble du SEO.
Documentation officielle : images adaptatives dans WordPress ; optimisation du LCP ; bonnes pratiques Google pour les images.
