Optimisation des images pour le SEO : le guide des bonnes pratiques
Une seule photo mal préparée peut peser plus lourd que tout le texte d’une page. Résultat : un site qui se charge lentement, des visiteurs qui repartent avant même d’avoir lu votre message, et un référencement naturel qui en pâtit. Pourtant, les images restent indispensables pour donner vie à un magazine en ligne, illustrer une réalisation ou rendre un site institutionnel vivant et lisible.
La bonne nouvelle, c’est que l’optimisation des images repose sur quelques principes simples, applicables à tous les supports web. Voici les pratiques que nous mettons en œuvre chez A4 ÉDITIONS, agence de communication à Angers, pour des images qui servent à la fois vos lecteurs, votre visibilité et la sobriété de votre site.
Pourquoi optimiser ses images change tout
Le poids des images est l’un des premiers facteurs qui ralentissent un site. Or la vitesse de chargement influence directement l’expérience de navigation et le référencement : Google intègre la rapidité d’affichage parmi ses critères de classement, notamment à travers les Core Web Vitals, ces indicateurs qui mesurent la performance perçue d’une page.
Au-delà du moteur de recherche, une page rapide retient l’attention. Un internaute, comme un administré venu chercher une information sur le site de sa commune, n’attend pas qu’une bannière trop lourde finisse de s’afficher. Des images bien optimisées, ce sont donc des pages plus fluides, un meilleur confort de lecture et un message qui passe vraiment.
Choisir le bon format selon l'usage
Chaque format de fichier répond à un besoin précis. Bien le choisir, c’est obtenir la meilleure qualité au poids le plus faible.
- JPEG : le format de référence pour les photographies et les visuels riches en couleurs et en nuances. Il offre un bon compromis entre qualité et légèreté.
- PNG : à réserver aux images qui exigent un fond transparent ou des contours nets, comme un logo ou un pictogramme. Attention, il alourdit vite une photo.
- SVG : idéal pour les logos, icônes et illustrations vectorielles. Il reste net à toutes les tailles et pèse très peu.
- WebP et AVIF : ces formats modernes compressent bien plus efficacement que le JPEG ou le PNG, à qualité équivalente. Ils sont aujourd’hui pris en charge par la grande majorité des navigateurs et devraient être votre premier réflexe pour le web.
En pratique, partir sur le WebP pour vos photos et le SVG pour vos éléments graphiques permet déjà de réduire fortement le poids global d’une page.
Maîtriser les dimensions et le poids
Il faut distinguer deux notions souvent confondues. Les dimensions correspondent à la taille d’affichage en pixels (par exemple 1 600 × 900). Le poids correspond à l’espace que le fichier occupe sur le serveur, exprimé en kilo-octets.
L’erreur la plus fréquente consiste à téléverser une image bien plus grande que nécessaire, puis à la réduire visuellement par le code. Le navigateur télécharge alors un fichier énorme pour l’afficher tout petit. Le bon réflexe est d’exporter chaque image aux dimensions réelles auxquelles elle sera vue.
À titre de repère, visez un poids inférieur à 150 ko pour une grande image (bannière, visuel d’en-tête) et autour de 50 ko pour les illustrations courantes du corps de page. Ces valeurs restent indicatives et dépendent du rendu attendu, mais elles donnent un cap utile.
Pensez aussi aux images responsives : grâce à l’attribut srcset, le site peut servir une version adaptée à chaque écran, plus légère sur mobile que sur ordinateur. C’est l’un des leviers les plus efficaces pour la performance.
Compresser sans sacrifier la qualité
Compresser une image, c’est réduire son poids en supprimant les données superflues. Plusieurs outils gratuits font très bien le travail :
Squoosh et TinyPNG, en ligne, pour compresser et convertir une image en quelques secondes.
Sur un site WordPress, il existe une multitude d’extensions comme Imagify ou ShortPixel automatisent la compression et la conversion au format WebP à chaque ajout de média.
Le principe reste le même : tester plusieurs niveaux de compression et retenir le fichier le plus léger qui conserve une qualité satisfaisante. Une fois le bon réglage trouvé, vous pouvez l’appliquer à toutes les images du même type.
Nommer ses fichiers de façon descriptive
Le nom d’un fichier image est lu par les moteurs de recherche. Un intitulé du type IMG_4821.jpg ne leur apprend rien. Un nom clair et descriptif, en revanche, aide à comprendre le contenu du visuel et renforce le référencement.
Préférez donc un nom court, en minuscules, avec des tirets entre les mots et, lorsque c’est pertinent, votre mot-clé. Par exemple, mairie-angers-conseil-municipal.jpg plutôt qu’un code automatique. Évitez les accents et les caractères spéciaux, qui posent parfois problème en ligne.
Soigner la balise alt, pour le SEO et l'accessibilité
Le texte alternatif, ou balise alt, est une description de l’image inscrite dans le code de la page. Il remplit trois rôles essentiels. Il permet aux personnes utilisant un lecteur d’écran de savoir ce que représente l’image. Il s’affiche en remplacement du visuel si celui-ci ne se charge pas. Et il aide les moteurs de recherche à interpréter le contenu de l’image.
La règle est simple : décrire l’image de manière concise et fidèle, sans accumuler les mots-clés. Pour une photo, « Façade de l’hôtel de ville d’Angers au coucher du soleil » est bien plus utile qu’un simple « hôtel de ville ».
Ce point dépasse le seul confort de navigation. Pour une collectivité, l’accessibilité numérique est une obligation encadrée par le RGAA, le référentiel général d’amélioration de l’accessibilité. Des balises alt correctement renseignées sont l’un des fondements d’un site inclusif, ouvert à tous les usagers. C’est un sujet que nous traitons en profondeur dans notre accompagnement à l’accessibilité numérique et à la conformité RGAA.
Contexte, légende et chargement différé
Une image n’existe jamais seule sur une page. Pour bien la valoriser, placez-la près d’un texte en rapport avec son sujet : les moteurs s’appuient aussi sur le contenu environnant, les légendes et les titres pour en comprendre le sens.
Deux réglages techniques complètent l’ensemble. Le chargement différé (lazy loading) ne charge une image qu’au moment où l’internaute s’en approche, ce qui accélère l’affichage initial. Et le fait de préciser les dimensions de chaque image dans le code évite que la page ne « saute » pendant le chargement, un défaut pénalisé par les indicateurs de stabilité visuelle.
Des images plus légères, un site plus sobre
Optimiser ses images, c’est aussi un geste de sobriété numérique. Chaque fichier téléchargé consomme de l’énergie, du côté du serveur comme de l’appareil du visiteur. Des visuels allégés réduisent les données transférées, donc l’empreinte environnementale de votre site, tout en améliorant ses performances.
Performance, accessibilité et écoresponsabilité avancent ici dans le même sens. C’est la philosophie de notre démarche d’éco-conception web : un site plus rapide, plus inclusif et plus respectueux des ressources, sans rien retirer à la qualité de votre communication.
En résumé
Optimiser ses images repose sur une chaîne de bons réflexes : choisir le format adapté, ajuster les dimensions, compresser, nommer ses fichiers clairement, renseigner la balise alt et soigner le contexte. Pris ensemble, ces gestes améliorent à la fois votre référencement naturel, l’expérience de vos visiteurs et la sobriété de votre site.
C’est un travail d’attention au détail, que nous intégrons dans chaque projet web. Vous préparez la création ou la refonte de votre site, ou vous souhaitez en améliorer la visibilité ? Découvrez notre approche du référencement naturel ou parlons de votre projet : notre équipe angevine vous accompagne, du premier visuel jusqu’à la première page de Google.