En 2020 la création de site internet en “.fr” a augmenté de 7%. Si vous aussi vous décidez de créer votre site web, DLinfo partage avec vous ses bonnes pratiques concernant l’optimisation de vos images.
L’optimisation des images a plusieurs intérêts non-négligeables : améliorer le référencement SEO, éviter les ralentissements et temps de chargement trop long, permettre de faire vos sauvegardes plus rapidement ou encore de réduire l’espace de stockage nécessaire sur votre serveur. Intéressant, n’est-ce pas ? Alors c’est parti, suivez le guide !
1) Format, poids et résolution de l’image
Des images trop lourdes pourraient ralentir le temps de chargement de votre site internet. Ce temps de chargement est crucial, en effet, un visiteur arrivant sur votre site web ne sera pas très patient sachez-le.
Quelques secondes peuvent faire toute la différence, alors pour être certain de ne perdre aucun visiteur, commencez par redimensionner vos images.
Tout d’abord, assurez-vous de bien choisir le format de vos images. Il en existe plusieurs et chacun a des caractéristiques qui lui sont propres :
- JPEG : avec ce format, il sera possible d’ajuster le niveau de qualité de l’image (il faudra trouver le bon ratio entre qualité et taille du fichier)
- PNG : avec ce format, l’image sera de bonne qualité, mais le fichier sera grand
- WEBP : format créé par Google pour remplacer les autres formats en gardant une bonne qualité d’image tout en réduisant son poids de façon significative pour optimiser la vitesse de chargement de la page de votre site web
- GIF : idéal pour les images animées, mais dispose de seulement 256 couleurs.
Conseil de l’équipe : utilisez un format JPEG pour les images qualitatives avec beaucoup de couleurs et PNG pour les logos. Si vous avez beaucoup d’images, optez pour le format WEBP.
Idéalement, le poids d’une image sur votre site doit se situer autour des 200Ko.
Pour la résolution, idéalement, elle doit se situer entre 200 pixels de large pour une petite photo et 1024 pixels de large pour une grande photo.
Conseil de l’équipe : ne changez que la largeur de l’image, conservez le rapport hauteur/largeur d’origine et la hauteur se mettra automatiquement ; ainsi aucun risque de la dénaturer.
Si votre image est trop lourde, vous pouvez alors utiliser des outils pour redimensionner l’image ou réduire sa résolution. Il en existe des gratuits ( Compressor.io, Gimp), des freemiums ( Let’s Enhance, TinyPNG) et des payants ( Imagify, Photoshop) : à vous de faire votre choix.
Conseil de l’équipe : la taille de l’image ne doit pas dépasser les 500Ko.
2) Nom, attribut et légende de l’image
Maintenant, parlons référencement SEO, c’est ici que le choix du nom de votre image prend tout son sens.
Quand on parle référencement, on pense à Google, pas étonnant quand on sait que 9 Français sur 10 l’utilisent comme moteur de recherche. Alors, avoir les faveurs de Google en termes de référencement est le but ultime de tout site internet.
Google ne voit pas les images, mais il analyse les mots-clés présents dans son nom. Vous l’aurez compris, le choix de ces mots-clés est capital. Sélectionnez tout simplement des mots-clés en lien avec votre image et séparez-les par des “-” pour la lisibilité.
Enfin, sachez qu’en cas de téléchargement d’une image depuis votre site le nom de celle-ci apparaîtra, par conséquent faites attention au langage employé, et retenez que quelques mots-clés seront toujours plus agréables à lire qu’une suite de caractères.
Conseil de l’équipe : servez-vous de Google Analytics pour déterminer les mots-clés suivis par vos clients et utilisez-les.
Les images peuvent parfois servir à illustrer, mais aussi à aider à la compréhension du texte et/ou de l’article.
Pensez donc à bien renseigner les attributs Alt (alternative textuelle) de vos images car ils seront utiles pour les personnes malvoyantes. En effet, ils serviront également au moteur de recherche et permettront de ressortir plus facilement dans les résultats de Google images.
Enfin, en cas de problème de chargement lié à votre site, cela permettra au visiteur de comprendre qu’une image est censée être ici le temps de résoudre le problème.
Conseil de l’équipe : inspirez-vous du nom de votre image et surtout n’en utilisez pas trop.
Une fois, le nom et les attributs sélectionnés, terminez par la légende. Celle-ci n’est pas utile pour le référencement, elle aide seulement à mettre dans le contexte. Elle peut/doit être rédigée (pas de mots-clés ici, mais des phrases) et a pour but d’orienter le visiteur dans l’interprétation de l’image. Car une seule et même image peut être interprétée de plusieurs manières selon la personne qui l’observe.
La légende peut apporter des précisions sur la date, le lieu, la personne y figurant. Elle peut être courte et complémentaire du texte ou bien, longue et narrative ou encore être composée d’une citation.
Conseil de l’équipe : il faut bien choisir la légende car celle-ci influencera forcément le visiteur/lecteur.
3) Autres images : vignettes, images décoratives et sitemaps
Dans le cadre d’un site d’e-commerce, vous allez utiliser des vignettes notamment pour imager les rubriques dans lesquelles classer vos produits ou encore en récapitulatif du panier. Ces miniatures doivent être petites, car elles ne doivent pas ralentir le site (si le panier met trop de temps à charger alors vous prenez le risque de perdre votre client), mais être tout de même lisible.
Il va alors falloir faire des tests et choisir le ratio taille/qualité le plus adapté à votre page.
Dernière précision, lorsque le produit est pris en photo sous différents angles, n’oubliez pas de donner des attributs Alt différent pour différencier les images entre elles.
Conseil de l’équipe : n’hésitez pas à changer les mots-clés utilisés dans l’image d’origine, il serait dommage que la vignette ressorte dans Google images avant celle de taille “normale”.
Quid des images utilisées pour le fond d’écran, ou encore les bordures ? Toutes ces images, qui ne représentent pas vos produits, sont très importantes pour l’esthétisme de votre site, mais ne doivent en aucun cas ralentir son chargement ou dégrader l’UX du visiteur (expérience utilisateur : c’est-à-dire son ressenti quant à la navigation sur votre site). Il vous faudra les réduire au maximum tout en vous assurant que la qualité reste bonne.
Conseil de l’équipe : quand c’est possible, à la place d’insérer une image, essayez de créer une zone de couleur en code CSS. Cela habillera l’arrière-plan sans alourdir le site.
Les robots d’indexation qui scannent les sites pour en extraire les mots-clés servant au référencement ne sont pas capables d’analyser toutes les images. Pour ces images, il vous faudra alors répertorier l’emplacement de celles-ci sur des sitemaps image. Ainsi, les robots comprendront tout de même qu’il y a des images sous un format qu’ils ne peuvent pas lire.
Conseil de l’équipe : utilisez les sitemaps de Google pour améliorer encore plus votre SEO.
Vous avez maintenant toutes les cartes en main pour que votre site performe.
Si toutefois, vous ne vous sentez pas de vous lancer, faites appel à des agences digitales. DLinfo s’occupe de la création de votre site internet ou blog, de son hébergement web et de son référencement SEO et SEA. Une équipe experte et compétente est prête à vous venir en aide. N’hésitez pas à nous contacter pour en savoir plus.
Vous pouvez retrouver cet article ainsi que les autres sur notre blog. N’hésitez pas à nous suivre sur Facebook et LinkedIn pour ne rien rater de notre actualité.