HTML 5 - 3.2 : Le rendu de photos et d'images
Bienvenue dans ce cours d'HTML5. Cette leçon montre comment afficher des photos et des images sur une page web. Ouvrez votre dossier (avec toutes vos images redimensionnées et compressées) dans Visual Studio Code et créez un fichier index.html. Pour afficher une image, on utilise la balise <img>, qui possède deux attributs essentiels : src (le chemin de l'image) et alt (une description affichée si l'image ne charge pas, et lue par les lecteurs d'écran). Par exemple : <img src="images/logo.png" alt="Conférence sur HTML5">.
Redimensionnement et résolutions adaptatives
Le logo apparaît trop grand par défaut. On peut le redimensionner avec l'attribut height en pixels (par exemple 50) ou avec width en pourcentage : width="50%" prendra 50 % du conteneur (ou de la page si pas de conteneur). Pour afficher d'autres images sous forme de liste, on les place dans une <ul> sous un titre h2. Pour chaque image, on définit la taille exacte en cliquant sur l'image dans VS Code : la résolution s'affiche en bas (ex. 300×82, 300×225, 300×183). On reporte cette taille via width et height.
Pour gérer plusieurs résolutions selon l'appareil, on utilise l'attribut srcset. Par exemple : srcset="images/event1.jpg 1x, images/event1-2x.jpg 2x, images/event1-3x.jpg 3x". Le navigateur choisit automatiquement la bonne image selon la densité de pixels de l'appareil (écran Retina, etc.). On peut également intégrer un GIF animé avec la même balise <img>, en lui mettant un attribut alt « animation » et une largeur de 90 % par exemple.
Enfin, pour ajouter une légende à une image, on utilise la balise <figure> qui englobe l'image, et à l'intérieur la balise <figcaption> qui contient la légende. Par exemple : <figure><img src="..." alt="..."><figcaption>Le vieux pont en or sur le terrain</figcaption></figure>. Après actualisation, la légende s'affiche correctement sous l'image. Voilà comment intégrer photos, images et légendes de manière efficace en HTML5 !
En résumé
Ce cours explique comment afficher et gérer les images en HTML5 grâce à la balise <img> avec ses attributs src (chemin du fichier) et alt (description). Il couvre le redimensionnement en pixels ou pourcentages, l'implémentation d'images responsives avec srcset pour adapter le rendu selon la résolution de l'écran, et l'ajout de légendes grâce aux balises <figure> et <figcaption>.
Points clés
- La balise <img> requiert deux attributs essentiels : src (chemin de l'image) et alt (texte descriptif)
- Le redimensionnement en pourcentages offre une meilleure adaptabilité que les pixels fixes
- L'attribut srcset permet de spécifier différentes versions d'une image (1x, 2x, 3x) pour optimiser selon la résolution de l'appareil
- Les GIFs s'intègrent avec la même balise <img> que les images standards
- La balise <figure> enveloppe l'image et <figcaption> ajoute une légende sémantique
Questions fréquentes
À quoi sert l'attribut alt sur une image?
L'attribut alt fournit une description textuelle de l'image qui s'affiche si le fichier ne peut pas être chargé et améliore l'accessibilité pour les lecteurs d'écran.
Pourquoi utiliser des pourcentages plutôt que des pixels pour dimensionner une image?
Les pourcentages rendent l'image fluide et adaptée à son conteneur, ce qui est essentiel pour la responsivité sur différents appareils.
Comment afficher la meilleure version d'une image selon la résolution de l'écran?
Utilisez l'attribut srcset avec plusieurs sources déclarées (par exemple image.jpg 1x, image-2x.jpg 2x) pour que le navigateur sélectionne automatiquement la version appropriée.