Les images ne parlent pas, mais en HTML elles racontent beaucoup de choses
Bonjour, cher magicien du code 🧙♂️💻
Aujourd’hui, nous faisons face à l’un des personnages les plus silencieux mais aussi les plus puissants du monde HTML : la balise <img>.
Cette balise ne parle pas, n’a pas de balise de fermeture, ne fait pas de drama comme JavaScript… mais elle peut changer complètement le destin d’une page web.
Lorsqu’elle est mal utilisée :
❌ Icône d’image cassée
❌ Page lente
❌ SEO qui te fait la tête
Lorsqu’elle est bien utilisée :
✅ Apparence professionnelle
✅ Site rapide
✅ Google qui dit : « Ce développeur sait ce qu’il fait » 😎
Si tu es prêt, commençons. Prends ton café ☕, on ouvre les images !
🧱 Qu’est-ce que <img> et ce que ce n’est pas ?
La balise <img> est utilisée pour ajouter des images à une page HTML. Mais il y a un petit détail :
La balise
<img>est auto-fermante. Cela signifie qu’elle n’a PAS de balise de fermeture.
❌ Mauvaise utilisation :
<img src="photo.jpg"></img>
✅ Bonne utilisation :
<img src="photo.jpg" alt="Texte descriptif">
🧠 Logique du navigateur :
« J’ai vu cette balise. Ok, j’affiche l’image. »
🔑 Attributs principaux – La cuisine du métier 🍳
📌 src — L’adresse de l’image
src (source) indique au navigateur d’où provient l’image.
<img src="images/chat.jpg" alt="Chat qui dort">
📂 Si l’image est dans le même dossier :
<img src="chat.jpg" alt="Chat">
🌍 Si elle vient d’internet :
<img src="https://site.com/chat.png" alt="Chat en ligne">
⚠️ Astuces :
- Les noms de fichiers sont sensibles à la casse (
Chat.jpg≠chat.jpg) - Évite les caractères spéciaux/locaux → ça fait mal plus tard 😭
🧠 alt — Le héros silencieux
Le texte alt sert pour :
- Les lecteurs d’écran
- Le SEO
- Les utilisateurs quand l’image ne se charge pas
<img src="chien.jpg" alt="Chien golden retriever jouant avec une balle">
❌ Mauvais texte alt :
alt="image1"
✅ Bon texte alt :
alt="Développeur travaillant sur un ordinateur">
📢 Règle :
Écris le texte alt comme si tu décrivais l’image à quelqu’un qui ne peut pas la voir.
📐 width et height — La question de la taille
<img src="paysage.jpg" alt="Paysage de montagne" width="400" height="250">
Mais dans le monde moderne, on utilise généralement le CSS, pas le HTML :
img {
max-width: 100%;
height: auto;
}
📱 Qu’est-ce que ça apporte ?
- Compatibilité mobile
- Pas de débordement
- Design responsive ❤️
⚡ Conseils de performance – Fais décoller ton site 🚀
💤 loading="lazy"
<img src="grande-image.jpg" alt="Image sur une longue page" loading="lazy">
🧠 Le navigateur dit :
« Je la chargerai quand l’utilisateur fera défiler la page. »
Résultat :
- Chargement plus rapide ⚡
- Utilisateurs plus heureux 😄
🗜️ Réduis la taille des images
HTML ne redimensionne pas les images — il les affiche seulement.
❌ Télécharger une image de 5000px et dire width=300
✅ Optimise tes images :
- Utilise le format WebP
- Outils comme TinyPNG, ImageOptim
🧩 Professionnalisme avec <figure> et <figcaption>
<figure>
<img src="foret.jpg" alt="Paysage de forêt brumeuse">
<figcaption>6h du matin, pas de café, motivation à 3 % 🌫️</figcaption>
</figure>
🎯 Qu’as-tu gagné ?
- HTML sémantique
- Meilleur SEO
- Structure plus significative
🚫 Erreurs les plus courantes (À éviter 🙃)
❌ Ne pas écrire de texte alt
❌ Traiter les images comme des arrière-plans
❌ Utiliser du PNG partout
❌ Chemins de fichiers en désordre
🧪 Mini exemple pratique
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Démo de la balise Img</title>
<style>
img { max-width: 100%; height: auto; }
</style>
</head>
<body>
<h1>Carte de profil</h1>
<img src="profile.jpg" alt="Développeur souriant">
</body>
</html>
🎯 TL;DR du TL;DR
<img>n’a pas de balise de fermeturesrcdonne l’adresse,altdonne le sens- Contrôle la taille avec le CSS
- N’oublie pas la performance
- Image = contenu
🚀 Derniers mots
Ajouter une image en HTML est facile.
Mais l’ajouter correctement, rapidement, de manière accessible et pleine de sens, c’est ce qui fait de toi un vrai développeur 😎
