Dans la conception de sites web, les images jouent un rôle fondamental pour dynamiser le contenu et capter l'attention des visiteurs. Bien que beaucoup de sites soient principalement basés sur du texte, intégrer des images enrichit l'expérience visuelle. Il est important de gérer correctement les images pour éviter d'impacter négativement la vitesse de chargement des pages et de garantir leur accessibilité. Comprendre comment optimiser l’utilisation des images est essentiel pour tout développeur.
Formats d'images
Les images représentent une grande partie de la bande passante utilisée par une page web standard, ce qui peut ralentir son chargement. Avant d'intégrer les images, il est donc primordial de les optimiser. Voici quelques formats d'images couramment utilisés :
JPEG : Idéal pour réduire la taille des images, même si cela peut affecter la qualité visuelle.
PNG : Préféré pour les images nécessitant une haute fidélité graphique.
SVG : Parfait pour les images vectorielles comme les logos ou les icônes simples.
De plus, des formats récents comme AVIF et WebP cherchent à remplacer le JPEG grâce à des tailles de fichiers bien plus petites. Cependant, leur compatibilité avec les navigateurs doit encore être soigneusement vérifiée.
Insertion et redimensionnement d'images
L’insertion d’images dans une page web se fait fréquemment via l’élément <img> en HTML. Voici un exemple typique :
Pour améliorer l’adaptabilité des images à différents appareils, il est conseillé d’indiquer les dimensions en pourcentage. Voici un exemple où l’image occupe la moitié de la hauteur de l’écran tout en s’étendant sur toute la largeur :
Cependant, un tel style pourrait étirer l’image sur des écrans plus larges. Pour cela, il pourrait être plus judicieux d’ajouter une largeur maximale :
Pour fournir des images haute résolution uniquement à des appareils adaptés, l'attribut srcset peut être utilisé. Cela permet au navigateur de sélectionner l’image appropriée en fonction de la résolution de l’écran :
Il est à noter que srcset ne sert qu'à fournir la même image à différentes résolutions. Pour offrir des images distinctes pour des raisons artistiques ou pour des formats modernes comme AVIF et WebP, il est préférable d’utiliser l’élément <picture> :
Images accessibles et HTML sémantique
L’accessibilité des images vise à transmettre le même contenu et la même fonction que l’image à ceux qui ne peuvent pas la voir. Les images constituent un moyen puissant de communication et doivent être conçues pour maximiser cet effet. L'attribut alt est crucial ici, car il permet de fournir une description textuelle de l’image pour les utilisateurs non voyants. Cela assure que tous les utilisateurs peuvent bénéficier du contenu, indépendamment de leur capacité visuelle.
L’élément sémantique <figure> renforce cette notion en apportant un contexte supplémentaire aux navigateurs et aux lecteurs d'écran. Il est souvent associé à un élément <figcaption> pour offrir des informations supplémentaires. Voici un exemple :
Le logo de Codecademy
Conclusion
En résumé, bien gérer les images en HTML est essentiel non seulement pour la performance d’un site web mais également pour son accessibilité. Une intégration réfléchie des images est le fondement d’un site à la fois attrayant et fonctionnel.
