HTML
Images

Syntaxe

• <img src="" alt="">

Paramètres

Créer une image

Pour ajouter une image à une page, utilisez la balise image.

Les tags d'image ( img ) n'ont pas de balise de fermeture. Les deux principaux attributs que vous attribuez à la balise img sont src , la source d'image et alt , qui est un autre texte décrivant l'image.

<img src="images/hello.png" alt="Hello World">

Vous pouvez également obtenir des images depuis une URL Web:

<img src="https://i.stack.imgur.com/ALgZi.jpg?s=48&g=1" alt="StackOverflow user Caleb Kleveter">

Remarque: les images ne sont pas techniquement insérées dans une page HTML, les images sont liées à des pages HTML. La <img> crée un espace de maintien pour l'image référencée.

Il est également possible d'intégrer des images directement dans la page en utilisant base64:

<img src="data:image/png;base64,iVBOR..." alt="Hello World">

Conseil: Pour lier une image à un autre document, imbriquez simplement la <img> dans les balises <a> .

Largeur et hauteur de l'image

Remarque: Les attributs width et height ne sont pas obsolètes sur les images et ne l'ont jamais été. Leur utilisation a été rendue beaucoup plus stricte.

Les dimensions d'une image peuvent être spécifiées à l'aide des attributs width et height de la balise image:

<img src="images/200x200-img.png" width="200" height="200" alt="A 200x200 image">

En spécifiant la width et la height d'une image, votre structure donne au navigateur un aperçu de la disposition de la page, même si vous spécifiez uniquement la taille réelle de l'image. Si les dimensions de l'image ne sont pas spécifiées, le navigateur devra recalculer la mise en page de la page après le chargement de l'image, ce qui pourrait provoquer un "saut de page" de la page pendant le chargement.

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="0" height="0" alt="A hidden tracking image">

<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">

<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">
<img src="images/200x200-img.png" width="1" height="200" alt="A 1x200 image">

Choisir un texte alt

Alt-text est utilisé par les lecteurs d'écran pour les utilisateurs malvoyants et par les moteurs de recherche. Il est donc important d'écrire un bon texte alt pour vos images.

Le texte devrait être correct même si vous remplacez l'image par son attribut alt. Par exemple:

<!-- Incorrect -->
<img src="anonymous.png" alt="Anonymous user avatar"/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit icon"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete icon"/></a>

Sans les images, cela ressemblerait à ceci:

Anonymous user avatar Un utilisateur anonyme a écrit:

Lorem ipsum dolor sed.

Icône d'édition / Icône de suppression

Pour corriger ceci:

• Supprimez le texte alternatif pour l'avatar. Cette image ajoute des informations pour les utilisateurs voyants (une icône facilement identifiable pour montrer que l'utilisateur est anonyme) mais cette information est déjà disponible dans le texte. ¹
• Supprimez l'icône du texte alt pour les icônes. Sachant que ce serait une icône si elle l'était, cela n'aide pas à transmettre son objectif réel.

<!-- Correct -->
<img src="anonymous.png" alt=""/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete"/></a>

Un utilisateur anonyme a écrit:

Lorem ipsum dolor sed.

Editer / Supprimer

Notes de bas de page

¹ Il y a une différence sémantique entre l'inclusion d'un attribut alt vide et son exclusion totale. Un attribut alt vide indique que l'image n'est pas une partie clé du contenu (comme c'est le cas dans ce cas - c'est juste une image additive qui n'est pas nécessaire pour comprendre le reste) et peut donc être omis du rendu. Cependant, l'absence d'un attribut alt indique que l'image est un élément clé du contenu et qu'il n'y a tout simplement pas d'équivalent textuel disponible pour le rendu.

Image réactive utilisant l'attribut srcset

Utiliser srcset avec des tailles

<img sizes="(min-width: 1200px) 580px,
      (min-width: 640px) 48vw,
      98vw"
    srcset="img/hello-300.jpg 300w,
      img/hello-600.jpg 600w,
      img/hello-900.jpg 900w,
      img/hello-1200.jpg 1200w"
    src="img/hello-900.jpg" alt="hello">

sizes sont comme des requêtes média, décrivant l'espace occupé par l'image dans la fenêtre d'affichage.

• Si viewport est supérieur à 1200px, l'image est exactement de 580px (par exemple, notre contenu est centré dans un conteneur d'une largeur maximale de 1200px. L'image en prend la moitié moins les marges).
• Si viewport se situe entre 640px et 1200px, l'image prend 48% de la fenêtre (par exemple, l'image est mise à l'échelle avec notre page et prend la moitié de la largeur de la fenêtre moins les marges).
• Si viewport a une autre taille, dans notre cas inférieure à 640px, l'image prend 98% de la fenêtre (par exemple, l'image est mise à l'échelle avec notre page et prend toute la largeur de la fenêtre moins les marges). La condition du support doit être omise pour le dernier élément.

srcset dit simplement au navigateur quelles images sont disponibles et quelles sont leurs tailles.

• img/hello-300.jpg est large de 300px,
• img/hello-600.jpg est large de 600px,
• img/hello-900.jpg est large de 900px,
• img/hello-1200.jpg est large de 1200px

src est toujours une source d'image obligatoire. En cas d'utilisation avec srcset , src servira une image de repli au cas où le navigateur ne supporterait pas srcset .

Utiliser srcset sans taille

<img src="img/hello-300.jpg" alt="hello"
     srcset="img/hello-300.jpg 1x, 
       img/hello-600.jpg 2x,
       img/hello-1200.jpg 3x">

srcset fournit la liste des images disponibles, avec un rapport dispositif de pixel x descripteur.

• si le ratio pixel-appareil est de 1, utilisez img/hello-300.jpg
• si le ratio pixel-appareil est de 2, utilisez img/hello-600.jpg
• si le ratio pixel-appareil est de 3, utilisez img/hello-1200.jpg

src est toujours une source d'image obligatoire. En cas d'utilisation avec srcset , src servira une image de repli au cas où le navigateur ne supporterait pas srcset .

Image réactive utilisant un élément d'image

Code

<picture>
  <source media="(min-width: 600px)" srcset="large_image.jpg">
  <source media="(min-width: 450px)" srcset="small_image.jpg">
  <img src="default_image.jpg" style="width:auto;">
</picture>

Usage

Pour afficher des images différentes sous différentes largeurs d’écran, vous devez inclure toutes les images en utilisant l’étiquette source dans une balise image, comme illustré dans l’exemple ci-dessus.

Résultat

• Sur les écrans avec une largeur d'écran> 600px, il affiche large_image.jpg
• Sur les écrans avec une largeur d'écran supérieure à 450 pixels, on voit small_image.jpg
• Sur les écrans avec une autre largeur d'écran, il affiche default_image.jpg