L'élément img est fondamental pour afficher des images sur une page web. Bien plus qu'une simple balise, il joue un rôle crucial pour le SEO, l'accessibilité et l'expérience utilisateur. Ce guide explore en profondeur l'utilisation de la balise img, en couvrant les attributs essentiels, les bonnes pratiques d'optimisation et les techniques avancées pour un affichage optimal des images sur votre site web.
Attributs essentiels de la balise img
Deux attributs sont obligatoires pour la balise img : src et alt.
src (source)
L'attribut src indique le chemin d'accès à l'image. Il peut s'agir d'une URL absolue ou relative.
Exemple : <img src="images/mon-image.jpg" alt="Description de l'image">
alt (texte alternatif)
L'attribut alt fournit une description textuelle de l'image. Il est crucial pour l'accessibilité, permettant aux lecteurs d'écran de décrire l'image aux utilisateurs malvoyants. Il est également important pour le SEO, car les moteurs de recherche utilisent le texte alternatif pour comprendre le contenu de l'image.
Exemple : <img src="images/produit.jpg" alt="Image du nouveau produit XYZ">
Optimisation SEO des images
L'optimisation des images est essentielle pour améliorer le classement de votre site web dans les résultats de recherche.
Nom de fichier descriptif
Utilisez des noms de fichiers descriptifs et concis, contenant des mots-clés pertinents. Remplacez les espaces par des tirets.
Exemple : mon-nouveau-produit.jpg au lieu de image123.jpg
Attribut alt optimisé
Rédigez des descriptions alt précises et concises, intégrant des mots-clés pertinents sans en abuser.
Compression des images
Compressez vos images pour réduire leur taille sans compromettre la qualité. Utilisez des outils comme TinyPNG ou ImageOptim.
Formats d'images appropriés
Choisissez le format d'image le plus adapté à vos besoins : JPEG pour les photos, PNG pour les graphiques avec transparence, et WebP pour une meilleure compression.
Accessibilité des images
L'attribut alt est crucial pour l'accessibilité. Fournissez des descriptions textuelles significatives pour toutes les images, même décoratives. Pour les images purement décoratives, utilisez un attribut alt vide : alt="".
Images responsives
Utilisez l'attribut srcset pour fournir différentes versions d'une image pour différents appareils. L'attribut sizes permet de spécifier la taille de l'image en fonction de la largeur de l'écran.
Exemple : <img src="image.jpg" srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w" sizes="(max-width: 600px) 480px, 800px">
Lazy Loading
Le lazy loading permet de charger les images uniquement lorsqu'elles sont visibles à l'écran, améliorant ainsi les performances du site web. Utilisez l'attribut loading="lazy".
Exemple: <img src="image.jpg" alt="..." loading="lazy">
Autres attributs utiles
width et height
Spécifiez les dimensions de l'image en pixels. Cela permet au navigateur de réserver l'espace nécessaire pour l'image avant qu'elle ne soit chargée, évitant ainsi les reflows.
title
L'attribut title affiche une info-bulle au survol de l'image. Il ne doit pas être utilisé comme alternative à l'attribut alt.
Formats d'images : JPEG, PNG, WebP, SVG
Le choix du format d'image est crucial pour la performance et la qualité. JPEG est idéal pour les photos, PNG pour les graphiques avec transparence, WebP pour une meilleure compression, et SVG pour les graphiques vectoriels.
Images et performance web (Webperf)
L'optimisation des images est un facteur clé pour la performance web. Des images lourdes peuvent ralentir le chargement de la page, impactant négativement l'expérience utilisateur et le SEO. La compression, le lazy loading et le choix du format d'image approprié sont essentiels pour optimiser les performances.
Bonnes pratiques pour l'utilisation de la balise img
- Utilisez toujours les attributs
srcetalt. - Optimisez les images pour le SEO et la performance.
- Choisissez le format d'image approprié.
- Utilisez des noms de fichiers descriptifs.
- Implémentez le lazy loading.
- Assurez-vous que vos images sont responsives.
Conclusion
L'élément img est un élément essentiel pour enrichir le contenu de vos pages web. En suivant les bonnes pratiques d'optimisation SEO et d'accessibilité, vous pouvez améliorer l'expérience utilisateur, le classement de votre site web et garantir que votre contenu est accessible à tous.