Insertion d'images avec la balise img
Insertion d'images avec la balise img
- 1La balise `<img>` permet d'insérer des images dans une page web avec l'attribut `src` pour la source
- 2L'attribut `alt` est obligatoire pour l'accessibilité et décrit l'image pour les lecteurs d'écran
- 3Les attributs `width` et `height` contrôlent les dimensions d'affichage de l'image
Introduction
Les images sont un élément fondamental du web moderne. Elles captent l'attention, illustrent des concepts et enrichissent l'expérience utilisateur. Dans cette leçon, nous allons maîtriser la balise <img> et ses attributs essentiels pour intégrer des images de manière professionnelle.
La balise img et ses attributs essentiels
Structure de base
La balise <img> est une balise auto-fermante (elle n'a pas de balise de fermeture). Voici sa structure fondamentale :
1<img src="chemin/vers/image.jpg" alt="Description de l'image">Les quatre attributs fondamentaux
| Attribut | Obligatoire | Fonction | Exemple |
|---|---|---|---|
src | ✅ Oui | Définit la source de l'image | src="images/logo.png" |
alt | ✅ Oui (accessibilité) | Texte alternatif descriptif | alt="Logo de l'entreprise" |
width | ❌ Non | Largeur d'affichage en pixels | width="300" |
height | ❌ Non | Hauteur d'affichage en pixels | height="200" |
L'attribut src : définir la source
L'attribut src (source) indique au navigateur où trouver l'image à afficher. Il accepte deux types de chemins :
Chemins relatifs (recommandés)
1<!-- Image dans le même dossier -->
2<img src="produit.jpg" alt="Nouveau produit">
3
4<!-- Image dans un sous-dossier -->
5<img src="images/produit.jpg" alt="Nouveau produit">
6
7<!-- Image dans un dossier parent -->
8<img src="../photos/produit.jpg" alt="Nouveau produit">Chemins absolus
1<!-- URL complète -->
2<img src="https://www.example.com/images/produit.jpg" alt="Nouveau produit">
3
4<!-- Chemin depuis la racine du site -->
5<img src="/assets/images/produit.jpg" alt="Nouveau produit">💡 À retenir : Privilégiez les chemins relatifs pour une meilleure portabilité de votre code et une maintenance facilitée.
L'attribut alt : l'accessibilité avant tout
L'attribut alt fournit une description textuelle de l'image, essentielle pour :
- Les utilisateurs malvoyants utilisant des lecteurs d'écran
- L'affichage quand l'image ne se charge pas
- Le référencement SEO
Bonnes pratiques pour l'attribut alt
1<!-- ✅ BIEN : Description précise et utile -->
2<img src="chat-noir.jpg" alt="Chat noir aux yeux verts assis sur un coussin rouge">
3
4<!-- ✅ BIEN : Image décorative -->
5<img src="decoration.png" alt="" role="presentation">
6
7<!-- ❌ MAL : Description inutile -->
8<img src="chat.jpg" alt="Image de chat">
9
10<!-- ❌ MAL : Répétition du nom de fichier -->
11<img src="chat-noir.jpg" alt="chat-noir.jpg">Le saviez-vous ?
Les lecteurs d'écran utilisés par les personnes malvoyantes lisent à haute voix le contenu de l'attribut alt, permettant ainsi de 'voir' les images grâce au son
— Plus de 285 millions de personnes dans le monde souffrent de déficiences visuelles selon l'OMS
⚠️ Attention : Un attribut
altvide (alt="") est accepté pour les images purement décoratives, mais il doit être présent !
Les attributs width et height : contrôler les dimensions
Ces attributs définissent la taille d'affichage de l'image en pixels :
1<!-- Dimensions fixes -->
2<img src="logo.png" alt="Logo entreprise" width="200" height="100">
3
4<!-- Largeur seule (hauteur proportionnelle) -->
5<img src="banner.jpg" alt="Bannière promotionnelle" width="800">
6
7<!-- Hauteur seule (largeur proportionnelle) -->
8<img src="portrait.jpg" alt="Portrait du directeur" height="300">Exemple complet avec tous les attributs
1<!DOCTYPE html>
2<html lang="fr">
3<head>
4 <meta charset="UTF-8">
5 <title>Galerie Produits</title>
6</head>
7<body>
8 <h1>Nos Nouveaux Produits</h1>
9
10 <div class="produits">
11 <img src="images/smartphone.jpg"
12 alt="Smartphone dernière génération avec écran 6.5 pouces et triple caméra"
13 width="250"
14 height="300">
15
16 <img src="images/laptop.jpg"
17 alt="Ordinateur portable ultrabook 15 pouces couleur gris métallique"
18 width="350"
19 height="250">
20
21 <img src="images/tablette.jpg"
22 alt="Tablette tactile 10 pouces avec clavier détachable"
23 width="300"
24 height="200">
25 </div>
26</body>
27</html>Gestion des erreurs et optimisation
Que se passe-t-il si l'image ne se charge pas ?
🎯 En pratique : Testez toujours vos pages en désactivant les images dans votre navigateur pour vérifier que les textes alternatifs sont pertinents.
Bonnes pratiques pour l'optimisation
-
Format d'image approprié :
- JPG pour les photos
- PNG pour les images avec transparence
- SVG pour les icônes et logos
-
Optimisation des dimensions :
1<!-- Image originale : 2000x1500px -->
2<!-- Affichage souhaité : 400x300px -->
3<img src="photo-optimisee-400x300.jpg"
4 alt="Paysage montagneux au coucher du soleil"
5 width="400"
6 height="300">- Attributs modernes pour la performance :
1<img src="image.jpg"
2 alt="Description"
3 width="400"
4 height="300"
5 loading="lazy"
6 decoding="async">Points clés à retenir
💡 À retenir : La balise
<img>est auto-fermante et nécessite obligatoirement les attributssrcetaltpour un code valide et accessible.
⚠️ Attention : Ne jamais omettre l'attribut
alt, même s'il est vide pour les images décoratives. C'est crucial pour l'accessibilité web.
🎯 En pratique : Utilisez des noms de fichiers descriptifs et organisez vos images dans des dossiers logiques (ex:
images/produits/,images/logos/) pour faciliter la maintenance.
Validation des acquis
Vous maîtrisez maintenant les fondamentaux de l'insertion d'images en HTML ! Dans la prochaine leçon, nous explorerons les techniques avancées comme les images responsives et les différents formats d'images modernes.