Optimiser les images de son site web : conseils de pro

L’optimisation d’images n’est pas une tâche secondaire qu’on accomplit à la va-vite. Dans cet article, nous vous offrons des conseils de pro pour optimiser vos images web et booster le référencement naturel. On y va ?

Optimisation des images : de quoi s’agit-il ?

Elles agrémentent le contenu web et laissent une bonne impression aux visiteurs…

Très souvent négligé, le référencement des images est aussi un atout pour améliorer la visibilité des pages web.

Optimiser ses images sur WordPress, Wix, Woocommerce ou autre consiste essentiellement à travailler sur certains aspects pour améliorer la performance des pages internet, et donner au coup de boost à leur SEO (pour référencement naturel).

Pourquoi optimiser les images de son site web ?

Lorsqu’elles sont trop lourdes, les images ralentissent le chargement des pages web.

Elles occupent plus d’espace de stockage et consomment davantage de bande passante pour s’afficher. Résultat : des temps de chargement allongés, ce qui peut frustrer les visiteurs.

Une page qui se charge rapidement, que ce soit sur ordinateur, smartphone ou tablette, améliore l’expérience utilisateur (UX, pour les initiés). Et un site agréable à parcourir retient mieux ses visiteurs, réduisant ainsi le « taux de rebond » (le pourcentage d’internautes quittant le site après une seule page).

Un point clé pour les moteurs de recherche !

Comme le montre ce graphique de Google (Source : Recherche Google/SOASTA, 2017), un temps de chargement trop long peut décourager les internautes, qui n’hésiteront pas à quitter votre site. 

Gardez en tête que la vitesse de chargement des pages web fait partie des critères de classement de Google de votre site dans ses résultats.

Sans compter qu’un site qui met du temps à charger peut négativement impacter négativement le crawl et l’indexation de vos Urls par les robots des moteurs de recherche (le fait que ces robots parcourent puis insèrent vos pages dans l’index).

Alors, puisqu’il est plus que recommandé d’agrémenter vos contenus textes avec des illustrations, des graphismes et des photos, mieux vaut optimiser chaque image au maximum sur vos pages web.

Comment optimiser les images pour le Web ?

Venons-en au cœur du sujet : pour améliorer au mieux ses images web, il faut veiller à un certain nombre de détails souvent négligés par les propriétaires de sites ou blogueurs débutants.

Voici les axes à surveiller pour avoir des images web au top.

1. Les dimensions et poids

1.1. Gestion de la taille des images d’une page web

Avant de les charger, redimensionnez-les avec des éditeurs d’images (tels que Paint, par exemple). Il faut en effet éviter d’uploader des images surdimensionnées : 3000px de large, c’est beaucoup de trop !

Tailles d’images recommandées pour un site web :

√ Images d’arrière-plan : une taille de 1600 x 900 pixels est souvent recommandée pour un bon équilibre entre qualité et performance.

√  Images en pleine largeur : une largeur d’au moins 1400 pixels est conseillée pour une bonne qualité visuelle. Une largeur de 2500 pixels peut être idéale pour un affichage en plein écran.

√ Images en demi-largeur : une largeur d’au moins 700 pixels est recommandée.

√ Images de bannière : une taille de 1920 x 1080 pixels est couramment utilisée pour un bon compromis entre qualité et performance.

√ Images de contenu : une largeur de 800 à 1200 pixels est souvent suffisante pour les articles de blog ou les produits.

1.2. Format d’images de site web

Voici les formats d’images les plus couramment utilisés sur le web en 2025 :

√ Le format JPEG (JPG) : Idéal pour les photos et les images complexes grâce à sa compression, mais il ne supporte pas la transparence. Il reste l’un des formats les plus populaires pour réduire la taille des fichiers tout en maintenant une qualité acceptable.

√ Le format PNG est plus adapté pour les petites images de haute définition telles que les logos, les icônes, les illustrations au fond transparent, etc.

√ GIF : utilisé pour les animations simples. Il supporte la transparence mais est limité à 256 couleurs, ce qui le rend moins adapté pour des images complexes.

√ AVIF (AV1 Image File Format) : format récent offrant une meilleure compression et qualité d’image que WebP ou JPEG. Il est particulièrement adapté aux images haute résolution.

√ HEIC (High Efficiency Image Coding) : Conçu pour une compression efficace avec une qualité élevée (souvent utilisé sur les appareils Apple.)

√ SVG (Scalable Vector Graphics) : Format vectoriel, il est idéal pour les logos, icônes et illustrations scalables. Il conserve une qualité optimale quelle que soit la taille d’affichage.

