Optimiser les images WordPress : la méthode

Vous avez téléversé douze photos de vos réalisations. À l'écran, tout est beau. Pourtant la page met du temps à s'afficher, et le visiteur impatient est déjà reparti. Le coupable n'est pas forcément l'hébergement ni le thème : regardez d'abord les images, envoyées telles qu'elles sortent de l'appareil photo ou du smartphone, bien plus grandes que la place qu'elles occupent sur la page.

Bonne nouvelle : optimiser les images est l'un des chantiers les plus accessibles d'un site WordPress. Il ne demande ni code ni compétence technique, seulement une méthode et quelques réglages. La voici, de l'avant-envoi jusqu'au rattrapage des images déjà en ligne.

Trois notions à ne pas confondre

« Image trop lourde » recouvre trois réalités différentes, qui se corrigent chacune à leur manière.

• Les dimensions : la largeur et la hauteur en pixels. Une photo de plusieurs milliers de pixels de large, affichée dans une colonne bien plus étroite, transporte des pixels que personne ne verra.
• Le poids : la taille du fichier en kilo-octets ou en mégaoctets. Il dépend des dimensions, du format et du niveau de compression. C'est ce que le visiteur télécharge.
• Le format : JPEG, PNG, WebP, AVIF, SVG. Chacun convient à un type d'image, et un mauvais choix alourdit le fichier sans rien apporter.

Ce que WordPress fait déjà pour vous

Le noyau de WordPress a intégré, version après version, plusieurs automatismes. À notre connaissance :

• depuis WordPress 4.4, plusieurs tailles d'une même image sont générées à l'envoi et le navigateur choisit la plus adaptée à l'écran (attributs srcset et sizes) ;
• depuis la version 5.3, une image de plus de 2560 pixels est ramenée à ce seuil ; l'original reste stocké sur le serveur ;
• depuis la version 5.5, le chargement différé (lazy loading) est natif : les images situées plus bas dans la page ne sont chargées qu'à l'approche de l'écran du visiteur ;
• WebP est accepté au téléversement depuis la version 5.8, et AVIF depuis la version 6.5 ;
• depuis la version 6.3, WordPress cherche à donner la priorité à l'image principale de la page.

Ces automatismes aident, mais ils ne remplacent pas votre travail. Ils ne corrigent ni une photo brute inutilement grande, ni un format mal choisi, ni des images ajoutées par un constructeur de pages qui contourne les réglages du noyau. Si vous débutez sur WordPress, commencez par WordPress pour débuter : le guide complet pour repérer la médiathèque et les réglages de base.

La méthode en cinq gestes, avant l'envoi

Le meilleur moment pour optimiser une image est celui d'avant le téléversement : le fichier ne pèsera jamais sur votre serveur ni sur vos visiteurs.

1. Repérez la largeur utile. Une image dans une colonne de texte n'a pas besoin de la largeur d'un bandeau pleine page. Regardez la place qu'elle occupera réellement sur votre site.
2. Redimensionnez. Ramenez l'image à cette largeur, en gardant une petite marge pour les écrans à forte densité de pixels. Le logiciel d'aperçu de votre ordinateur ou un éditeur d'images en ligne suffit.
3. Choisissez le format. JPEG, WebP ou AVIF pour une photo ; PNG pour un visuel à aplats ou à fond transparent ; un fichier vectoriel pour un logo. Une capture d'écran de texte se conserve mieux en PNG qu'en JPEG.
4. Compressez avec mesure. Affichez l'image avant et après en grand : si vous ne voyez pas de différence, la compression est bien dosée. Si des blocs ou du flou apparaissent sur un produit ou un visage, remontez la qualité.
5. Nommez le fichier et remplissez le texte alternatif. « escalier-chene-atelier.jpg » vaut mieux que « IMG_4821.jpg » (nom illustratif). Le texte alternatif décrit l'image pour les personnes qui ne la voient pas. Pour choisir quelles images publier, lisez Quelles images pour votre site internet ? et Bonnes photos pour son site professionnel.

Une précaution : si plusieurs personnes alimentent le site, expliquez-leur ces cinq gestes. Certains rôles ne peuvent pas téléverser d'images du tout, ce qui se règle dans Rôles WordPress : qui peut faire quoi ?.

Le chargement différé, avec une exception à connaître

