Les images en HTML

Dans l'Égypte ancienne, les murs des pyramides et des temples étaient couverts de peintures colorées - des scènes de la vie des pharaons, des dieux et des activités quotidiennes. Ces images racontaient des histoires mieux que mille hiéroglyphes. En HTML, tu as le même pouvoir ! Mohamed dit : « Une page sans images est comme une pyramide sans peintures - vide et triste. »

La balise <img> - Peindre sur les murs des pyramides

Pour placer une image sur une page HTML, on utilise la balise <img>. C'est une balise auto-fermante - elle n'a pas de balise de fermeture, comme <br> ou <hr> :

1<img src="pyramid.jpg" alt="La pyramide de Khéops à Gizeh">

La balise <img> a deux attributs obligatoires :

L'attribut src (source)

L'attribut src pointe vers le chemin du fichier image. C'est comme l'adresse d'une chambre dans la pyramide où se trouve la peinture :

1<!-- Image du même dossier -->
2<img src="sphinx.jpg" alt="Sphinx">
3
4<!-- Image d'un sous-dossier -->
5<img src="images/pharaoh.png" alt="Le pharaon Toutânkhamon">
6
7<!-- Image depuis Internet (URL) -->
8<img src="https://example.com/photos/nile.jpg" alt="Le fleuve Nil">

L'attribut alt (texte alternatif)

L'attribut alt est une description textuelle de l'image. Mohamed le compare à la description qu'un scribe écrirait à côté d'une peinture pour ceux qui ne pouvaient pas la voir. Il est obligatoire pour plusieurs raisons :

• Accessibilité - les lecteurs d'écran lisent le texte alt aux utilisateurs aveugles
• Repli - quand l'image ne se charge pas, le navigateur affiche le texte alt
• SEO - les moteurs de recherche « lisent » le texte alt pour comprendre ce que représente l'image

1<!-- Bon alt - décrit ce qui se trouve sur l'image -->
2<img src="pyramid.jpg" alt="La Grande Pyramide de Khéops au coucher du soleil">
3
4<!-- Mauvais alt - trop générique -->
5<img src="pyramid.jpg" alt="image">
6
7<!-- Image décorative - alt vide (mais l'attribut doit être présent !) -->
8<img src="decorative-border.png" alt="">

Dimensions de l'image - width et height

Les attributs width et height spécifient la taille de l'image en pixels. Indiquer les dimensions est une bonne pratique car le navigateur réserve l'espace pour l'image avant qu'elle ne se charge - la page ne « saute » pas :

1<img src="sphinx.jpg" alt="Sphinx" width="600" height="400">
2
3<!-- Tu peux n'indiquer que width - height s'ajustera proportionnellement -->
4<img src="sphinx.jpg" alt="Sphinx" width="300">

Formats d'image - Des hiéroglyphes dans différents styles

Tout comme les Égyptiens utilisaient différentes techniques de peinture (fresques, reliefs, dorures), sur Internet nous avons différents formats d'image, chacun avec ses propres avantages :

JPG / JPEG (Joint Photographic Experts Group)

• Idéal pour : les photos et les images comportant de nombreuses couleurs
• Avantages : petite taille de fichier, bonne reproduction des couleurs
• Inconvénients : perd en qualité lors de la compression (avec perte), ne prend pas en charge la transparence
• Exemple : photo d'une pyramide, portrait d'un pharaon

PNG (Portable Network Graphics)

• Idéal pour : les graphismes avec fond transparent, les logos, les icônes
• Avantages : prend en charge la transparence, compression sans perte
• Inconvénients : taille de fichier plus grande que le JPG
• Exemple : logo d'un musée égyptien avec fond transparent

GIF (Graphics Interchange Format)

• Idéal pour : les animations simples, les courtes séquences répétitives
• Avantages : prend en charge les animations, petite taille pour les graphismes simples
• Inconvénients : palette de couleurs limitée (256), faible qualité pour les photos
• Exemple : scarabée animé, hiéroglyphe clignotant

SVG (Scalable Vector Graphics)

• Idéal pour : les icônes, les logos, les schémas, les graphiques
• Avantages : se redimensionne sans perte de qualité (graphisme vectoriel), très petite taille
• Inconvénients : ne convient pas aux photos
• Exemple : icône de pyramide, carte de l'Égypte

WebP (format de Google)

• Idéal pour : remplacer le JPG et le PNG sur les pages web
• Avantages : taille plus petite que le JPG et le PNG à qualité égale, prend en charge la transparence
• Inconvénients : les anciens navigateurs peuvent ne pas le prendre en charge
• Exemple : photos optimisées sur un site web moderne

<figure> et <figcaption> - Image avec légende

Dans un musée égyptien, chaque objet exposé a une étiquette avec une description. En HTML, tu peux faire la même chose avec les balises <figure> et <figcaption> :

1<figure>
2  <img src="tutankhamun-mask.jpg" alt="Masque doré de Toutânkhamon" width="400">
3  <figcaption>Masque funéraire doré de Toutânkhamon, vers 1323 av. J.-C.</figcaption>
4</figure>

La balise <figure> enveloppe l'image (ou un autre contenu multimédia), et <figcaption> ajoute une légende. Cette approche est sémantique - le navigateur et les lecteurs d'écran savent que la légende se rapporte à l'image.

Tu peux placer plusieurs images dans un seul <figure> :

1<figure>
2  <img src="pyramid-cheops.jpg" alt="Pyramide de Khéops" width="300">
3  <img src="pyramid-khafre.jpg" alt="Pyramide de Khéphren" width="300">
4  <figcaption>Deux des trois grandes pyramides de Gizeh</figcaption>
5</figure>

Bonnes pratiques - Les conseils de Mohamed

Mohamed partage sa sagesse sur les images en HTML :

1. Utilise toujours l'attribut alt - même si l'image est décorative (alors alt="")
2. Indique les dimensions width et height - cela évite que la page « saute »
3. Choisis le bon format - JPG pour les photos, PNG pour la transparence, SVG pour les icônes
4. Optimise la taille des fichiers - les grandes images ralentissent le chargement de la page
5. Utilise <figure> avec <figcaption> - quand une image a besoin d'une légende

Résumé

Les images font partie intégrante des pages web - tout comme les peintures faisaient partie intégrante des temples égyptiens. Souviens-toi des règles les plus importantes :

• La balise <img> avec les attributs src et alt (les deux obligatoires !)
• Formats : JPG (photos), PNG (transparence), GIF (animations), SVG (vecteurs), WebP (moderne)
• <figure> + <figcaption> pour les images avec légendes
• Optimise toujours les images et indique les dimensions

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <title>Les images en HTML</title>
6</head>
7<body>
8    <h1>Galerie de l'Égypte ancienne</h1>
9
10    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Kheops-Pyramid.jpg/500px-Kheops-Pyramid.jpg"
11         alt="Pyramide de Khéops à Gizeh"
12         width="400">
13
14    <figure>
15        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/63/Sphinx_of_Giza_9059.jpg/500px-Sphinx_of_Giza_9059.jpg"
16             alt="Grand Sphinx de Gizeh"
17             width="400">
18        <figcaption>Grand Sphinx - gardien des pyramides de Gizeh</figcaption>
19    </figure>
20
21    <h2>Formats d'image</h2>
22    <ul>
23        <li><strong>JPG</strong> - photos</li>
24        <li><strong>PNG</strong> - transparence</li>
25        <li><strong>SVG</strong> - graphisme vectoriel</li>
26        <li><strong>WebP</strong> - format moderne</li>
27    </ul>
28</body>
29</html>