L’optimisation des images désigne l’ensemble des interventions techniques appliquées aux fichiers visuels d’une page pour réduire leur poids, améliorer leur indexation et accélérer le rendu côté navigateur. Les images représentent souvent la part la plus lourde d’une page web. Agir sur ce levier modifie directement le Largest Contentful Paint (LCP), l’un des Core Web Vitals pris en compte par Google pour le classement.
Les sept techniques qui suivent sont classées par ordre d’impact sur le référencement, du geste le plus déterminant au complément souvent négligé.
1. Compression des fichiers sans perte visible de qualité
Réduire le poids d’un fichier image reste le premier réflexe à adopter. Une image sortie d’un appareil photo ou d’un outil de création graphique dépasse régulièrement le mégaoctet, alors que la version affichée sur écran peut descendre à quelques dizaines de kilooctets sans différence perceptible.
Deux familles de compression coexistent. La compression avec perte retire des données de couleur que l’oeil humain distingue mal. La compression sans perte réorganise les données sans en supprimer. Pour la plupart des photos publiées sur le web, une compression avec perte modérée suffit à diviser le poids par cinq ou davantage.
Le gain se mesure directement sur le LCP. Réduire le poids de l’image principale au-dessus de la ligne de flottaison raccourcit le temps d’affichage du plus grand élément visible, ce que Google utilise pour évaluer la rapidité perçue d’une page.
2. Choix du format adapté au type de visuel
Le format du fichier conditionne à la fois le poids et la compatibilité navigateur. JPEG reste adapté aux photographies riches en couleurs. PNG conserve la transparence et convient aux logos ou aux captures d’écran avec du texte.
WebP et AVIF apportent un ratio qualité/poids supérieur aux formats historiques. WebP est désormais reconnu par la quasi-totalité des navigateurs modernes. AVIF offre une compression encore plus efficace, avec un support qui progresse rapidement.
Le choix du format influence aussi l’indexation. Google peut explorer et indexer les formats courants, mais un format moderne bien supporté envoie un signal technique positif en accélérant le rendu de la page.
3. Rédaction d’un attribut alt descriptif et contextualisé
L’attribut alt remplit deux fonctions distinctes. Il décrit le contenu visuel aux technologies d’assistance utilisées par les personnes malvoyantes. Il fournit aussi aux moteurs de recherche un texte indexable qui relie l’image au sujet de la page.
Un alt pertinent contient le sujet de l’image en langage naturel, sans accumulation de mots-clés. Pour une image décorative sans valeur informationnelle, la bonne pratique consiste à laisser l’attribut vide (alt= » ») afin que les lecteurs d’écran l’ignorent.
Dans l’Union européenne, l’accessibilité des contenus web fait l’objet d’obligations réglementaires. Les images porteuses d’information doivent proposer une alternative textuelle. Cet angle réglementaire dépasse le SEO mais renforce la pertinence d’un alt bien rédigé.
4. Redimensionnement aux dimensions réelles d’affichage
Charger une image de 3 000 pixels de large pour l’afficher à 800 pixels gaspille de la bande passante et ralentit le rendu. Le redimensionnement consiste à adapter la résolution du fichier aux dimensions maximales prévues par la mise en page.
L’attribut HTML srcset permet de servir plusieurs tailles d’une même image selon la largeur de l’écran. Le navigateur télécharge uniquement la version adaptée, ce qui profite particulièrement aux connexions mobiles.
- Identifier la largeur maximale d’affichage dans le CSS ou le thème du site
- Générer des variantes à une, deux et trois fois cette largeur pour couvrir les écrans haute densité
- Déclarer ces variantes dans l’attribut srcset du code HTML
5. Gestion du chargement différé et de la priorité
Le lazy loading retarde le téléchargement des images situées hors de l’écran visible. Le navigateur ne les charge que lorsque l’utilisateur fait défiler la page, ce qui libère de la bande passante pour le contenu immédiatement visible.
L’image principale (hero image) ne doit pas recevoir de lazy loading. Les recommandations techniques récentes conseillent d’ajouter l’attribut fetchpriority="high" à cette image, voire un lien preload dans le head, pour que le navigateur la télécharge en priorité. Cette distinction entre image prioritaire et images différées a un effet direct sur le score LCP.
6. Nommage du fichier avec des termes descriptifs
Le nom du fichier participe au contexte sémantique que Google associe à l’image. Un fichier nommé terrasse-bois-composite-gris.jpg fournit plus d’indices qu’un fichier IMG_4521.jpg.
Quelques règles simples suffisent : utiliser des mots séparés par des tirets, décrire le contenu visible, éviter les caractères spéciaux et les accents. Un nom de fichier descriptif complète l’attribut alt sans le remplacer, car les deux éléments sont lus par les moteurs de recherche.
7. Intégration des images dans un sitemap XML dédié
Un sitemap XML image signale aux moteurs de recherche l’emplacement des visuels présents sur le site. Cette déclaration facilite la découverte des images qui ne seraient pas trouvées par le crawl classique, par exemple celles chargées dynamiquement en JavaScript.
Le sitemap image peut être intégré au sitemap principal ou constituer un fichier séparé. Chaque entrée associe l’URL de la page à l’URL de l’image. Les CMS courants proposent des extensions qui génèrent ce fichier automatiquement.
L’impact direct sur le classement reste modeste comparé à la compression ou au format, mais le sitemap image accélère l’indexation des nouveaux visuels et améliore la visibilité dans Google Images, une source de trafic complémentaire souvent sous-exploitée.
Ces sept techniques fonctionnent de manière cumulative. Compresser sans redimensionner, ou nommer correctement sans renseigner l’alt, laisse une partie du potentiel inexploitée. L’optimisation des images pour le SEO produit ses meilleurs résultats lorsque chaque étape est appliquée systématiquement à chaque visuel publié.
