Insérer une image en HTML : balise img, attributs et bonnes pratiques

Afficher une image en HTML prend trois secondes. La faire bien afficher — accessible, rapide, responsive — c’est une autre histoire. La balise <img> existe depuis les débuts du web, et pourtant elle reste mal utilisée dans une majorité de projets : attribut alt vide, dimensions absentes, format non optimisé. Résultat : des pages lentes, inaccessibles aux lecteurs d’écran, et pénalisées par Google.

Cet article couvre tout ce qu’un développeur doit savoir pour intégrer des images en HTML correctement — de la syntaxe de base aux techniques modernes comme <code>srcset, lazy loading et la balise <picture>. Avec des exemples de code réels, pas des pseudos-snippets génériques.

La balise img : syntaxe et attributs fondamentaux

Structure minimale d’une balise img

La balise <img> est une balise auto-fermante. Elle n’a pas de contenu entre une ouverture et une fermeture — elle n’a que des attributs. La forme la plus basique :

<img src="photo.jpg" alt="Description de la photo">

Deux attributs sont absolument requis : src (le chemin vers le fichier) et alt (le texte alternatif). Oublier l’un ou l’autre, c’est rater les bases.

L’attribut alt : bien plus qu’une formalité

Le texte alternatif sert à trois choses distinctes. D’abord, les lecteurs d’écran le lisent pour les utilisateurs malvoyants. Ensuite, il s’affiche si l’image ne charge pas. Enfin, Google s’en sert pour comprendre le contenu visuel.

• Alt descriptif : pour une image de contenu, décrit ce qu’on voit (alt= »Capture d’écran de l’interface de téléchargement »)
• Alt vide : pour une image purement décorative, mettre alt= » » (et non l’omettre — sans l’attribut, certains lecteurs d’écran lisent le nom du fichier)
• Alt SEO : intégre le mot-clé naturellement, sans le bourrer

Largeur et hauteur : attributs oubliés, impact réel

Spécifier width et height en HTML évite le Cumulative Layout Shift (CLS) — ce décalage visuel agaçant quand la page charge et que les images bougent le texte. Google le mesure dans ses Core Web Vitals. Un CLS élevé fait baisser le classement dans les résultats de recherche.

<img src="photo.jpg" alt="Description" width="800" height="600">

Ces valeurs indiquent les proportions, pas une taille fixe — le CSS garde la main sur l’affichage final.

⚠️ Images responsive et formats modernes

L’attribut srcset pour les écrans variés

Un écran Retina affiche deux fois plus de pixels qu’un écran standard. Servir la même image à un iPhone 15 Pro et à un vieux desktop, c’est gâcher de la bande passante d’un côté, et sacrifier la qualité de l’autre. L’attribut srcset règle ça :

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Paysage montagneux"
>

Le navigateur choisit lui-même la version la plus adaptée. Pas besoin de JavaScript, pas de plugin.

La balise picture pour les formats alternatifs

WebP réduit le poids des images de 25 à 35 % par rapport au JPEG, sans perte visible. AVIF fait encore mieux. Mais l’ancienne version d’Internet Explorer ne les supporte pas (bon, personne n’y pense en 2024, mais Safari a mis du temps). La balise <picture> propose plusieurs sources avec fallback :

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Description" width="800" height="600">
</picture>

Le navigateur prend la première source qu’il supporte. Si aucune ne convient, il charge le <img> de secours.

Le lazy loading natif

Charger toutes les images au moment où la page s’ouvre — même celles en bas de page que l’utilisateur ne verra peut-être jamais — ralentit le premier affichage. L’attribut loading="lazy" reporte le chargement jusqu’à ce que l’image approche de la zone visible :

<img src="photo.jpg" alt="Description" loading="lazy" width="800" height="600">

Attention : ne mets pas loading="lazy" sur les images above the fold (celles visibles dès le chargement). Pour celles-là, utilise plutôt loading="eager" ou omets l’attribut.

Chemins de fichiers et organisation des ressources

Chemin relatif vs chemin absolu

Deux approches existent pour pointer vers un fichier image :

Pour les images d’un projet local, le chemin relatif reste plus maintenable — déplacer le projet ne casse pas les liens.

Organisation des dossiers images

Pas de convention unique, mais quelques pratiques font consensus :

• Un dossier /images ou /assets/img à la racine du projet
• Des sous-dossiers par section ou par type (/images/blog, /images/products)
• Des noms de fichiers en minuscules, sans espaces, avec des tirets (velo-electrique-pliable.webp plutôt que Photo VE 2.jpg)

Ce dernier point n’est pas qu’une question de propreté : les noms de fichiers contribuent au référencement des images dans Google Images.

🎯 Accessibilité et SEO des images HTML

Images et référencement naturel

Google Images génère un trafic significatif — jusqu’à 22 % des recherches sur Google se font via Images selon certaines études. Pour apparaître dans ces résultats, quelques leviers directs existent :

• Attribut alt descriptif avec le mot-clé naturellement intégré
• Nom de fichier explicite (évite DSC_4872.jpg)
• Image dans un contexte sémantique cohérent (texte environnant, titre de page)
• Données structurées ImageObject en schema.org pour les images de produits ou recettes
• Fichier sitemap-images.xml soumis à Google Search Console

Pour aller plus loin sur la diffusion visuelle, notamment sur les plateformes sociales, jette un œil à cet article sur les Images réseaux sociaux : où trouver les meilleures ressources visuelles — les formats recommandés varient beaucoup d’une plateforme à l’autre.

Optimiser pour les réseaux sociaux avec Open Graph

Quand un lien est partagé sur Facebook, LinkedIn ou Twitter/X, c’est la balise Open Graph qui détermine quelle image s’affiche. Cette balise se place dans le <head>, pas dans le <body>, mais elle est directement liée à la gestion des images :

<meta property="og:image" content="https://monsite.fr/images/og-accueil.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Les dimensions recommandées : 1200 × 630 px pour la plupart des Réseaux sociaux. Une image trop petite sera recadrée ou pixelisée.

Erreurs classiques à corriger

Une liste rapide des erreurs qu’on retrouve dans à peu près tous les projets web :

• Alt manquant ou rempli avec le nom du fichier (alt= »photo1.jpg »)
• Images non compressées — une photo de 4 Mo en JPEG non optimisé, ça arrive encore trop souvent
• Absence de width et height, source de CLS
• loading="lazy" sur l’image principale visible dès le chargement
• Utiliser CSS pour redimensionner une image de 2000 px à 200 px d’affichage — autant servir directement la bonne taille

La balise <img> est déceptive dans sa simplicité. Deux attributs et c’est fonctionnel — mais fonctionnel n’est pas suffisant. Les quelques minutes passées à optimiser le format, rédiger un bon alt et spécifier les dimensions se traduisent directement en performances, en accessibilité et en référencement. C’est l’un des retours sur investissement les plus rapides en développement web.