HTML : Les Images

Parce qu'un image vaut mieux que 1000 mots...

Et parce que c'est plus sympa qu'un pavet sans fin,

Les images ont un role important sur les sites internet !

Image d'illustration, photo d'un produit, d'une situation...

Les images rendent les sites plus explicites et plus attractifs.

Comment les insérer ?

Insérer une image en HTML

Pour afficher une image en HTML, on utilise la balise <img>

Cette balise est autofermante, ce qui signifie qu'elle ne nécessite pas de balise de fermeture.

Voici sa syntaxe de base :

<img src="chemin/vers/image.jpg" alt="Description de l'image">

La balise <img> possède deux attributs principaux :

• src : Spécifie le chemin de l'image.

• alt : Décrit l'image en cas d'affichage impossible et pour les lecteurs d'écran.

1. Image stockée dans le même dossier

Si l'image se trouve dans le même dossier que notre fichier HTML :

<img src="mon-image.jpg" alt="Description de l'image">

2. Image dans un sous-dossier

Si l'image est rangée dans un dossier, il faut préciser le chemin :

<img src="images/mon-image.jpg" alt="Description de l'image">

3. Image distante (URL externe)

On peut aussi utiliser une image hébergée en ligne :

<img src="https://exemple.com/mon-image.jpg" alt="Description de l'image">

L'importance de l'attribut alt

L'attribut alt (alternative text) est fondamental pour plusieurs raisons :

1. Accessibilité : Il est lu par les lecteurs d'écran pour les personnes malvoyantes.

2. Affichage de secours : Il apparaît si l'image ne se charge pas.

3. SEO (Référencement) : Les moteurs de recherche ne voient pas les images, mais lisent le texte alternatif pour comprendre leur contenu.

✍ Bonnes pratiques :

• Utiliser une description concise et pertinente.

• Ne pas inclure "image de" ou "photo de", le contexte est suffisant.

Exemple :

<img src="chat.jpg" alt="Chat noir assis sur un fauteuil">

Réduire la taille des images avec CSS

Les images peuvent être trop grandes par défaut. On peut les redimensionner avec l'attribut style :

<img src="mon-image.jpg" alt="Description" style="width: 200px;">

Ou en CSS :

img {
  width: 200px;
}

On peut vérifier la taille des images avec l'outil d'inspection (F12 dans le navigateur).

Conclusion

Les images sont indispensables sur le web. Pour les intégrer correctement :

• Utilise le bon chemin (src).

• Définis un texte alternatif (alt).

• Ajuste leur taille si nécessaire.

Et surtout, vérifie que tes images se chargent bien en testant les chemins et URLs !