Optimiser les images d’un site web : formats, compression et SEO

Optimiser les images d’un site web consiste à garder leur utilité et leur qualité tout en réduisant les ressources nécessaires à leur affichage. Le travail porte sur les dimensions, le format, la compression, le chargement et les informations qui donnent du sens à l’image. Pour le SEO, il faut aussi que Google puisse découvrir le fichier et comprendre son contexte.

Commencer par l’usage de l’image

Une photo de produit, un schéma et une décoration n’ont pas le même rôle. Choisissez une image qui apporte une information ou soutient la lecture. Le fichier le plus léger n’est pas forcément le meilleur si les détails importants deviennent illisibles.

Vérifiez le cadrage sur mobile et sur ordinateur. Une image peut être recadrée différemment selon l’écran ; un texte incrusté risque alors de disparaître. Conservez les informations indispensables dans le contenu de la page, plutôt que de les rendre accessibles uniquement dans une illustration.

Choisir le format selon le contenu

WebP et AVIF sont pris en charge par les principaux navigateurs actuels. Cela ne garantit pas que votre serveur, votre CMS et chaque outil de traitement les gèrent. Le guide des formats de MDN [1] permet de vérifier leurs caractéristiques et leur compatibilité. Prévoyez un format de remplacement si votre public utilise des environnements plus anciens.

Ne convertissez pas tous les fichiers selon une règle unique. Une capture avec de petits textes et une photographie ne réagissent pas de la même manière à la compression. Comparez le résultat visible à la taille réellement utilisée.

Adapter les dimensions avant de compresser

Les dimensions en pixels et le poids en octets sont deux choses différentes. Réduire une image en CSS ne réduit pas automatiquement le fichier téléchargé. Une photo très grande affichée en vignette peut donc rester coûteuse à charger.

Préparez des variantes adaptées aux emplacements : vignette, contenu ou image large. Tenez compte de la densité de pixels des écrans, sans envoyer le fichier maximal à tous les visiteurs. Les attributs HTML srcset et sizes permettent au navigateur de choisir parmi les variantes disponibles.

Renseigner les dimensions ou réserver le bon ratio aide à stabiliser la mise en page pendant le chargement. Vérifiez que les variantes ont le cadrage attendu et que le navigateur télécharge une taille cohérente avec l’affichage.

Compresser sans abîmer les détails utiles

Gardez un original pour pouvoir refaire les exports. Comparez plusieurs niveaux de compression et examinez les contours, les dégradés et les petits caractères. Pour une fiche produit, vérifiez que les détails nécessaires à la décision restent visibles.

Il n’existe pas de poids maximal universel pour toutes les images. Le bon compromis dépend des dimensions, du contenu, de la qualité attendue et des autres ressources de la page. Mesurez l’effet du fichier sur le chargement, sans vous limiter au pourcentage gagné par l’outil de compression.

Rédiger un texte alternatif adapté au rôle de l’image

L’attribut alt fournit une alternative textuelle, notamment aux personnes qui utilisent un lecteur d’écran. Pour une image informative, décrivez l’information utile dans ce contexte. Pour une image servant de lien ou de bouton, indiquez sa fonction. Une décoration peut avoir un alt vide ; le W3C propose un arbre de décision pour choisir [2].

Exemple fictif : dans un article sur une implantation à Nantes, « Entrée de l’agence donnant sur la rue » peut être utile si la photo sert à reconnaître le lieu. Une liste de mots clés comme « agence web Nantes SEO création site » ne décrit pas ce que la personne doit comprendre.

Une légende apporte un contexte visible, une date ou un crédit quand ils sont utiles. Elle ne doit pas être ajoutée automatiquement. Le champ « Description » d’une médiathèque WordPress n’est pas une balise HTML universelle : son affichage dépend du thème et de la manière dont le média est intégré.

Donner à Google un contexte compréhensible

Placez l’image près du contenu qu’elle illustre. Choisissez un nom de fichier descriptif lors du nouvel import, sans accumuler les mots clés. Google précise que le nom fournit des indices légers : il ne remplace ni l’image, ni son texte alternatif, ni la page [3].

Les images utiles à la recherche doivent être accessibles et intégrées de façon à être découvertes. Conservez un attribut src dans une image responsive. Un sitemap d’images peut aider à signaler des fichiers ; il ne garantit pas leur indexation ou leur classement.

Évitez de renommer des fichiers déjà publiés uniquement pour embellir leur URL. Un changement peut casser des liens ou des usages existants. Si une migration est nécessaire, prévoyez les références à mettre à jour et les redirections adaptées.

Vérifier ce que WordPress automatise réellement

WordPress prend en charge les images responsives et peut générer un balisage srcset et sizes [4]. Les tailles créées, les conversions et la compression dépendent toutefois du thème, du serveur et des extensions. Il faut contrôler le résultat sur le site, plutôt que supposer que tout est optimisé après l’import.

Le chargement différé est utile pour des images situées plus bas dans la page. Il faut l’éviter pour l’image qui porte le LCP, souvent le grand visuel visible à l’ouverture : retarder cette ressource peut dégrader son affichage [5]. Pour ce visuel prioritaire, l’attribut fetchpriority="high" peut aider le navigateur à le demander plus tôt lorsqu’il est correctement identifié ; il ne doit pas être appliqué en masse. Une priorité élevée sur plusieurs images concurrentes perdrait justement son intérêt.

Un contrôle rapide après publication

• Ouvrir la page sur plusieurs écrans et contrôler le cadrage.
• Vérifier le fichier réellement téléchargé, ses dimensions et son poids.
• Relire les textes alternatifs en fonction du rôle de chaque image.
• Contrôler la stabilité de la page et le chargement du visuel principal.
• Vérifier les crédits et les droits d’utilisation.

Notre méthode pour tester la performance d’un site web permet de mesurer le résultat sur la page entière. Si vous préparez une refonte avec ImagesCréations, incluez dans le périmètre les variantes d’images, les réglages de chargement et les consignes à transmettre aux personnes qui publieront les contenus.

Sources & références

• [1] MDN — Guide des types et formats d’images.
• [2] W3C WAI — Arbre de décision pour le texte alternatif.
• [3] Google Search Central — Bonnes pratiques de SEO pour les images.
• [4] WordPress — Images responsives.
• [5] web.dev — Optimiser le Largest Contentful Paint.

Article publié le 22 septembre 2020, révisé le 1er octobre 2026 par Olivier Robé.