Ah, la balise `<img>` !
Si tu fais du HTML, tu l’as forcément croisée. C’est elle qui permet d’afficher des images sur une page web. Simple en apparence, mais si tu veux vraiment bien l’utiliser, il y a pas mal de trucs à savoir. Alors, installe-toi confortablement : on va tout décortiquer ensemble, sans jargon inutile mais avec un max d’infos utiles.
Prêt ? C’est parti !
C’est quoi exactement la balise <img> ?
La balise `<img>`, c’est un peu comme le cadre photo de ton site web. Tu lui dis où trouver l’image (avec l’attribut `src`), et elle s’occupe de l’afficher. Mais contrairement à d’autres balises HTML, elle est auto-fermante : pas besoin de faire un truc comme `<img></img>`.
Une seule ligne suffit.
Exemple basique :
<img src="image.jpg" alt="Description de l'image">- src : C’est le chemin vers ton image. Ça peut être un fichier local ou une URL.
- alt : C’est le texte alternatif qui s’affiche si l’image ne charge pas (ou pour les lecteurs d’écran). Hyper important pour l’accessibilité et le SEO
Les attributs clés pour maîtriser la balise <img>
Alors oui, avec juste `src` et `alt`, ça fonctionne. Mais si tu veux vraiment optimiser ton site (et éviter les galères), il y a plein d’autres attributs super utiles :
ATTRIBUT | A quoi ça sert ? |
src | Indique où trouver ton image (obligatoire) |
alt | Fournit une description alternative (essentiel pour l’accessibilité) |
width | Définit la largeur de l’image (en pixels ou %) |
height | Définit la hauteur de l’image (en pixels ou %) |
loading | Permet de différer le chargement des images avec `lazy`. |
srcset | Fournit plusieurs versions d’une image selon les résolutions d’écran. |
sizes | Spécifie comment afficher l’image selon la largeur de l’écran (viewport) |
Exemple avec plusieurs attributs :
<img
src="image.jpg"
alt="Une belle image"
width="600" height="400"
loading="lazy"
>Ici, on a une image qui :
- mesure 600x400 pixels,
- se charge uniquement quand elle est visible à l’écran grâce à `loading="lazy"`,
- et qui a une description alternative pour les cas où elle ne s’affiche pas.
Les bonnes pratiques pour utiliser <img> comme un pro
Ok, maintenant qu’on a vu les bases, passons aux choses sérieuses. Si tu veux que tes images soient belles, rapides à charger et accessibles à tous, voici quelques astuces indispensables.
1. Optimise tes images avant de les mettre en ligne
- Utilise des formats modernes comme WebP ou AVIF. Ces formats sont plus légers que JPG ou PNG tout en gardant une super qualité.
- Comprime tes fichiers avec des outils comme TinyPNG ou Squoosh. Une image trop lourde = un site lent.
2. Charge tes images intelligemment
Avec l’attribut `loading`, tu peux différer le chargement des images qui ne sont pas visibles tout de suite sur la page. Résultat : ton site est plus rapide à charger.
Exemple :
<img src="image.jpg" alt="Description" loading="lazy">3. Adapte tes images aux écrans modernes
Aujourd’hui, entre les mobiles, les écrans Retina et les écrans géants, il faut être prêt à tout. Avec `srcset`, tu peux fournir plusieurs versions d’une image et laisser le navigateur choisir celle qui convient le mieux.
Exemple avec `srcset` :
<img
src="petite-image.jpg"
srcset="grande-image.jpg 1024w, moyenne-image.jpg 640w"
sizes="(max-width: 768px) 100vw, 50vw"
alt="Image responsive"
>- Ici, si l’écran fait moins de 768px de large, on affiche une version adaptée.
- Résultat : moins de données téléchargées sur mobile = tout le monde est content.
4. Pense accessibilité
Tout le monde n’a pas une vision parfaite ou une connexion rapide. Ton attribut `alt`, c’est leur meilleur ami :
- Décris ce que montre l’image.
- Si c’est purement décoratif (genre un motif), laisse `alt=""`.
5. Anticipe le rendu visuel
Définis toujours les dimensions (`width`, `height`) dans ta balise `<img>`. Ça permet au navigateur de réserver un espace pour l’image pendant qu’elle charge et évite ce qu’on appelle le *layout shift* (le contenu qui saute partout).
Accessibilité et SEO : pourquoi c’est important
Accessibilité
Imagine quelqu’un qui utilise un lecteur d’écran parce qu’il ne peut pas voir les images. Si ton attribut `alt` est bien rempli, il saura ce que montre ton image sans problème.
Pour des images complexes (graphes, schémas), ajoute une légende avec `<figcaption>` :
<figure>
<img src="graphique.jpg" alt="Graphique des ventes">
<figcaption>Évolution des ventes sur 2023.</figcaption>
</figure>SEO
Les moteurs de recherche adorent quand tes images sont bien décrites :
- Ton attribut `alt` doit contenir des mots-clés pertinents.
- Nomme tes fichiers correctement : *chat-noir.jpg* est bien mieux que *IMG12345.jpg*.
Exemple complet et optimisé
Pour finir en beauté, voici un exemple combinant toutes ces bonnes pratiques :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple Image Optimisée</title>
</head>
<body>
<figure>
<img src="images/plage-small.jpg"
srcset="images/plage-large.jpg 1200w, images/plage-medium.jpg 800w"
sizes="(max-width: 768px) 100vw, 50vw"
alt="Coucher de soleil sur une plage"
width="800"
height="600"
loading="lazy">
<figcaption>Un magnifique coucher de soleil sur une plage tropicale.</figcaption>
</figure>
</body>
</html>Les erreurs classiques à éviter
1. Oublier l’attribut `alt`. Sérieusement, ne fais pas ça.
2. Charger des images énormes sans compression.
3. Ignorer les dimensions (`width`, `height`) et provoquer des décalages visuels moches.
4. Ne pas utiliser `srcset`, surtout si ton site est consulté sur mobile.
Voilà ! Maintenant tu sais tout sur la balise `<img>`.
Elle peut sembler basique au premier abord, mais bien utilisée, elle fait toute la différence entre un site moyen et un site pro. Alors prends soin de tes images : elles méritent autant d’amour que ton code ! 😉