Contenu du cours
HTML Ultime
HTML Ultime
Travail avec des Images Cliquables, des Légendes et l’Optimisation
Images cliquables
Images cliquables désignent des images sur une page web pouvant être cliquées, généralement pour naviguer vers une autre page ou effectuer d'autres actions. Cette approche est couramment utilisée dans les boutiques en ligne. Les utilisateurs ont l'habitude de cliquer sur une image pour obtenir une fiche contenant la description complète du produit et son prix.
Pour rendre une image cliquable, il suffit d'encapsuler la balise <img>
à l'intérieur d'une balise <a>
. Par exemple :
Dans cet exemple, la balise <a>
définit l'URL de destination via l'attribut href
, et la balise <img/>
indique l'image à afficher. Lorsque l'utilisateur clique sur l'image, le navigateur accède à l'URL spécifiée dans l'attribut href
.
Légende d'image
Les éléments HTML figure
et figcaption
permettent d'associer une légende à une image sur une page web. Voici un exemple :
index.html
figure
: l’élément contient à la fois les élémentsfigcaption
etimg
;figcaption
: spécifie le texte de la légende, visible pour les utilisateurs ;img
: spécifie l’image à afficher.
Optimisation des images
Ceci est essentiel pour les pages web, où des fichiers image volumineux peuvent ralentir le temps de chargement et rendre le site moins réactif. En suivant les conseils suivants, il est possible d’améliorer la performance globale et l’accessibilité du site web.
Redimensionner les images à la taille appropriée . Adapter les images à la taille à laquelle elles seront affichées sur la page web, plutôt que de télécharger de grandes images et de les redimensionner via HTML ou CSS ;
Utiliser des formats de fichiers appropriés . En général, les JPEG sont utilisés pour les photographies, les PNG pour les graphiques et les images avec transparence. Éviter les fichiers BMP ou TIFF plus volumineux ;
Compresser les images . Il existe de nombreux outils en ligne permettant de compresser les images sans perte de qualité. Effectuer cette opération avant de télécharger les images sur le site web.
Remarque
Il est possible d’utiliser les sources suivantes pour compresser les images : Optimisation des images matricielles, Optimisation des images vectorielles. Quelle est la différence entre elles ? - Ceci sera abordé dans le prochain chapitre.
Merci pour vos commentaires !