Différer le chargement des images hors écran est une bonne idée. Le différer pour l'image principale, celle que le visiteur voit sans faire défiler la page, est une erreur : le navigateur retarde précisément ce que le visiteur attend de voir. Depuis WordPress 6.3, le noyau cherche à éviter ce piège, mais un thème, un constructeur de pages ou une extension d'optimisation peuvent l'appliquer à toutes les images sans distinction. Pour le vérifier, passez votre page d'accueil dans PageSpeed Insights : le rapport signale une image principale chargée tardivement. Notre guide PageSpeed Insights : lire le rapport explique comment lire ce signalement, et Core Web Vitals : comprendre et améliorer détaille l'indicateur d'affichage de l'élément principal.

Rattraper les images déjà en ligne

Votre médiathèque contient déjà des images brutes ? Pas question de les reprendre une à une. Le rattrapage se fait en lot, avec méthode :

• Sauvegardez d'abord. Une compression en masse modifie des fichiers. Voyez Sauvegarder son site WordPress correctement.
• Testez sur une copie. Un environnement de test WordPress évite de découvrir un problème d'affichage en production.
• Traitez en lot avec une extension de compression, qui peut aussi convertir la médiathèque existante en WebP ou AVIF, puis régénérer les miniatures si vous avez changé les tailles.
• Contrôlez les pages clés : accueil, pages services, page contact, une fiche produit. Cherchez images floues, logos déformés, éléments décalés.
• Vérifiez les images en arrière-plan. Celles définies par le thème ou un constructeur dans le style de la page peuvent échapper aux mécanismes du noyau : elles se traitent à part.

Choisir une extension d'optimisation : six critères

Vous n'avez pas besoin d'une extension pour bien faire, mais elle devient utile dès que vous devez traiter une médiathèque existante ou automatiser la conversion. Avant d'en installer une, comparez sur ces points, sans vous fier à un classement :

• Conservation de l'original : vous devez pouvoir revenir en arrière.
• Formats modernes avec repli : WebP ou AVIF pour les navigateurs qui les lisent, l'image d'origine pour les autres.
• Traitement en lot de la médiathèque existante, sans bloquer le site.
• Lieu du traitement : sur votre serveur ou via un service externe. Dans le second cas, vos images partent chez un tiers : lisez ses conditions (pas un conseil juridique, et pensez aux images où figurent des personnes).
• Réversibilité : désactiver l'extension ne doit pas laisser des pages cassées.
• Entretien : mises à jour régulières et compatibilité avec votre version de WordPress.

Autre point à vérifier : certains hébergeurs et extensions de cache proposent déjà la conversion des images. N'empilez pas deux outils qui font la même chose. Sur le poids global des extensions, voyez Combien d'extensions WordPress est-ce trop ? ; pour le cache, Mettre en place un cache WordPress efficace.

Six erreurs à éviter

• Téléverser la photo brute du smartphone « parce que WordPress s'occupe du reste ».
• Compresser à l'excès une photo de produit : le grain ou le flou fait perdre confiance dans l'offre.
• Convertir toute la médiathèque en WebP sans conserver les originaux.
• Différer le chargement de l'image du haut de page.
• Installer deux outils d'optimisation qui se marchent dessus.
• Lancer un traitement en lot sans sauvegarde préalable.

Mesurer sans se raconter d'histoires

Comparez la même page avant et après, avec le même outil, à plusieurs passages : les mesures varient d'un test à l'autre. Regardez surtout l'affichage de l'image principale et la stabilité de la page pendant le chargement. Le gain dépend de vos images de départ et de votre thème : personne ne peut vous en promettre un chiffré à l'avance, et une page plus légère n'assure pas à elle seule un meilleur classement. Si la lenteur persiste malgré des images propres, la cause est ailleurs : hébergement, thème, extensions, scripts tiers. Voyez Hébergement WordPress : comment bien choisir pour le premier point.

Exemple illustratif. Une fleuriste publie une galerie de bouquets composée de photos prises au smartphone et envoyées telles quelles. La page s'affiche lentement sur mobile. Elle redimensionne les photos à la largeur d'affichage, les exporte en WebP, renomme les fichiers, régénère les miniatures et vérifie que la photo du haut de page n'est pas différée. Elle compare ensuite la page avant et après dans PageSpeed Insights, sans attendre de résultat précis.

À lire aussi : Site WordPress lent : diagnostic en 8 étapes, Fiches produits WooCommerce : le SEO qui vend.