Optimiser les images sur WordPress : poids, formats et chargement
Sur la plupart des sites WordPress, les images représentent la plus grosse part du poids des pages. C’est aussi le levier de performance le plus simple à actionner : pas besoin de toucher au code, juste de bonnes habitudes et, si besoin, une extension bien réglée.
1. Envoyer des images aux bonnes dimensions
Une photo sortie d’un appareil ou d’un téléphone mesure souvent plusieurs milliers de pixels de large et pèse plusieurs mégaoctets. Or ton thème l’affichera rarement à plus de 1 200 à 2 000 pixels de large, même en pleine largeur.
Avant l’envoi, redimensionne tes images à la taille maximale réellement utile. Pour connaître cette taille, inspecte la zone de contenu de ton thème : la largeur d’un article, celle d’une bannière pleine page. WordPress réduit déjà automatiquement les très grandes images à l’envoi et crée plusieurs tailles intermédiaires, mais partir d’un fichier raisonnable reste plus propre et économise de l’espace sur ton hébergement.
2. Compresser sans dégrader
La compression retire des informations que l’œil ne remarque pas. Deux familles :
- avec perte : gain important, quasiment invisible à un niveau modéré ; c’est le bon choix pour les photos ;
- sans perte : gain plus faible, qualité strictement identique ; utile pour les captures d’écran, logos et illustrations.
Tu peux compresser avant l’envoi avec un outil comme Squoosh, ou laisser une extension s’en charger à chaque ajout dans la médiathèque.
3. Choisir le bon format
| Format | Usage conseillé | À savoir |
|---|---|---|
| JPEG | Photos | Universel, bon point de départ |
| PNG | Logos, captures, transparence | Lourd pour des photos |
| WebP | Photos et illustrations | Nettement plus léger que JPEG à qualité égale, très bien pris en charge par les navigateurs |
| AVIF | Photos | Souvent encore plus léger que WebP, encodage plus lent |
| SVG | Logos, icônes | Vectoriel, à n’accepter que de sources sûres |
WordPress accepte l’envoi d’images WebP et AVIF dans la médiathèque, à condition que la bibliothèque d’images du serveur (Imagick ou GD) sache les traiter. Si l’envoi d’un AVIF échoue ou que les tailles intermédiaires ne sont pas générées, c’est en général le serveur qui ne les gère pas : demande à ton hébergeur. Tu trouveras l’information dans Outils > Santé du site, onglet Informations, dans la section consacrée à la gestion des médias.
4. Laisser WordPress servir la bonne taille (srcset)
Quand tu insères une image depuis la médiathèque, WordPress ajoute automatiquement les attributs srcset et sizes. Le navigateur choisit alors la version la plus adaptée à l’écran : un téléphone ne télécharge pas l’image prévue pour un grand moniteur. Ce mécanisme ne fonctionne que si l’image vient de la médiathèque ; une image collée par son URL ou ajoutée en arrière-plan CSS n’en profite pas.
5. Le chargement différé, mais pas partout
WordPress ajoute nativement l’attribut loading="lazy" aux images de contenu : celles situées plus bas dans la page ne sont chargées qu’à l’approche du défilement. C’est excellent pour le poids initial.
En revanche, l’image principale visible dès l’arrivée (bannière, image à la une en haut d’article) ne doit pas être différée : cela retarde son affichage et dégrade l’indicateur LCP, expliqué dans notre article sur les Core Web Vitals. WordPress essaie de ne pas appliquer le lazy loading aux premières images et peut ajouter un attribut de priorité, mais les constructeurs de pages, sliders et thèmes ne suivent pas toujours. Vérifie le code de ta page d’accueil et, si besoin, exclus cette image dans les réglages de ton extension de performance.
6. Les extensions d’optimisation
Elles automatisent compression et conversion, y compris sur les images déjà présentes dans ta médiathèque.
- Imagify : compression et conversion WebP/AVIF, réglages simples, quota gratuit limité puis offre payante.
- ShortPixel : plusieurs niveaux de compression, conversion WebP/AVIF, fonctionne par crédits.
- EWWW Image Optimizer : peut compresser directement sur ton serveur sans service externe, avec des options payantes en plus.
- Converter for Media : centré sur la conversion WebP (et AVIF en version premium), sert le format moderne aux navigateurs compatibles.
Les quotas et les fonctions incluses dans chaque version évoluent : vérifie sur la page officielle au moment de choisir. Une seule extension d’optimisation suffit ; en cumuler deux crée des conflits et des doublons de fichiers. Pense aussi à faire une sauvegarde avant de lancer une optimisation en masse, d’autant que certaines remplacent les originaux. Notre sélection des extensions vraiment utiles replace ce choix parmi les autres.
7. Le texte alternatif, pour l’accessibilité et le référencement
Le texte alternatif (champ « Texte alternatif » dans la médiathèque) décrit l’image pour les personnes qui utilisent un lecteur d’écran, et aide les moteurs de recherche à comprendre ce qu’elle montre.
- décris ce que l’image apporte, en une phrase courte : « Terrasse en bois composite au bord d’une piscine » plutôt que « image1 » ;
- n’empile pas de mots-clés ;
- laisse le champ vide pour une image purement décorative.
Les règles détaillées se trouvent dans notre guide sur l’accessibilité RGAA d’un site WordPress.
La routine en résumé
- Redimensionner avant l’envoi.
- Nommer le fichier de façon descriptive.
- Laisser une extension compresser et convertir.
- Insérer depuis la médiathèque pour profiter du srcset.
- Exclure l’image principale du chargement différé.
- Remplir le texte alternatif.
Cet article peut contenir des liens partenaires. Ils n'influencent jamais ce que nous écrivons.