Insérer les Images

Insertion d'images dans les pages Web

Les images améliorent l'apparence visuelle des pages Web en les rendant plus intéressantes et colorées.

La balise <img> est utilisée pour insérer des images dans les documents HTML. C'est une balise orpheline et ne contient que des attributs. La syntaxe de la balise <img> peut être donnée avec :

<img src =" lien " alt=" description ">

L'exemple suivant insère des images sur la page Web :

<img src="profile.jpg" alt="photo de profil">

<img src="letecode.png" alt="logo">

Chaque image doit porter au moins deux attributs : l'attribut src et un attribut alt.

L'attribut src indique au navigateur où trouver l'image. Sa valeur est l'URL du fichier image.

Alors que l'attribut alt fournit un texte alternatif pour l'image, s'il n'est pas disponible ou ne peut pas être affiché pour une raison quelconque. Sa valeur doit être un substitut significatif de l'image.

Remarque : comme <br>, la balise <img> est également un élément vide et n'a pas de balise fermante. Cependant, en XHTML, il se ferme en se terminant par " />".

Conseil : L'attribut alt obligatoire fournit une description textuelle alternative pour une image si, pour une raison quelconque, un utilisateur ne peut pas l'afficher en raison d'une connexion lente, si l'image n'est pas disponible à l'URL spécifiée ou si l'utilisateur utilise un lecteur d'écran ou un navigateur non graphique. .

Définir la largeur et la hauteur d'une image

Les attributs width et height sont utilisés pour spécifier la largeur et la hauteur d'une image.

Les valeurs de ces attributs sont interprétées en pixels par défaut.

<img src="john.jpg" alt="profile de john" width="300" height="300">

<img src="letecode.jpg" alt="logo" width="250" height="150">

Vous pouvez également utiliser l'attribut style pour spécifier la largeur et la hauteur des images. Il empêche les feuilles de style de modifier accidentellement la taille de l'image, car le style en ligne a la priorité la plus élevée.

<img src="john.jpg" alt="profile de john" style="width: 300px; height: 300px;">
<img src="letecode.jpg" alt="logo" style="width: 250px; height: 150px;">

Remarque : Il est recommandé de spécifier à la fois les attributs width et height pour une image, afin que le navigateur puisse allouer autant d'espace à l'image avant qu'elle ne soit téléchargée. Sinon, le chargement de l'image peut provoquer une distorsion ou un scintillement dans la mise en page de votre site Web.

Utilisation de la balise d'image en HTML5

Parfois, la mise à l'échelle d'une image vers le haut ou vers le bas pour s'adapter à différents appareils (ou tailles d'écran) ne fonctionne pas comme prévu. En outre, la réduction de la dimension de l'image à l'aide de l' attribut ou de la propriété width et height ne réduit pas la taille du fichier d'origine. Pour résoudre ces problèmes, HTML5 a introduit la balise <picture> qui vous permet de définir plusieurs versions d'une image pour cibler différents types d'appareils.

La balise <picture> contient zéro ou plusieurs éléments <source>, chacun faisant référence à une source d'image différente, et une balise <img> à la fin. De plus, chaque élément <source> a l'attribut media qui spécifie une condition de média (similaire à media-Query) qui est utilisée par le navigateur pour déterminer quand une source particulière doit être utilisée. Essayons un exemple :

<picture>

    <source media="(min-width: 1000px)" srcset="logo-large.png">
    <source media="(max-width: 500px)" srcset="logo-small.png">
    <img src="logo-default.png" alt="My logo">

</picture>

Remarque : Le navigateur évaluera chaque élément <source> enfant et choisira celui qui correspond le mieux ; si aucune correspondance n'est trouvée, l'URL de l' attribut src de la balise <img> est utilisée. De plus, la balise <img> doit être spécifiée comme dernier enfant de l'élément <picture>.

Travailler avec des images cliquables

Une carte d'image vous permet de définir des points chauds sur une image qui agit comme un lien hypertexte .

L'idée de base derrière la création d'une image cliquable est de fournir un moyen simple de lier différentes parties d'une image sans la diviser en fichiers image distincts. Par exemple, une carte du monde peut avoir chaque pays hyperlien vers des informations supplémentaires sur ce pays.

Essayons un exemple simple pour comprendre comment cela fonctionne réellement :

<img src="objects.png" usemap="#objects" alt="Objects">

<map name="objects">

    <area shape="circle" coords="137,231,71" href="clock.html" alt="Clock">
    <area shape="poly" coords="363,146,273,302,452,300" href="sign.html" alt="Sign">
    <area shape="rect" coords="520,160,641,302" href="book.html" alt="Book">

</map>

L'attribut name de la balise <map> est utilisé pour référencer la carte à partir de la balise <img> à l'aide de son attribut usemap. La balise <area> est utilisée à l'intérieur de l'élément <map> pour définir les zones cliquables sur une image. Vous pouvez définir n'importe quel nombre de zones cliquables dans une image.

Remarque : L'image cliquable ne doit pas être utilisée pour la navigation sur le site Web. Ils ne sont pas compatibles avec les moteurs de recherche. Une utilisation valide d'une carte-image est avec une carte géographique.