Vous pensez que vos images sont là uniquement pour embellir votre site ? Détrompez-vous ! Une image bien paramétrée améliore également le référencement de votre site. Découvrez comment optimiser vos images pour le SEO, en quelques étapes. Avec, à la clé des visuels qui sont aussi compatibles avec une bonne accessibilité web, et une meilleure expérience utilisateur.
SOMMAIRE
- Importance de l’optimisation des images
- Choisir le bon format d’images
- Compresser ses images
- Bien nommer ses images
- Optimiser l’attribut ALT
- Utiliser des dimensions d’images adaptée
- Créer un sitemap d’images
Pourquoi l’optimisation des images est-elle importante pour le SEO ?
L’optimisation des images est souvent sous-estimée lorsqu’on pense au SEO (référencement naturel), mais elle joue un rôle clé dans la performance globale d’un site. Voici pourquoi.
Impact n°1 : amélioration de la vitesse de chargement
Les images non optimisées peuvent ralentir considérablement le chargement de votre site. Or, la vitesse de chargement est un critère important pour Google. Si votre site est lent, vous risquez de perdre des visiteurs avant même qu’ils n’aient vu votre contenu.
Un site rapide offre une meilleure expérience utilisateur, ce qui contribue à améliorer laa position de votre site dans les résultats de recherche.
Impact n°2 : un meilleur classement dans Google Images
Saviez-vous qu’une grande partie du trafic peut provenir de Google Images ? Optimiser vos images augmente les chances qu’elles apparaissent dans les résultats de recherche d’images. En ajoutant des balises descriptives et en choisissant le bon format, vous facilitez le travail des moteurs de recherche pour indexer vos images.
Impact n°3 : une accessibilité web et une expérience utilisateur améliorées
Les images agrémentent la lecture de l’internaute et apportent un complément de compréhension au texte. Cela permet d’augmenter le temps de lecture et la durée passée sur le site. C’est un bon signal envoyé à Google.
Mais ces images doivent également être comprises par des algorithme des moteurs de recherche, pour qu’ils puissent les afficher dans la section image. Elles doivent également pouvoir être « lues » par les appareils à destination des internautes déficients visuels.
Enfin, lorsqu’une personne ne dispose pas d’une bonne connexion internet, l‘image ne s’affiche pas, mais le texte alternatif si. Avec un texte alternatif explicite, le visiteur comprend ce qui est sur l’image même s’il ne la voit pas.
L’attribut ALT permet donc de faire comprendre le sujet de l’image à des programmes informatiques.
Des images bien décrites améliorent donc l’accessibilité web et le SEO.
1 – Choisir le bon format d’image
Le choix du format d’image joue un rôle important dans l’optimisation de votre site pour le SEO. Chaque format a des caractéristiques spécifiques qui influencent la taille des fichiers, la qualité des images et, en fin de compte, la performance du site. Voyons quels formats utiliser selon vos besoins.
Le format JPEG (ou JPG)
Le format JPEG est le plus courant pour les photos et les images avec de nombreux détails et couleurs. Il offre une bonne compression qui permet de réduire la taille des fichiers sans perdre trop en qualité. Cela le rend idéal pour les images lourdes comme les photos de produits ou les portraits.
Quand utiliser le JPEG ?
- Pour des photos ou images avec beaucoup de couleurs et de détails.
- Lorsque vous avez besoin de réduire la taille des fichiers pour améliorer la vitesse de chargement.
Le format PNG
Ce format est adapté aux images avec des éléments graphiques comme des logos, des icônes, ou des illustrations simples. Contrairement au JPEG, il prend en charge la transparence, ce qui est utile si vous avez besoin d’intégrer des images sans fond. Cependant, le PNG produit généralement des fichiers plus lourds que le JPEG, ce qui peut affecter la vitesse de votre site si vous en abusez.
Quand utiliser le PNG ?
- Pour des images contenant du texte ou des détails nets, comme des logos ou des graphiques.
- Lorsque vous avez besoin d’une image avec un fond transparent.
Le format WebP
Le WebP est un format plus récent, créé par Google, qui permet une compression encore plus efficace que le JPEG ou le PNG. Il offre un excellent compromis entre la taille du fichier et la qualité visuelle, ce qui en fait un format idéal pour optimiser la vitesse de votre site. Il supporte également la transparence, comme le PNG.
Quand utiliser le WebP ?
- Lorsque vous cherchez un format léger pour des images de haute qualité.
- Pour bénéficier d’une vitesse de chargement optimale tout en conservant une bonne qualité d’image.
Comment convertir une image PNG en Webp ?
Pour convertir une image PNG en WebP, plusieurs outils en ligne et logiciels sont disponibles. Parmi les plus simples, des sites comme Squoosh.app ou Convertio, permettent de glisser-déposer une image PNG et de la convertir instantanément en WebP.
Il suffit de sélectionner le format de sortie, puis de télécharger l’image WebP une fois la conversion terminée. Pour des conversions en masse ou plus avancées, des logiciels comme Photoshop ou des scripts en ligne de commande, comme ceux basés sur ImageMagick, peuvent être utilisés.
Comment convertir une image JPEG en Webp ?
De même, pour convertir une image JPEG en WebP, vous pouvez utiliser les outils cités ci-dessu. Ils permettent une conversion rapide et simple en quelques clics. Il vous suffit de télécharger l’image JPEG, de choisir WebP comme format de sortie, puis de télécharger l’image convertie.
Comparatif des formats
| Format | Meilleure utilisation | Qualité visuelle | Taille du fichier |
| JPEG | Photos et images complexes | Bonne | Moyenne à faible |
| PNG | Logos, icônes, images avec fond transparent | Excellente | Plus lourd |
| WebP | Photos, illustrations, icônes | Très bonne | Très faible |
Les bonnes pratiques pour les dimensions et les tailles des images
Choisir les bonnes dimensions
Les dimensions d’une image doivent correspondre à son affichage réel sur la page. Utiliser une image avec des dimensions supérieures à celles nécessaires peut alourdir le chargement de la page. Voici quelques conseils pour choisir les bonnes dimensions :
- Connaître l’espace d’affichage : Mesurez les dimensions exactes de l’espace où l’image sera affichée. Par exemple, si une image s’affiche en 600 x 400 pixels, évitez d’utiliser une image de 1200 x 800 pixels.
- Utiliser des outils de design : Les outils comme Adobe Photoshop ou des services en ligne comme Canva permettent de redimensionner les images précisément en fonction des besoins de votre page.
- Aspect ratio : Conservez le ratio d’aspect (proportions) pour éviter les distorsions. Par exemple, une image de 16:9 doit rester dans ce ratio pour éviter qu’elle ne paraisse étirée ou écrasée.
Exemples
Image pour un article de blog : Supposons que l’espace pour une image d’article de blog est de 800 x 400 pixels. Utilisez une image de cette taille précisément pour éviter le chargement inutile d’images plus grandes. Compressez l’image pour qu’elle ne dépasse pas 100 Ko, garantissant un temps de chargement rapide.
Image pour une vignette de produit : Si une vignette de produit sur une page de catalogue mesure 300 x 300 pixels, redimensionnez l’image à cette taille exacte et compressez-la à environ 50 Ko pour une meilleure performance.
Voici le tableau mis à jour avec une colonne pour le poids recommandé en kilo octets (Ko), en fonction des types d’images pour un site web :
| Type d’image | Taille recommandée (en pixels) | Résolution (DPI) | Poids recommandé (Ko) |
| Image pour un article de blog | 1200 x 630 | 72 DPI | 100 – 150 Ko |
| Bannière (header) | 1920 x 600 | 72 DPI | 150 – 250 Ko |
| Image de produit | 800 x 800 | 72 DPI | 70 – 100 Ko |
| Vignette (miniature) | 150 x 150 | 72 DPI | 10 – 20 Ko |
| Image pleine page (background) | 1920 x 1080 | 72 DPI | 200 – 400 Ko |
| Image pour une galerie | 1024 x 768 | 72 DPI | 80 – 150 Ko |
| Logo (en-tête ou pied de page) | 300 x 100 | 72 DPI | 20 – 40 Ko |
| Pictogramme | 100 x 100 | 72 DPI | 5 – 10 Ko |
| Séparateur | 1920 x 100 | 72 DPI | 30 – 60 Ko |
Explication :
- Les dimensions en pixels définissent la taille d’affichage de l’image.
- La résolution en DPI de 72 est standard pour les images sur le web, assurant un bon équilibre entre qualité et légèreté.
- Le poids recommandé en Ko aide à garantir que les images restent légères pour un chargement rapide, ce qui est essentiel pour le SEO et l’expérience utilisateur.
2 – Compresser ses images pour un chargement rapide : une bonne habitude à prendre
Une fois que vous avez choisi le bon format d’image, il vous faut maintenant réduire la taille de vos fichiers pour optimiser la vitesse de chargement de votre site. La compression d’image permet de minimiser le poids des fichiers sans sacrifier trop de qualité visuelle.
Plus votre site charge vite, plus il est susceptible d’être bien classé dans les résultats de recherche. Voyons comment procéder.
Les outils de compression d’images
Il existe de nombreux outils, gratuits et payants, pour compresser vos images tout en conservant une qualité visuelle satisfaisante. Voici quelques-uns des plus populaires :
TinyPNG
Cet outil en ligne compresse les fichiers PNG et JPEG. Il est très facile d’utilisation : il suffit de glisser-déposer vos images sur le site, et elles sont compressées en quelques secondes.
Lien vers TinyPng.
Squoosh
Un outil en ligne de Google qui permet de compresser différents formats d’image, y compris WebP. Vous pouvez ajuster la qualité visuelle en temps réel pour voir les changements.
Lien vers Squoosh.
Automatiser la compression avec un CMS
Si vous utilisez un CMS comme WordPress, vous pouvez automatiser le processus de compression d’images grâce à des plugins. Ces outils compressent automatiquement vos images lorsque vous les téléchargez sur le site.
- Imagify : Plugin de compression d’images qui permet de choisir entre différents niveaux de compression (avec ou sans perte).
- Smush : Compresse automatiquement les images et supprime les données inutiles (comme les métadonnées EXIF) pour alléger vos fichiers.
3 – Bien nommer ses fichiers d’images
Le nom de fichier d’une image joue un rôle important dans l’optimisation pour les moteurs de recherche. Bien que cela puisse sembler être un détail, choisir des noms de fichiers descriptifs et pertinents peut avoir un impact sur votre classement dans Google Images et sur la pertinence globale de vos pages. Cela n’est pas un critère majeur, mais autant faire les choses proprement dès le début.
Pourquoi le nom de fichier est-il important ?
Les moteurs de recherche, comme Google, ne peuvent pas « voir » les images de la même manière que les humains. Ils utilisent donc le nom du fichier pour comprendre le contenu de l’image.
Si vous nommez vos images avec des termes clairs et en rapport avec votre sujet, vous aidez les moteurs de recherche à mieux comprendre et indexer vos images.
Exemple :
Plutôt que de garder le nom générique donné par votre appareil photo, comme « IMG_1234.jpg », vous pouvez renommer l’image en « coach-en-ligne-session-coaching.jpg ». Cela aide à préciser le sujet de l’image pour Google.
Utiliser des mots-clés dans le nom du fichier image
Le nom du fichier doit inclure des mots-clés pertinents pour votre contenu et votre activité. Ces mots-clés doivent être en lien avec l’image, mais aussi avec le sujet de la page sur laquelle elle est publiée. Attention toutefois à ne pas trop forcer les mots-clés : gardez le nom naturel et descriptif.
Bonnes pratiques pour nommer vos fichiers d’image :
- Soyez descriptif : le nom du fichier doit refléter ce que montre l’image.
- Utilisez des tirets pour séparer les mots : Google recommande d’utiliser des tirets (« - ») plutôt que des espaces ou des underscores (« _ »).
- Évitez les caractères spéciaux : ne pas inclure d’accents, de ponctuations ou de symboles dans le nom de fichier.
- Ne pas surcharger le nom de fichier. Un bon nom de fichier doit être court et précis. N’essayez pas d’y ajouter trop de mots-clés, car cela peut être interprété comme du « keyword stuffing » (bourrage de mots-clés) par les moteurs de recherche. L’objectif est de décrire l’image de façon simple et claire. Limitez-vous à 3 ou 4 mots maximum.
4 – Optimiser l’attribut ALT pour améliorer le référencement
L’attribut ALT (ou texte alternatif) est un des éléments les plus importants pour l’optimisation des images en SEO. Il permet d’améliorer l’accessibilité de votre site tout en offrant des indications précieuses aux moteurs de recherche sur le contenu de vos images.
Qu’est-ce que l’attribut ALT ?
L’attribut ALT est un texte qui décrit une image et qui apparaît lorsque celle-ci ne peut pas être affichée. Il est également utilisé par les lecteurs d’écran pour aider les personnes malvoyantes à comprendre le contenu de la page. D’un point de vue SEO, l’attribut ALT permet aux moteurs de recherche de mieux comprendre le contexte et le sujet de l’image.
Comment bien rédiger une balise ALT ?
Une bonne balise ALT doit être à la fois descriptive et naturelle. Elle ne doit pas simplement répéter des mots-clés, mais plutôt donner une description précise de l’image.
Voici quelques conseils pour bien rédiger vos textes d’attributs ALT :
- Soyez descriptif et précis : expliquez ce que l’image montre en quelques mots.
- Utilisez des mots-clés pertinents : choisissez des termes qui reflètent le contenu de l’image et de la page sur laquelle elle se trouve.
- Restez naturel : ne faites pas de « bourrage » de mots-clés. La balise doit être lisible et compréhensible par un humain.
Exemple :
Une céramiste partage une image de ses créations. Au lieu de simplement écrire « céramique », la balise ALT peut être « vase en céramique fait à la main avec motifs floraux ». Cela offre une description plus complète et améliore le SEO.
Comment remplir l’attribut alt dans WordPress ?
Pour remplir l’attribut ALT d’une image dans WordPress, suivez ces étapes simples :
- Lorsque vous téléchargez ou insérez une image dans votre bibliothèque de médias, une colonne à droite apparaît avec plusieurs champs.
- Dans la case « Texte alternatif », ajoutez une description claire et précise de l’image.
5 – Utiliser les bonnes dimensions d’image
Choisir les bonnes dimensions pour vos images est une autre étape essentielle pour optimiser vos pages web. Des images trop grandes peuvent ralentir le temps de chargement de vos pages, tandis que des images trop petites peuvent affecter la qualité visuelle et l’expérience utilisateur. L’enjeu est donc de trouver le bon équilibre.
Pourquoi ajuster les dimensions des images ?
Lorsque vous téléchargez une image directement depuis votre appareil photo ou votre téléphone, celle-ci peut avoir des dimensions bien plus grandes que ce dont vous avez réellement besoin pour votre site. Une image de 4000 pixels de large, par exemple, est inutilement lourde si elle est affichée dans une zone de 800 pixels sur votre site. Le fait de ne pas ajuster la taille de vos images avant de les télécharger peut ralentir le chargement de la page et pénaliser votre SEO.
Quelles sont les bonnes dimensions ?
Les bonnes dimensions d’image dépendent de l’endroit où elles apparaissent sur votre site. Voici quelques exemples de dimensions optimales pour différents usages :
- Images pour les articles de blog : Généralement, une largeur de 1200 à 1600 pixels est suffisante. Les images plus larges ne seront pas nécessaires.
- Vignettes ou miniatures : Utilisez des images de petite taille, comme 150×150 pixels, pour des aperçus rapides.
- Images pour la bannière ou en plein écran : Dans ce cas, vous pouvez aller jusqu’à 1920 pixels de large, mais pas plus, même pour des affichages sur des grands écrans.
Outils pour redimensionner vos images
Il existe plusieurs outils gratuits et payants qui vous permettent de redimensionner vos images avant de les télécharger sur votre site. En voici quelques exemples :
- Canva : Un outil en ligne facile à utiliser pour redimensionner et éditer vos images. C’est celui que je vous recommande.
- GIMP : Un logiciel gratuit qui propose des fonctionnalités similaires à Photoshop pour redimensionner et compresser vos images.
Attention à ne pas trop réduire la taille des images
Si vous redimensionnez vos images à une taille trop petite, elles risquent de perdre en qualité et de devenir floues ou pixelisées, ce qui nuira à l’expérience utilisateur. Il est donc important de toujours tester le rendu visuel après avoir ajusté les dimensions.
Utiliser les balises HTML pour contrôler les dimensions
Une fois vos images redimensionnées, vous pouvez aussi définir des dimensions spécifiques directement dans le code HTML pour contrôler l’affichage sur votre site. Cela permet de s’assurer que les images sont adaptées à l’espace disponible. C’est optionnel. Ne vous en faites pas si l’idée de voir un bout de code vous donne de l’eczéma :).
Exemple de code dimension d’image
<img src= »image-vase-ceramique.jpg » alt= »Vase en céramique fait main » width= »600″ height= »400″>
Avec cette balise, vous indiquez que l’image doit être affichée en 600 pixels de large et 400 pixels de haut, même si son fichier source est plus grand. Cela peut être utile si vous ne souhaitez pas changer la taille originale de l’image tout en adaptant son affichage.
Bien utiliser les dimensions d’image permet de maximiser la rapidité de votre site et d’offrir une expérience utilisateur optimale, que vos visiteurs consultent votre site sur mobile ou sur ordinateur. Dans la prochaine partie, nous verrons comment créer un sitemap d’images pour améliorer l’indexation de vos images par Google.
6 – Créer un sitemap d’images
Un sitemap d’images est un fichier qui aide les moteurs de recherche, comme Google, à mieux comprendre et indexer les images présentes sur votre site. Ce fichier liste toutes les images que vous souhaitez rendre visibles dans les résultats de recherche. Même si l’idée d’un sitemap peut sembler technique, il existe des outils simples qui permettent de le créer sans avoir besoin de compétences avancées.
Pourquoi un sitemap d’images est-il important ?
Les moteurs de recherche comme Google explorent les pages web pour en extraire les informations, mais parfois, certaines images ne sont pas directement accessibles pour des raisons techniques. C’est là que le sitemap d’images intervient : il informe directement les moteurs de recherche sur toutes les images que vous souhaitez qu’ils indexent.
Comment créer un sitemap d’images sans expertise technique ?
Heureusement, vous n’avez pas besoin de compétences en programmation pour créer un sitemap d’images. Il existe plusieurs outils simples et plugins (extensions) qui s’en occupent automatiquement pour vous, en fonction du CMS que vous utilisez.
- Si vous utilisez WordPress, des extensions comme Yoast SEO ou All in One SEO permettent de générer un sitemap d’images en quelques clics. Ces outils créent automatiquement une liste de toutes les images présentes sur votre site, que vous pouvez soumettre à Google.
- De nombreuses autres plateformes comme Wix ou Shopify disposent également de solutions pour générer des sitemaps d’images sans effort supplémentaire de votre part.
Ne pas oublier de soumettre le sitemap à Google
Une fois que votre sitemap est créé, il faut informer Google qu’il existe. Cela se fait via la Google Search Console, un outil gratuit proposé par Google pour aider les propriétaires de sites à améliorer leur référencement.
Voici comment faire :
- Connectez-vous à Google Search Console.
- Allez dans l’onglet « Sitemaps ».
- Ajoutez l’URL de votre sitemap (souvent, il se trouve à l’adresse suivante : votresite.com/sitemap.xml).
- Cliquez sur « Soumettre ».
- Google analysera ensuite le fichier et commencera à indexer vos images.
7 – Vérifier les performances SEO des images
Une fois que vous avez optimisé vos images pour le SEO, vérifiez que ces optimisations ont l’effet escompté. Pour cela, il existe plusieurs outils qui vous permettent d’analyser les performances de votre site et de vos images.
Cette étape vous aidera à identifier les éventuels points d’amélioration pour continuer à renforcer votre référencement.
Utiliser Google PageSpeed Insights
L’un des outils les plus couramment utilisés pour vérifier les performances de vos images est Google PageSpeed Insights. Cet outil gratuit vous permet d’analyser la vitesse de chargement de votre site, et il vous indique précisément si certaines images ralentissent le temps de chargement.
PageSpeed vous donne aussi des recommandations pour compresser davantage certaines images ou choisir des formats plus adaptés.
Google Search Console pour surveiller l’indexation des images
La Google Search Console est un outil gratuit. Il est mis à disposition pour vérifier comment vos images sont indexées et apparaissent dans les résultats de recherche.
Une fois que vous avez soumis votre sitemap d’images, Google Search Console vous permet de surveiller quelles images sont bien prises en compte par Google et si certaines rencontrent des problèmes.
Analyser les performances avec GTmetrix
GTmetrix est un autre outil populaire pour évaluer la performance des images sur votre site. Il vous donne des informations détaillées sur la manière dont chaque image impacte la vitesse globale de votre site, et propose des conseils pour améliorer leur chargement.
GTmetrix vous permet également de tester votre site sur différentes connexions Internet, afin de voir comment vos images se comportent pour les utilisateurs avec des vitesses plus lentes.
Réviser régulièrement la performance des images
Il est important de réviser régulièrement la performance de vos images pour s’assurer qu’elles continuent d’améliorer votre SEO. Les mises à jour de contenu, les nouveaux formats d’image (comme le WebP), ou encore les nouvelles recommandations de Google peuvent affecter vos pratiques en matière d’optimisation. Il est donc utile d’intégrer ces vérifications dans votre routine d’entretien de site web.
Utiliser des outils d’analyse spécifiques pour vos images
Certains outils se concentrent spécifiquement sur l’optimisation et la performance des images, comme ImageKit ou Kraken.io. Ces services peuvent non seulement analyser la performance de vos images, mais aussi les compresser automatiquement en fonction des besoins, tout en surveillant la qualité. Ces outils sont particulièrement utiles si vous avez un site avec de nombreuses images, comme un portfolio, un blog ou une boutique en ligne.
