Table des matières
Le problème des dimensions des images
Le reproche formulé par PageSpeed
Vous analysez votre site avec PageSpeed Insights, l’outil de Google pour mesurer les performances techniques d’un site.
Et celui-ci vous dit :
Dimensionnez correctement les images
Diffusez des images de taille appropriée afin d’économiser des données mobiles et de réduire le temps de chargement.
Importez des images directement via la bibliothèque multimédia pour vous assurer que les tailles d’images requises sont disponibles. Ensuite, insérez-les depuis la bibliothèque multimédia ou utilisez le widget d’image pour vous assurer que les tailles d’images optimales sont utilisées (y compris celles pour les points d’arrêt réactifs). Évitez d’utiliser les images Full Size, sauf si les dimensions sont adéquates pour l’utilisation prévue.
Sur le constat, PageSpeed a raison. Je vois souvent sur des sites des images utilisées à des tailles délirantes.
Par exemple, une image de 2560 pixels de large par 2560 pixels de haut, est affichée à une taille de 500 x 500 pixels.
Cela revient à donner au navigateur ces instructions absurdes :
- télécharge une image 5 fois trop grande, gaspille bien du temps et de la bande passante !
- puis, redimensionne-la en 5 fois plus petit pour l’afficher, et gaspille encore un temps précieux !
- un temps pendant lequel chaque internaute va poireauter ou juste quitter la page.
Bref, l’enjeu est réel : les images sont souvent un des principaux facteurs qui ralentissent le chargement d’une page web.
Le problème des dimensions et la responsivité
Le problème du dimensionnement des images est compliqué.
En effet, une page web s’affiche sur des écrans de tailles très diverses.
Par exemple, sur ce site, les 10 résolutions d’écran les plus fréquentes qu’utilisent les visiteurs sont :
- 1920×1080
- 1536×864
- 1440×900
- 2560×1440
- 1366×768
- 1280×720
- 1920×890
- 393×852
- 390×844
- 393×873
Mais, il y en a des centaines d’autres.
Quand un site est responsive, il adapte la taille des contenus à celle de l’écran. Donc, il adapte aussi la taille des images.
Donc, quelle taille choisir, sachant que la taille finale d’affichage varie beaucoup ?
Voici la solution.
Comment bien définir la taille des images WordPress
Servir l’image dans sa taille maximale exacte
La meilleure pratique consiste à déterminer la taille maximale d’une image dans la plus grande résolution d’écran.
Pour cela, il faut ouvrir la page où cette image s’affiche, avec l’inspecteur du navigateur.
Par exemple, dans la copie d’écran ci-dessous, je vois que l’image de la porte s’affiche en 340 x 514 pixels :
Donc, j’ai intérêt à dimensionner mon image à cette taille exacte.
Sur WordPress, je vais donc l’afficher avec l’option Original size ou Taille originale.
Si la page s’affiche dans un écran à la même résolution que mon grand écran, l’image sera chargée telle quelle. Sans aucun temps consacré à la redimensionner.
Si la page s’affiche dans une résolution plus faible, elle sera redimensionnée sans perdre en qualité.
Ici, mon conseil contredit celui de Google PageSpeed. Qui a raison ? Moi bien sûr !
En effet, le conseil donné par PageSpeed – d’indiquer comme taille la taille d’une des vignettes – ne s’applique pas à bon nombre d’images insérées comme illustrations d’un article, d’un produit ou d’une page au sens de WordPress. Il s’applique correctement aux « images à la une », aux images de produit, et aux vignettes de type « Autres articles sur le même thème ». Donc Google a à moitié raison.
Les formats d’image de WordPress
Les tailles d’image par défaut
WordPress a pré-pensé le problème des dimensions des images.
Un site WordPress va, par défaut, générer pour chaque image une série de variantes dans d’autres dimensions. Ces variantes, on les appelle aussi « vignettes ».
Vous pouvez voir et modifier ces tailles standard de vignettes.
Pour cela, allez sur la page Réglages > Médias. Vous verrez ceci :
Vous constatez que 3 tailles d’images sont définies :
- Taille des miniatures. 150 x 150 (avec ou sans cadrage automatique)
- Taille moyenne. 300 x 300
- Grande taille. 1024 x 1024
Vous remarquez que ces formats ont la même largeur que leur hauteur. Ils sont donc carrés… pour des images d’origine qui ne le sont pas forcément.
Cela signifie qu’une image non-carrée sera automatiquement redimensionnée pour tenir dans un carré, sans devenir carrée. Sa plus grande dimension deviendra celle de la vignette.
Concrètement :
- une image de 600 pixels de large par 400 de haut, deviendra en taille moyenne une image de 300 x 200
- une image de 400 pixels de large par 600 de haut, deviendra en taille moyenne une image de 200 x 300
Pour compliquer un peu les choses, sachez que cette liste n’est pas complète. WordPress a une autre taille intermédiaire, « medium-large« , donc « moyen grand« .
Recalculer les vignettes
Si vous modifiez les tailles par défaut des vignettes, soyez conscient que ce changement ne s’appliquera qu’aux images chargées à partir de ce moment. Les vignettes des images existantes sur le site ne seront pas recalculées.
Pour régler ça, et générer toutes les vignettes des images existantes aux nouvelles dimensions, utilisez le plugin gratuit Regenerate Thumbnails ou un équivalent.
Utiliser les tailles au bon endroit dans le thème
Ensuite, vous pouvez utiliser ces formats aux endroits pertinents grâce aux réglages de votre thème. Par exemple, le thème Astra me laisse définir la taille des images à la une, la taille des images des « related posts », etc.
Comment fonctionne l’attribut srcset de la balise img
Voyons maintenant comme ces vignettes sont utilisées dans le code HTML d’une page web.
Les différentes vignettes (tailles) d’une même image sont fournies au navigateur par l’attribut srcset de la balise img.
Le code ressemble à ceci :
<img
src="image-300.jpg"
srcset="image-300.jpg 300w, image-768.jpg 768w, image-1024.jpg 1024w"
sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
>
Ce code se lit ainsi :
- la balise img commence par déclarer au navigateur qu’il va devoir afficher une image
- l’attribut srcset (source set, liste de sources) déclare que cette image existe en 3 versions.
- Chaque version est associée à une largeur d’écran.
- Cette largeur s’exprime avec l’unité « w », abrégé de width qui signifie largeur.
- Ici ces largeurs sont 300w, 768w, et 1024w. Concrètement « w » signifie « pixels de large ».
- l’attribut sizes indique la place que doit prendre l’image dans la largeur de l’écran. Ici :
- si l’écran fait moins de 768 pixels, l’image occupera toute la largeur. (100vw signifie 100 viewport width = la largeur total de l’écran.)
- si l’écran fait entre 769 et 1024, alors l’image fera 50 ou 33vw, soit 50 ou 33% de la largeur
Vous n’avez évidemment pas à coder ça à la main, WordPress s’en occupe ! Mais je vous l’explique pour que vous compreniez comment ça marche.
Avec ces instructions, le navigateur ne chargera que l’image la plus pertinente en fonction de l’écran. Donc, sur mobile, il téléchargera une petite version de l’image. Cela évitera de causer un problème de performance.
En effet, des images mal dimensionnées vont entraîner des mauvais scores de Core Web Vitals. Elles augmenteraient le FCP et le LCP comme le Speed Index.
En combinant de bonnes dimensions à un format de fichier moderne (webp ou avif), on diminuera l’impact des images sur le temps de chargement.
Besoin d’aide ?
Besoin d’aide ? Je peux vous aider à optimiser vos images :
Service d’optimisation des performances
