Les images sont un élément essentiel de la conception web. Elles rendent une page web attrayante pour un visiteur. Elles peuvent être facilement incluses dans un document HTML à l'aide de la balise <img>.

• src : attribut requis. Sa valeur correspond au chemin d'accès à l'image. Le chemin peut être absolu ou relatif ;

• alt : attribut requis. Fournit un texte alternatif qui s'affiche lorsque l'image ne peut pas être affichée ;

• width et height : spécifient la taille de l'image en pixels. Sans ces attributs, l'image sera affichée dans sa taille d'origine.

Attribut alt

La description de l'image doit être informative et significative. Elle aide à décrire l'image pour les personnes malvoyantes ou incapables de la voir. Ainsi, le navigateur lira l'attribut alt, et l'utilisateur pourra comprendre pourquoi ce site web contient cette image.

Imaginons l'exemple suivant. Vous disposez d'une source sur les courses hippiques. Vous souhaitez montrer comment les concurrents se préparent à la course.

Mauvaise valeur pour l'attribut alt :

Une bonne valeur pour l'attribut alt serait :

Le texte alternatif « Un homme sur un cheval » est trop générique et manque de contexte. Il fournit une description basique, mais n'apporte pas de détails utiles sur la scène ou l'objectif de l'image.

Attribut src

L'attribut src peut utiliser à la fois des chemins absolus et relatifs pour spécifier l'emplacement du fichier image.

Chemin absolu

Il spécifie l'URL complète du fichier image sur le serveur web. Par exemple :

Cela signifie que le fichier image situé à l'adresse https://example.com/images/image.jpg se trouve sur Internet. Toute personne peut accéder à l'image en utilisant ce lien.

Veuillez examiner l'exemple réel suivant dans le bac à sable de code ci-dessous :

Remarque

Pour examiner la structure des dossiers de fichiers, faites glisser le curseur sur le côté gauche de l'interface du bac à sable de code. Dans le coin supérieur gauche, vous trouverez un bouton burger représenté par trois bandes. En cliquant sur ce bouton, vous accéderez à l'organisation des dossiers de fichiers.

Chemin relatif

Indique l'emplacement du fichier image par rapport au document actuel. Par exemple :

Cela signifie que le fichier image.jpg se trouve dans le répertoire images.

Veuillez examiner l'exemple réel fourni dans le bac à sable de code ci-dessous. Vous y trouverez le dossier images, qui contient le fichier sun.png.

Remarque

Pour résumer la différence entre les chemins relatifs et absolus, un chemin absolu représente le lien réel que n'importe qui peut utiliser pour accéder à une image. En revanche, un chemin relatif est un lien dans le contexte de votre propre projet. Il fait référence à une image et à un chemin locaux accessibles à toute personne travaillant sur le projet.