Images à Usage Spécial

Images Cliquables

Images cliquables sont des images sur une page web qui peuvent être cliquées, généralement pour naviguer vers une autre page web ou effectuer d'autres actions. En général, vous avez besoin de cette approche lorsque vous traitez avec des magasins en ligne. Les utilisateurs s'habituent à cliquer sur une image et à obtenir une carte avec une description complète du produit et le prix.

Pour rendre une image cliquable, vous pouvez envelopper la balise <img> à l'intérieur d'une balise <a>. Par exemple :

Dans cet exemple, la balise <a> spécifie l'URL vers laquelle lier dans l'attribut href, et la balise <img/> spécifie l'image à afficher. Lorsque l'utilisateur clique sur l'image, le navigateur naviguera vers l'URL spécifiée dans l'attribut href.

Légende d'image

Vous pouvez utiliser les éléments HTML figure et figcaption pour associer une légende à une image sur une page web. Voici un exemple :

• figure : l'élément contient à la fois les éléments figcaption et img;
• figcaption : spécifie le texte de la légende, visible pour les utilisateurs;
• img : spécifie l'image à afficher.

Optimisation des images

C'est important pour les pages web, où de gros fichiers image peuvent ralentir le temps de chargement des pages et donner une impression de lenteur au site. En suivant les conseils suivants, vous pouvez améliorer les performances globales et l'accessibilité du site web.

• Redimensionnez les images à la taille appropriée. Redimensionnez 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 à l'aide de HTML ou CSS;
• Utilisez des formats de fichier appropriés. En général, les JPEG sont utilisés pour les photographies, les PNG pour les graphiques et les images avec transparence. Évitez les fichiers BMP ou TIFF plus volumineux;
• Compressez les images. Il existe une grande quantité d'outils en ligne qui peuvent compresser les images sans compromettre la qualité. Faites-le avant de télécharger les images sur le site web.

Remarque

Vous pouvez utiliser les sources suivantes pour compresser les images : Optimisation des graphiques raster, Optimisation des graphiques vectoriels. Quelle est la différence entre eux ? - Considérez cela dans le prochain chapitre.