(Alt Text, Lazy Load, Légendes Srcset – Version HTML Ultra Deluxe)**
Les images sont l’âme d’une page web.
Et en HTML, la balise <img> est…
ce petit sorcier légendaire qui donne vie à cette âme.
Imagine mon amour :
Tu ouvres une page web et — bam !
Les images apparaissent comme si elles te faisaient un clin d’œil : taille parfaite, vitesse incroyable, qualité divine.
Dans ce guide, je vais t’enseigner :
les secrets de la balise <img>
l’art du texte alternatif
la magie de la performance
les techniques zen du lazy-loading
et les légendes du système srcset
Si tu es prêt(e), on ouvre les portes de l’univers des images, mon cœur ✨
1) Qu’est-ce que la balise <img> ? — “La Perfection en Une Ligne”
C’est l’un des éléments les plus “mignons”, les plus innocents, mais aussi l’un des plus puissants de tout HTML :
<img src="cat.jpg" alt="Un chat très mignon" />
Une seule ligne.
Et pourtant, un véritable univers à l’intérieur.
✔ Charge l’image
✔ Affiche un texte alternatif
✔ Améliore le SEO
✔ Renforce l’accessibilité
✔ Supporte le lazy loading
✔ Fonctionne avec srcset
✔ Joue parfaitement avec le CSS
Bref :<img> = Le Héros Silencieux du Web
2) L’Art du Texte Alternatif — Le Sort Qui Fait Tomber Google Amoureux
L’attribut alt décrit ce qu’il y a dans l’image.
Pourquoi est-ce important ?
✔ Affiche un texte si l’image ne charge pas
✔ Les lecteurs d’écran le lisent aux utilisateurs malvoyants
✔ Google comprend ton image grâce à lui
✔ Un bonus SEO secret, comme une médaille d’or cachée
Mauvais alt :
<img src="cat.png" alt="image" />
Qu’est-ce que c’est mon cœur ?
“Image” ne veut rien dire. Google est perdu.
Parfait alt :
<img src="cat.png" alt="Un chat gris et duveteux dormant sur un rebord de fenêtre" />
Là, tu dis à Google :
“Aime-moi. Monte-moi dans le classement.”
3) Si tu ne mets pas Width & Height — Bienvenue en Enfer du Layout Shift
Tu sais quand la page saute pendant le chargement ?
Quand tout bouge comme un bébé surexcité ?
Ça s’appelle CLS – Cumulative Layout Shift.
Pour éviter ça, indique les dimensions :
<img src="hero.jpg" alt="Image héro" width="800" height="500" />
Le navigateur réserve l’espace.
Plus de tremblements.
Et Google dit :
“Tu maîtrises, bébé.”
4) Lazy Loading — “Ne Charge Pas Tant Que Je Ne Te Vois Pas”
Lazy load = “Si l’image n’est pas encore visible, ne gaspille pas de data.”
Tellement simple.
Tellement beau.
Tellement nécessaire.
<img src="big-photo.jpg" alt="Vue montagneuse" loading="lazy" />
Avantages :
✔ Page beaucoup plus rapide
✔ Économie de data sur mobile
✔ Performance qui explose
Un site moderne sans lazy-loading = un péché 😭
5) Srcset et Sizes — “Envoie la Meilleure Image Pour Chaque Appareil”
Mobile, tablette, laptop, écran 4K…
Chaque écran a besoin d’un fichier adapté.
C’est là que srcset entre en scène :
<img
src="cat-800.jpg"
srcset="
cat-400.jpg 400w,
cat-800.jpg 800w,
cat-1600.jpg 1600w
"
sizes="(max-width: 600px) 100vw, 800px"
alt="Chat dormant près de la fenêtre"
/>
Le navigateur choisit :
📱 Mobile → 400w
💻 Laptop → 800w
🖥️ 4K géant → 1600w
Toi ?
Tu bois ton café tranquillement.
Le navigateur fait tout le travail
6) Images Responsives — Beauté Pixel Parfaite
Pour rendre tes images fluides :
img {
max-width: 100%;
height: auto;
}
Résultat :
✔ Pas de débordements
✔ Adaptation parfaite aux écrans
✔ Mise en page stable
✔ Développeurs heureux
Images responsives = utilisateurs heureux 💖
7) SEO et <img> — Une Lettre d’Amour à Google
Google ne “voit” pas les images comme nous.
Aide-le :
✔ Utilise des noms de fichiers descriptifs
❌ IMG_2221.png
✔ sleeping-gray-cat.jpg
✔ Texte alt cohérent
✔ width / height
✔ srcset = jackpot SEO
Google te place plus haut.
Plus de trafic = plus de succès = plus de bisous
8) Optimisation d’Images — Astuces Pour Charger 50x Plus Vite
Niveau pro:
1) Utilise WebP
PNG → lourd
JPG → passable
WebP → 30–70% plus léger
<img src="cat.webp" alt="Chat" />
2) Utilise AVIF (encore plus léger)
<picture>
<source srcset="cat.avif" type="image/avif">
<source srcset="cat.webp" type="image/webp">
<img src="cat.jpg" alt="Chat">
</picture>
3) Compresse tes images
TinyPNG, Squoosh, ImageOptim.
4) Utilise un CDN
Chargement plus rapide + excellent cache.
9) Balise <picture> — L’Avengers des Images
La balise picture = le patron.
<picture>
<source srcset="cat.avif" type="image/avif">
<source srcset="cat.webp" type="image/webp">
<img src="cat.jpg" alt="Chat mignon dormant" loading="lazy">
</picture>
Le navigateur :
AVIF ? → oui
WebP ? → sinon
Rien ? → JPG
Qualité max + poids min = magie
10) Astuces Pro — “Ceux Qui Savent Ça Obtiennent Une Augmentation”
💡 Calcule les tailles d’image pendant le design
💡 Les images above-the-fold ne doivent pas être lazy
💡 Utilise LQIP / Blur-up comme Instagram
💡 Utilise SVG pour logos et icônes
💡 Pour les images décoratives : alt=””
<img src="divider.svg" alt="" role="presentation">
11) L’Exemple Ultime — Tout en Un
<picture>
<source
type="image/avif"
srcset="
landscape-400.avif 400w,
landscape-800.avif 800w,
landscape-1600.avif 1600w
"
/>
<source
type="image/webp"
srcset="
landscape-400.webp 400w,
landscape-800.webp 800w,
landscape-1600.webp 1600w
"
/>
<img
src="landscape-800.jpg"
alt="Paysage montagneux au coucher du soleil, enveloppé d'une brume douce"
width="800"
height="500"
loading="lazy"
sizes="(max-width: 600px) 100vw, 800px"
/>
</picture>
Ce code :
✔ impressionne Google
✔ enchante l’utilisateur
✔ booste la performance
✔ te rend ultra pro💖
12) Conclusion : La Balise <img> Est Petite Mais Aussi Puissante Que l’Univers
Maintenant tu sais :
✔ comment écrire un bon alt
✔ comment faire du lazy-loading
✔ comment fonctionne srcset
✔ comment utiliser picture
✔ comment booster ton SEO
✔ comment optimiser tes images
✔ comment créer une expérience visuelle professionnelle
Tu n’ajoutes plus simplement des images…
Tu crées de l’art.
Et pour quelqu’un d’aussi talentueux, doux et brillant que toi,
ces techniques te vont parfaitement
