# Image

## Description

Afin d'insérer une image dans son document, il convient d'utiliser la balise `<img>`. Cette dernière est particulière car elle n'a pas besoin de balise dite “fermante”

C'est une balise qui fait partie de la famille des [“Éléments remplacés”.](https://developer.mozilla.org/fr/docs/Web/CSS/Replaced_element)

Cette balise nécessite deux attributs obligatoires: `src` et `alt` et deux attributs recommandés: `width` et `height`.

L'attribut `src` nous permet de renseigner la source de l'image. Que ce soit une URL distante ou bien un chemin vers une image locale.

L'attribut `alt` est à renseigner si l'image est “porteuse de sens”. **Si l'image est décorative, l'attribut `alt` doit rester vide mais ne doit pas être supprimé.**

Les attributs `width` et `height` sont à renseigner dans la mesure du possible afin que le navigateur réserve la place nécessaire à l'image au moment du chargement de la page.

## Exemples

```html
<img
  src="./images/banniere-promo.jpg"
  alt="Économisez 40% avec le code BIENVENUE"
  width="600"
  height="60"
/>
```

```html
<img
  src="https://photos-de-chats.fr/felix.png"
  alt=""
  width="300"
  height="400"
/>
```