Sommaire
Pourquoi les images sont un enjeu clé de performance
Les images sont omniprésentes sur le web. Elles structurent les pages, illustrent les propos, renforcent l’identité visuelle… mais elles représentent aussi la majorité du poids des pages web.
Sur WordPress, une mauvaise gestion des images peut rapidement entraîner :
- des temps de chargement trop longs,
- une dégradation de l’expérience utilisateur,
- un impact négatif sur le référencement naturel (SEO),
- une consommation inutile de ressources serveur.
Dans la majorité des audits que nous réalisons chez Zetruc, les images figurent parmi les premiers leviers d’optimisation identifiés, souvent sans que cela soit visible à l’œil nu pour les utilisateurs.
Optimiser ses images, ce n’est donc pas un détail technique : c’est un levier direct de performance, d’accessibilité et d’éco-conception.
➡️ Testez notre outil d’audit sur votre site maintenant !
Comment WordPress gère les images
Lorsque vous téléversez une image dans WordPress, le CMS génère automatiquement plusieurs tailles à partir du fichier original.
Par défaut, on retrouve notamment :
- Thumbnail : 150×150 px
- Medium : 300×300 px
- Medium large : 768 px de large
- Large : 1024×1024 px
- 1536×1536 px
- 2048×2048 px
- Full : taille originale
Ce mécanisme permet à WordPress d’afficher la taille la plus adaptée selon le contexte, à condition que le thème et les templates soient correctement développés. En pratique, cela évite d’afficher une image de 4000 px de large dans une simple carte de blog… à condition de ne pas casser ce système.
Des extensions d’optimisation d’images peuvent ensuite intervenir pour :
- compresser les fichiers,
- générer des formats modernes,
- servir automatiquement la meilleure version possible selon le navigateur.
Dans la réalité des projets que nous accompagnons, ce mécanisme est pourtant souvent sous-exploité : thèmes sur-mesure mal configurés, builders qui contournent les tailles natives, ou images intégrées sans logique claire dès la contribution.
Étape 1 : penser l’optimisation dès la conception
Chez Zetruc, l’optimisation des images commence avant même d’écrire la première ligne de code, car corriger après coup coûte toujours plus cher que bien concevoir dès le départ.
Harmoniser les formats d’images
Lorsque plusieurs images sont destinées au même emplacement, elles doivent partager le même ratio et des dimensions cohérentes.
Mais surtout, en 2026, le format est crucial. Si le JPG a longtemps été roi, nous privilégions désormais les formats nouvelle génération comme le WebP ou l’AVIF, bien plus légers à qualité égale.
Supprimer le superflu (Green IT)
Chaque image a un coût environnemental. Le numérique représente 4 % des émissions mondiales de GES. Ajouter des visuels “pour décorer” peut nuire :
- au temps de chargement,
- à la lisibilité du contenu,
- à l’impact environnemental du site.
Moins d’images, mais mieux choisies, c’est souvent plus efficace.
Positionner intelligemment
Les images visibles dès l’arrivée sur la page ont un rôle critique. Celles situées plus bas peuvent être chargées plus tard sans impact sur l’expérience utilisateur. C’est là que le chargement différé prend tout son sens.
Étape 2 : les bonnes pratiques côté développement
Comprendre et optimiser le LCP
Le Largest Contentful Paint (LCP) mesure le temps d’affichage de l’élément principal visible à l’écran.
C’est typiquement sur ce point que nous intervenons lors de nos audits techniques chez Zetruc : une image LCP mal priorisée peut à elle seule faire chuter les performances perçues d’un site. Dans la majorité des cas, ce problème passe inaperçu tant que personne ne regarde précisément les Core Web Vitals.
Très souvent, il s’agit d’une image (hero, bannière, visuel principal).
Pour améliorer le LCP :
- l’image doit être correctement dimensionnée,
- son chargement doit être prioritaire.
Exemples de bonnes pratiques :
<link rel="preload" as="image" fetchpriority="high" href="/images/hero.jpg">
ou directement sur l’image :
<img src="/images/hero.jpg" fetchpriority="high" alt="">
Charger le reste des images en différé (lazy loading)
Le lazy loading consiste à charger les images uniquement lorsqu’elles entrent dans la zone visible de l’écran.
WordPress applique désormais cette technique nativement sur la majorité des images via :
loading="lazy"
C’est simple, efficace, et suffisant dans la majorité des cas. Pour des besoins plus avancés (contrôle précis, animations, compatibilité élargie), des bibliothèques JavaScript comme lazySizes peuvent être utilisées. Certains plugins de performance intègrent également cette fonctionnalité de manière transparente.
Éviter les décalages de mise en page (CLS)
Le Cumulative Layout Shift (CLS) mesure la stabilité visuelle d’une page. C’est un point que l’on identifie très rapidement lors des audits utilisateurs, car il génère une sensation de site “instable”, même lorsque le chargement est rapide.
Un CLS élevé donne cette impression désagréable de page qui “saute” pendant le chargement.
La règle est simple :
- toujours définir les dimensions des images,
- ou à défaut, leur ratio via le CSS (
aspect-ratio).
Cela permet au navigateur de réserver l’espace avant le chargement effectif de l’image
Étape 3 : architecture, outils et infrastructure
Limiter la génération inutile de miniatures
WordPress génère toutes les tailles d’image déclarées, même si elles ne sont jamais utilisées. Sur des sites volumineux ou des usines à sites, cela devient rapidement coûteux.
Pour certains projets, nous privilégions :
- la désactivation partielle des tailles inutiles,
- ou l’utilisation de services de génération d’images à la volée.
Cette approche permet :
- moins de stockage,
- moins de traitements inutiles,
- une meilleure maîtrise des performances.
Utiliser un CDN pour les images
Un CDN (Content Delivery Network) permet de servir les images depuis un serveur proche géographiquement de l’utilisateur.
Bénéfices immédiats :
- temps de chargement réduit,
- meilleure résilience,
- capacité à absorber les pics de trafic.
Certains CDN proposent également :
- le redimensionnement dynamique,
- la conversion automatique vers des formats optimisés,
- une compression intelligente.
Étape 4 : bien contribuer, un enjeu souvent sous-estimé
Même avec une excellente architecture, une mauvaise contribution peut ruiner les efforts d’optimisation.
Bonnes pratiques à respecter :
- ne pas téléverser des images surdimensionnées,
- privilégier le JPG pour les photos,
- utiliser le PNG uniquement en cas de transparence,
- rester en RGB, 72 dpi.
Un bon indicateur : viser un poids total de page inférieur à 2 Mo pour conserver de bonnes performances.
Accessibilité et RGAA 2025
Optimiser, c’est aussi inclure. La nouvelle réglementation RGAA 2025 impose une rigueur accrue sur les balises Alt (texte alternatif). Elles sont indispensables pour les lecteurs d’écran et pour le référencement Google Images.
Étape 5 : mesurer et améliorer après la mise en ligne
L’optimisation des images ne s’arrête pas une fois le site en ligne. Chaque ajout de contenu, chaque nouveau visuel ou mise à jour peut impacter la performance sans que cela soit immédiatement visible.
Il est donc essentiel de suivre régulièrement les indicateurs clés, notamment ceux directement liés aux images :
- LCP (Largest Contentful Paint), souvent associé à l’image principale de la page,
- CLS (Cumulative Layout Shift), lié aux dimensions et ratios des images,
- Poids des médias, formats utilisés et balises ALT.
Pour faciliter ce suivi, notre outil d’audit automatisé Ze Audit Web permet d’identifier rapidement les points de vigilance : images trop lourdes, problèmes de performance, manques SEO ou accessibilité. Il offre une vision claire pour détecter les régressions et prioriser les optimisations à effectuer.
Mesurer régulièrement, c’est s’assurer que les bonnes pratiques mises en place le restent dans le temps, et que votre site WordPress continue de performer durablement.
Illustration concrète
Sur un site récemment mis en ligne, l’application de ces bonnes pratiques, en particulier sur la gestion des images, a permis d’atteindre :
– un Largest Contentful Paint inférieur à 1 seconde,
– un CLS nul,
– un rendu visuel stable et rapide dès l’arrivée sur la page.
Ces résultats illustrent ce qu’il est possible d’obtenir lorsque l’optimisation des images est intégrée dès la conception du site.
Les performances présentées ci-dessus sont issues d’un audit réalisé au moment de la mise en production.
Les résultats peuvent évoluer dans le temps selon les contenus et services tiers utilisés.
Envie d’aller plus loin ?
Si vous souhaitez appliquer ces bonnes pratiques à votre site WordPress, ou vérifier si vos images pénalisent vos performances actuelles, la Team Zetruc (Reims, Troyes, Ajaccio, Genève) est là pour vous accompagner.