√ Le format WebP, quant à  lui, est un format d’images propre à Google permettant de conserver la qualité de l’image avec une forte réduction de poids.

Aujourd’hui, les navigateurs Web tels que Google Chrome, Opera, Microsoft Edge ou Mozilla Firefox prennent en charge WebP, qui est la solution la plus recommandée.

N’hésitez donc pas à vous en servir et utilisez un plugin d’optimisation d’image pour convertir les images en WebP lorsqu’elles sont affichées sur votre site Web. Pour WordPress, vous trouverez une liste ici.

1.3. Poids des images de site web

Les images de grande qualité ont plus de pixels et sont plus lourdes, cela va de soi. Et plus votre page web contient d’images, plus son poids augmente, ce qui ralentit son chargement. A noter que ce poids s’exprime en Octets, et peut être indiqué en Ko, Mo ou Go.

Ce qui est généralement recommandé en matière de gestion de poids des images de site internet :

√ Pour les photographies pro, essayez de les maintenir à moins de 100 Ko au maximum.

√ Pour les images illustratives ou icônes, visez 50 Ko ou moins.

√ Pour des bannières (images d’en-têtes de pages classiques ou d’articles de blog) : essayez de rester en dessous de 100 Ko.

1.4. Utilisation d’un CDN

Un CDN, ou « Content Delivery Network » (Réseau de Distribution de Contenu), est un ensemble de serveurs répartis dans le monde entier. L’objectif d’un CDN est de livrer le contenu de votre site web aux utilisateurs de la manière la plus rapide et efficace possible.​

Imaginons que votre site web est hébergé sur un serveur situé en France. Si un utilisateur en Australie souhaite accéder à votre site, la requête doit parcourir une longue distance, ce qui peut entraîner un temps de chargement plus lent. En utilisant un CDN (ceux-ci se commandent généralement via votre hébergeur), ces images sont distribuées depuis des serveurs proches de l’utilisateur.

Grâce à cela, vous pouvez aussi augmenter votre score sur PageSpeed ​​Insights et même améliorer les Web Core Vitals, si ceux-ci posent problème. 

Pour info, et sans trop rentrer dans la technique, ces derniers sont des signaux web essentiels indiquant la qualité de l’expérience utilisateur sur votre site. Vous pouvez les détecter en vous servant de la Google Search Console pour votre SEO.

2. Dénomination des images de site web

Parce que les robots de crawling ne savent décoder que des contenus de type texte, vos images ne réaliseront de bonnes performances SEO que si vous veillez aux aspects suivants :

2.1. Le nom du fichier

Ne chargez plus un fichier image sans le renommer, car les noms par défaut pénalisent le référencement. Renommez chaque image en ajoutant à « nom » le mot-clé principal, et au besoin, un mot-clé secondaire.

Utilisez des lettres, des chiffres et des traits d’union (pas de underscore), pour entre 8 à 16 caractères en moyenne.

Celle-ci sera alors mieux comprise et indexée par les robots d’indexation, avec, à la clé, un affichage dans Google Images…

2.2. Les attributs ALT ou la balise ALT

Destiné à fournir des renseignements supplémentaires sur les images, l’attribut ALT est métadonnée d’Alternative Textuelle.

Il doit – idéalement – contenir le mot-clé principal. En fait, c’est un contenu descriptif du contenu de l’image pour, notamment, les malvoyants.

L’intérêt est qu’il joue un grand rôle en matière deréférencement naturel sur les moteurs de recherche: il aide le moteur de recherche à mieux cerner le contenu de l’image et à améliorer sa compréhension sémantique de votre page internet.

De même, lorsque le chargement des images devient impossible, c’est l’attribut ALT de l’image qui s’affichera. L’internaute peut donc avoir une idée de ce que contient l’image qui ne s’est pas affichée.

On n’oublie surtout pas de le remplir, et en voici quelques exemples à suivre… ou à ne pas !

√ Mauvais (manquant) : pas de balise Alt

√ Mauvais (bourrage de mots clés) : < img src=”maison.jpg” alt=”maison domicile demeure foyer logis”/>

√ Bien : < img src=”maison.jpg” alt=”maison”/>

√ Top: < img src=”maison.jpg” alt=”maison dans les champs de blé”/>

2.3. La légende de votre image web

La légende d’une image précise le contexte dans lequel elle se situe. Les légendes optimisent l’expérience utilisateur.

Ajoutez-en à vos images dès que cela est pertinent (si vos images n’ont pas uniquement un rôle esthétique, mais décrivent bel et bien quelque chose : un graphique, une illustration de vos propos, etc)

