Ce sont souvent les images qui pèsent le plus lourd sur une page web, c’est pourquoi il est essentiel de réduire au maximum leur poids afin de diminuer le temps de chargement. En effet, des images plus légères sont plus rapides à charger et à afficher. Cela améliore l’expérience utilisateur (UX) en proposant aux visiteurs un contenu rapidement accessible. Nous savons également que Google à tendance à valoriser les sites rapides et ont donc plus de chance d’être mieux positionnés dans les résultats de recherche ; mais c’est avant tout pour le confort des internautes qu’il est impératif d’améliorer les performances de son site WordPress.
Avec WordPress, vous pouvez très bien utilisez une extension pour gérer la compression d’images, et même de manière automatique, gratuitement ou avec une version premium. Vous avez par exemple l’extension Smush qui s’en occupe, ou encore ShortPixel, Imagify, EWWW, etc.
Mais vous pouvez également décider de le faire directement dans un outil comme Photoshop avant même d’importer vos images. Peut-être utilisez vous un logiciel de retouche d’images pour traiter vos photos, ou préférez simplement gérer complètement les réglages d’optimisation.
J’ai par exemple une cliente photographe qui avait besoin de régler l’exportation de ces fichiers afin d’avoir un meilleur rendu au niveau des couleurs de ses photographies en touchant au code colorimétrique. D’ailleurs elle a aussi une extension qui s’occupe de compresser les images dans WordPress, car l’un n’empêche par l’autre.
Un autre avantage de le faire directement dans Photoshop est que vous pouvez plus facilement choisir le format d’image, y compris le nouveau format WebP, plus léger à qualité égale, qui peut être une fonctionnalité premium ou limité dans les extensions. Ici, vous avez la main libre.
Vous pouvez évaluer le poids des images d’une page web avec l’outil d’analyse Pingdom Website Speed Test (https://tools.pingdom.com/).
Sur le site WordPress ci-dessous, on s’aperçoit que 42,6% du poids de la page concerne uniquement ses images, soit 734.80 Ko, et que la majorité des requêtes concernent ces images !
Avant même de se pencher sur la réduction du poids de vos fichiers, voyons quels sont les formats les plus adaptés pour enregistrer vos images.
Les formats d’image
Le choix du bon type d’image peut déjà faire gagner quelques précieux octets sur le poids du fichier. Alors, lequel choisir selon vos besoins ?
- JPEG – C’est le format le plus couramment utilisé. Il est particulièrement adapté aux photographies, aux images riches en détails et en couleurs, mais sans besoin de transparence. Il permet une bonne compression avec une qualité visuelle acceptable, à condition de bien régler le niveau de qualité.
- GIF – Ce format convient aux images simples, avec peu de couleurs ou de dégradés. Il est idéal pour les logos, pictogrammes ou les illustrations basiques. C’est aussi le format utilisé pour créer des animations légères (les fameux GIF animés). En revanche, il est peu efficace pour les photos ou les visuels complexes.
- PNG – Format sans perte, le PNG conserve une excellente qualité d’image, mais génère souvent des fichiers plus lourds. Il est surtout utile si vous avez besoin d’un fond transparent (y compris avec dégradés), ou pour des visuels nets comme des icônes, illustrations vectorielles ou éléments graphiques précis.
- WebP – Ce format moderne, développé par Google, combine les avantages du JPEG (compression efficace) et du PNG (transparence possible), tout en générant des fichiers plus légers. Il est parfaitement adapté au web, compatible avec tous les navigateurs récents, et pris en charge nativement par WordPress depuis la version 5.8. Idéal pour optimiser la vitesse de votre site sans sacrifier la qualité.
- AVIF – Format encore plus récent, basé sur le codec vidéo AV1. Il permet une compression très poussée tout en maintenant une qualité visuelle élevée. Il prend également en charge la transparence et les couleurs HDR. Toutefois, il est encore peu répandu dans les outils de création, et pas encore pleinement pris en charge par WordPress, ce qui en fait une option plutôt réservée aux utilisateurs avancés.
Choisir une taille d’image adaptée
Après le choix du bon format, il est important de définir une dimension à votre image la plus proche possible de la taille que vous aurez besoin pour son affichage sur le site. En effet, il n’est pas utile d’avoir une image de 1600 pixels si vous ne souhaitez l’afficher qu’en 300 pixels sur votre page ; le fichier sera alors inutilement lourd.
Vos images n’auront pas besoin d’être plus grande que la largeur maximale de l’écran, c.-à-d. autour de 1920 pixels (ou 2560 max.) pour les plus courants : https://fr.screenresolution.org/.
Pour ma part, je me limite à 2048 px au maximum.
Et si vous savez déjà qu’elle sera utilisée comme image de couverture d’un article ou au sein d’une page, 1600 ou 1200 px pourrait suffire, voire moins (800…).
Pensez-y lors du redimensionnement de vos images et de leur importation dans la bibliothèque de médias de WordPress.
Sachez aussi que lors de l’importation d’une image dans WordPress, celui-ci génère plusieurs copies dans des tailles différentes pour la même image. Vous pouvez alors sélectionner une taille plus adéquate parmi les variantes de l’image.
Les tailles par défaut des images peuvent être modifiées dans WordPress, dans Réglages > Médias.
Mais surtout vous pouvez en créer d’autres facilement avec l’extension Simple Image Sizes , ou directement dans le code avec la fonction add_image_size de WordPress, pour les plus doués.
Optimiser le poids de l’image dans Photoshop
Cette partie peut considérablement faire baisser la taille de votre fichier image suite aux réglages que vous effectuerez.
Enregistrer pour le Web
Si vous préférez ne pas utiliser de plugin supplémentaire sur votre site WordPress, vous pouvez optimiser vos images directement dans Photoshop au moment d’enregistrer vos fichiers. Ce logiciel de traitement d’image permet de le faire assez facilement. Après avoir retravaillé votre image et l’avoir mis dans la bonne dimension (Image > Taille de l’image…), vous pouvez jouer sur la qualité de celle-ci lors de l’enregistrement.
Selon votre version de Photoshop allez à :
- Fichier > Enregistrer pour le Web ;
- Fichier > Exportation > Enregistrer pour le Web (hérité).
…. Dans cette fenêtre, vous pourrez apercevoir l’image dans son état originale et son rendu après qu’elle aura été enregistrée, et comparer ces deux versions. Le type d’image (jpeg, png, gif…) peut être changé en haut à droite, dans le menu déroulant.
Pour le format JPEG, vous pouvez diminuer la qualité de l’image (en haut à droite), afin de réduire son poids ; la taille du fichier est visible en bas de chaque image en aperçu (attention de bien regarder la taille de l’image qui sera enregistrée dans ce format). Il n’est pas nécessaire d’aller au delà de 80 pour la qualité de l’image ; vous pouvez même, dans la majorité des cas descendre jusque 60 sans problème, et même parfois en dessous, après à vous de voir si cela ne dégrade pas trop l’aspect visuel.
Pour le format GIF, vous jouerez avec le nombre de couleurs (Couleurs) et l’onglet Aligner sur le Web (%). Trouvez le juste milieu entre la qualité et le poids du gif. Deux autres paramètres peuvent modifier le rendu final : l’option Transparence, à décocher si l’image n’en à pas besoin, et Entrelacé, à laisser décoché dans la plupart des cas. N’hésitez pas à regarder le nombre d’octets que vous obtenez selon ces options.
Le PNG est un format dit sans perte, l’image ne perd pas en qualité une fois enregistrée dans ce format (à la différence des deux précédents). Les seuls réglages qui peuvent modifier le poids sont, comme le gif, la Transparence, qui normalement est la raison d’être principale de ce format d’image (à laisser coché généralement), puis l’option Entrelacé.
L’objectif, vous l’aurez compris, est de réduire autant que possible le poids de vos images tout en conservant une qualité visuelle satisfaisante. À vous ensuite de trouver le bon compromis.
Vous avez également la possibilité d’afficher plusieurs formats d’image en même temps pour comparer leurs différents poids avant de faire votre choix. Pour cela sélectionnez le nombre de vignettes en haut à gauche de la fenêtre, et effectuez vos réglages sur chacune d’elle pour la comparaison.
Pour vous donner un ordre d’idée, la grande majorité de vos images (celles insérées dans vos pages et publications pour agrémenter vos propos) ne devraient pas faire plus de 80 Ko (maximum), même pour des tailles relativement élevées. Pour des images exceptionnellement grandes (des images en plein écran par exemple ou des photos volontairement en haute qualité), celles-ci pourront dépasser un peu, mais essayez tout de même de ne pas dépasser les 150 Ko ; sachant que pour ce type de visuels vous diminuerez la qualité en conséquence, ce qui n’est pas gênant dans ce cas.
Enregistrer au format WebP
Le format WebP est aujourd’hui fortement recommandé pour optimiser le poids des images sans compromettre leur qualité. Il permet généralement de réduire la taille des fichiers de 25 à 30 % par rapport aux formats JPEG ou PNG, tout en conservant un rendu visuel très satisfaisant. De plus, WordPress prend en charge nativement le format WebP depuis la version 5.8, ce qui le rend parfaitement compatible avec votre site.
Depuis les versions récentes de Photoshop, vous pouvez enregistrer une image au format WebP en passant par le menu :
Fichier > Enregistrer sous… (Maj+Ctrl+S), puis en choisissant WebP (*.WEBP) dans la liste des formats proposés.
À noter cependant : contrairement à l’option « Enregistrer pour le Web », cette méthode ne vous montre pas le poids final de l’image avant l’enregistrement. Vous devrez donc éventuellement comparer les fichiers une fois exportés pour ajuster vos réglages.
En complément, vous pouvez aussi utiliser des outils en ligne gratuits comme Squoosh, TinyPNG ou Convertio pour convertir ou compresser vos images en WebP de façon plus intuitive.
Donner un nom de fichier optimisé à l’enregistrement
Avant même d’importer vos images dans WordPress, pensez à renommer vos fichiers de manière claire et descriptive au moment de leur enregistrement dans Photoshop (ou après via votre explorateur de fichiers). Cela donne un contexte aux moteurs de recherche.
Évitez les noms par défaut qui n’apportent aucune information utile, comme :
- ❌
IMG_0245.jpg - ❌
photo1.png
Préférez des noms liés à votre contenu, avec des mots-clés simples, séparés par des tirets (-) :
- ✅ Pour un site animalier :
toucan-arc-en-ciel-perroquet.jpg - ✅ Pour une fleuriste :
bouquet-fleurs-pivoines-mariage.jpg - ✅ Pour un professionnel du bien-être :
carte-visite-coach-nutrition.jpg
Et pour le SEO de vos images ?
Réduire le poids de vos images et bien les nommer est déjà un excellent début, car cela améliore la performance de votre site — un critère pris en compte par Google.
Mais pour aller plus loin, vous penserez à optimiser les autres aspects de vos images pour votre référencement : attribut Alt (Texte Alternatif), contexte de publication, légende si nécessaire, etc.
Ces éléments contribueront à renforcer votre référencement naturel.