<aside> 💡 Voici les consignes pour des images bien optimisées :

• Donnez des noms de fichier descriptifs, courts et précis à vos images (donc éviter ceci par exemple IMG_12071998.png)
• Écrivez une légende et un text alt descriptifs, précis et concis
• Choisissez le bon format (WebP pour avoir une taille de fichier la plus petite possible, SVG pour les logos et icônes, PNG si vous voulez un fond transparent et JPEG si vous voulez la qualité la plus haute)
• Réduisez autant que possible la taille de fichier de vos images. Webflow fait ça automatiquement je crois, à vérifier.
• Utilisez du markup schema quand pertinent (produits, recettes, vidéos, …)
• Utilisez si possible du lazy loading, mise en cache navigateur et un CDN
• Dans l’image : pensez bien à mettre votre logo, et le lien d’où est tiré l’image en dur (au cas où l’image ranke dans Google Images)

Pour des textes alt optimisés :

• Décrivez l'image de façon concise et précise, sans en faire une brochette de mots clés indigeste.
• Pas la peine de dire "Image d'un …" "Illustration de …" "Schéma d'un…", Google comprendra tout seul </aside>

Quelques précisions à propos du texte alt

La balise HTML d’une ressemble en général à ceci: <img src= »nomfichier.jpeg » alt= »description de l’image »>.

Comme le title ou la meta description, la balise alt n’est pas visible directement sur la page.

Son but principal est d’améliorer l’accessibilité des sites pour les personnes qui utilisent des lecteurs d’écran (les personnes avec des problèmes de vue par exemple) en leur décrivant en toutes lettres ce qu’il y a sur l’image.

Cela aide également les algorithmes de Google à comprendre ce qu’il y a sur l’image pour mieux la ranker dans Google Images comme je l’ai mentionné plus haut.