3. Les sitemaps image

Puisque Google propose des supports pour les images, pensez à mettre en place un sitemap pour les images de votre site.

En plus d’aider les robots crawlers à comprendre la hiérarchie entre vos images, la création de sitemaps pour les images leur permet de faire correspondre chaque image avec le contenu textuel correspondant.

Faites valider vos sitemaps par le biais du compte Google Search Console lié à votre domaine. 

4. Relation image web et contenu

Pour vos internautes, mais aussi pour les robots d’indexation, chaque image ajoutée doit être en rapport avec le contenu textuel qui lui est le plus proche. 

Entretenir une telle cohérence entre les éléments contenus sur votre page impactera – positivement – son référencement (de manière relative, mais les petits ruisseaux font les grandes rivières !)

5. UX (expérience utilisateur)

Vous voulez voir vos images apparaître dans les recherches effectuées sur Google Images ? 

Adoptez une approche orientée vers le lecteur et son confort de lecture. Cherchez à lui offrir la meilleure expérience possible pour qu’il reste sur votre page web (pour Google, c’est ultra important !)

Placez vos images à des emplacements stratégiques et assurez-vous que vos images sont optimisées pour s’afficher sur smartphone, sur tablette comme sur ordinateur. 

Rien de plus ennuyeux qu’une image illisible sur mobile, n’est-ce pas ? Astuce : optez alors plutôt pour un format d’images carré au sein de votre contenu, qui s’affichera de manière entièrement responsive sur ces appareils.

6. « Pin it » Pinterest sur vos images

Vous avez de jolies photos de vos services, produits ? C’est dommage de vous passer de la large audience de Pinterest, pour toucher votre public-cible…

Alors n’hésitez pas à placer un bouton d’enregistrement Pinterest sur vos images, afin que les internautes puissent facilement les épingler (et les partager ensuite avec leur propre audience, c’est encore plus de visibilité !)

Si vous avez un site en WordPress, de nombreux plugins existent, ou d’autres méthodes encore. Je vous laisse découvrir les méthodes ici.

7. Le lazy loading

Le Lazy loading, c’est quoi ?

Lorsqu’une page Web est sollicitée, tous ses contenus se chargent par défaut. Cela dit, le temps de chargement varie en fonction du volume de ressources nécessaires à son affichage, telles que les fichiers CSS, JavaScript, images ou vidéos.

Avec le Lazy Loading (« chargement différé ») seuls les éléments visibles à l’écran sont chargés immédiatement. Les autres ressources (images, vidéos, scripts, etc.) se chargent progressivement, au fur et à mesure que l’utilisateur fait défiler la page… Ce qui permet d’accélérer le temps de chargement initial.

Comment le met-on en place, sur un site web ?

Cela demande généralement l’intervention d’un développeur, néanmoins, certaines extensions (plugs-in) existent aussi. Le plus connu pour les sites internet en WordPress est le freemium WP Rocket, et d’autres plug-ins dédiés sont disponibles pour Joomla, Magento ou Prestashop.

Les erreurs à éviter pour vos images web

Optimiser les images de son site web peut être une tâche fastidieuse. Voici une petite liste des erreurs les plus fréquemment commises. En voici quelques-unes :

√ La confusion entre le titre de l’image et l’attribut Alt et le fait de ne pas les nommer comme il faut

√ La compression excessive des images, ce qui affecte leur qualité

√ Un mauvais redimensionnement qui rend les images trop petites

√ Des images mal configurées pour les appareils mobiles, on en a parlé. Et hop, on déçoit les visiteurs, qui quittent votre site. 

Bonus : Où trouver des images libres de droits ?

S’il est important d’illustrer vos contenus textuels, il faut éviter de le faire avec des images protégées par des droits d’auteur. Pour ceux qui ne veulent pas prendre des photos eux-mêmes, sachez qu’il existe plusieurs banques d’images libres de droits.

Quelques sites pour en télécharger :

√ Pixabay

√ Unsplash

√ Canva

√ Pexels

√ Picjumbo

Conclusion

Les visuels ne jouent plus uniquement le rôle graphique ou esthétique sur les pages web.

Elles influencent également le référencement naturel de votre site web. En tant que tel, optimiser les fichiers images de son site web avant chaque publication doit devenir un réflexe.

Au départ, cela peut vous sembler chronophage… mais avec la pratique, vous allez acquérir des automatismes dans ce sens.

FAQ 

Vous n’avez pas eu le temps (l’envie de tout parcourir ? Voici les questions les + souvent posées par les internautes sur la gestion des images d’un site web.