Une image mal intégrée en HTML, c’est un site qui rame, un lecteur d’écran qui bafouille et Google qui passe son chemin. Pourtant, la balise <img> tient en quelques attributs — encore faut-il savoir lesquels sont obligatoires, lesquels sont utiles, et lesquels relèvent de la mauvaise habitude des années 2000.
Que vous débutiez ou que vous révisiez vos bases, voici ce qu’il faut vraiment savoir pour afficher des images proprement en HTML, optimiser leur poids et leur accessibilité, et éviter les erreurs classiques qui plombent les performances.
La balise <img> : structure de base
Syntaxe minimale et attributs obligatoires
La balise <img> est une balise orpheline — elle ne se ferme pas. Sa syntaxe minimale :
<img src="photo.jpg" alt="Description de l'image">Deux attributs sont absolument indispensables :
- src : le chemin vers le fichier image (relatif ou URL absolue).
- alt : le texte alternatif, lu par les lecteurs d’écran et affiché si l’image ne charge pas. C’est aussi un signal SEO direct.
Omettre l’attribut alt n’est pas anodin : c’est une faute d’accessibilité (critère WCAG 1.1.1) et un mauvais signal pour le référencement. Si l’image est purement décorative, laissez alt="" — vide, mais présent.
💡 Notre conseil
Rédigez l’attribut alt comme si vous décriviez l’image à quelqu’un au téléphone. Soyez précis et concis : « Graphique montrant la croissance du trafic organique entre 2022 et 2024 » vaut mieux que « image » ou « graphique ».
Attributs de dimensions : width et height
Spécifier width et height directement dans le HTML est de retour en grâce — et pour une bonne raison. Le navigateur réserve l’espace avant même que l’image soit téléchargée, ce qui évite le fameux Cumulative Layout Shift (CLS), l’un des Core Web Vitals de Google.
<img src="hero.jpg" alt="Bannière d'accueil" width="1200" height="600">Ces valeurs correspondent aux dimensions réelles du fichier en pixels. Le CSS se charge ensuite d’adapter l’affichage (responsive ou non) — les attributs HTML servent uniquement à calculer le ratio.
75 %
du poids moyen d’une page web provient des images — source HTTP Archive 2024
🎯 Formats d’image et choix selon le contexte
JPEG, PNG, WebP, AVIF : lequel utiliser ?
Le format conditionne directement la taille du fichier et donc la vitesse de chargement. Voici la règle simple :
- JPEG : photos et visuels riches en couleurs. Bon compromis qualité/poids, mais pas de transparence.
- PNG : logos, icônes, captures d’écran avec du texte. Supporte la transparence, mais fichiers souvent lourds.
- WebP : format moderne de Google. 25 à 35 % plus léger que le JPEG à qualité équivalente, supporté par tous les navigateurs actuels.
- AVIF : encore plus compressé que le WebP (gain de 50 % sur le JPEG), mais rendu hétérogène sur Safari iOS avant 2023.
- SVG : idéal pour les icônes et illustrations vectorielles — infiniment redimensionnable, très léger.
| Format | Cas d’usage | Transparence | Support navigateurs |
|---|---|---|---|
| JPEG | Photos | Non | Universel |
| PNG | Logos, texte | Oui | Universel |
| WebP | Photos, UI | Oui | Très large (96 %+) |
| AVIF | Photos haute qualité | Oui | Partiel (en progression) |
| SVG | Icônes, illustrations | Oui | Universel |
La balise <picture> pour servir le bon format
Plutôt que de se contenter d’un seul format, la balise <picture> permet de proposer plusieurs sources et laisser le navigateur choisir :
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description" width="800" height="450">
</picture>Le navigateur prend le premier format qu’il supporte. Safari ancien prend le JPEG, Chrome récent prend l’AVIF. Tout le monde est servi — sans JavaScript, sans plugin.
✅ À retenir
La balise <picture> + l’attribut loading="lazy" sur la balise <img> de fallback : voilà la combinaison qui fait passer un audit PageSpeed de 60 à 90 sur les PageS riches en visuels.
Optimisation et performances
Lazy loading natif
Depuis 2020, tous les navigateurs majeurs supportent le chargement différé natif via l’attribut loading :
<img src="photo.jpg" alt="…" loading="lazy" width="800" height="600">Avec loading="lazy", l’image ne se charge que lorsqu’elle approche du viewport. Pour les images au-dessus de la ligne de flottaison (hero, logo), utilisez loading="eager" ou omettez l’attribut — le lazy loading sur une image critique retarde le Largest Contentful Paint (LCP).
Srcset et sizes pour le responsive
Envoyer une image de 2000 pixels de large à un smartphone, c’est gâcher de la bande passante. L’attribut srcset résout ça :
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Paysage montagneux"
width="800" height="533">Le navigateur calcule lui-même quelle version télécharger selon la taille d’écran et la densité de pixels. Résultat : jusqu’à 60 % d’économie sur le poids des images mobiles.
⚠️ À garder en tête
Ne jamais upscaler une image via les attributs HTML. Si votre fichier fait 400 px de large et que vous indiquez width="1200", le navigateur affichera une image floue et pixelisée. Redimensionnez toujours côté serveur ou avec un outil comme Squoosh.
Images et SEO : ce qui fait vraiment la différence
Nommer ses fichiers intelligemment
Google lit le nom du fichier. DSC_0042.jpg ne lui dit rien. recette-tarte-citron-meringuee.jpg, si. Quelques règles :
- Mots séparés par des tirets (pas des underscores, pas d’espaces).
- Inclure le mot-clé cible, naturellement.
- Éviter les accents dans les noms de fichiers (problèmes d’encodage sur certains serveurs).
- Rester court : 3 à 5 mots suffisent.
Où trouver des visuels libres de droits
Pour illustrer un article ou une page web sans risque juridique, plusieurs sources font référence. Unsplash propose des millions de photos haute résolution en licence libre, utilisables sans attribution obligatoire. Pexels et Pixabay fonctionnent sur le même principe. Pour des images spécifiques aux réseaux sociaux, consultez Images réseaux sociaux : où trouver les meilleures ressources visuelles — une sélection de plateformes classées par usage.
Attention aux formats et dimensions selon la plateforme cible. Ce qui passe sur un blog ne convient pas forcément aux Réseaux sociaux, où chaque canal impose ses propres ratios (1:1 pour Instagram, 16:9 pour Twitter/X, 1200×628 px pour les partages Facebook).
WebP pour les photos, SVG pour les icônes, PNG pour les éléments avec transparence.
Squoosh, TinyPNG ou Sharp côté serveur : visez moins de 150 Ko pour une image standard.
Ces quatre attributs sur chaque
<img> couvrent 80 % des bonnes pratiques accessibilité et SEO.Un attribut, zéro JavaScript, un gain mesurable sur le temps de chargement.
Les données structurées pour les images
Google Images est un moteur de recherche à part entière — souvent négligé. Pour apparaître avec une image enrichie dans les résultats, le balisage Schema.org ImageObject aide Google à comprendre le contexte :
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ImageObject",
"contentUrl": "https://example.com/photo.jpg",
"license": "https://creativecommons.org/licenses/by/4.0/",
"creator": {"@type": "Person", "name": "Nom de l'auteur"},
"description": "Description précise de l'image"
}
</script>Depuis 2020, Google affiche un badge de licence directement dans les résultats Google Images — un avantage de visibilité non négligeable pour les créateurs.
« Les pages qui passent les Core Web Vitals ont 24 % moins de taux d’abandon que les autres. »
— Google, rapport Web Vitals 2023
Questions fréquentes
Quelle est la différence entre <img> et <picture> en HTML ?
La balise <img> affiche une seule source d’image. La balise <picture> permet de proposer plusieurs sources (formats ou résolutions différents) et laisse le navigateur choisir la plus adaptée à ses capacités et à la taille d’écran. En pratique, on utilise <picture> pour servir du WebP ou de l’AVIF aux navigateurs modernes, avec un JPEG en fallback pour les anciens.
L’attribut alt est-il obligatoire sur toutes les images HTML ?
Techniquement non, mais dans les faits oui. L’attribut alt est requis par les standards d’accessibilité WCAG et constitue un signal SEO pour Google. Pour une image décorative (qui n’apporte pas d’information), on écrit alt="" — l’attribut est présent mais vide, ce qui indique aux lecteurs d’écran de l’ignorer. L’omettre complètement génère une alerte dans les audits d’accessibilité.
Quel poids maximum viser pour une image sur une page web ?
Il n’existe pas de règle universelle, mais une bonne cible est de rester sous 150 Ko pour une image standard (800-1200 px de large) et sous 300 Ko pour une image hero pleine largeur. En WebP avec une compression à 80 %, ces seuils sont faciles à atteindre. Des outils comme Squoosh (gratuit, en ligne) permettent de comparer formats et niveaux de compression avant de mettre en ligne.
Comment le lazy loading fonctionne-t-il sur les images HTML ?
L’attribut loading="lazy" indique au navigateur de ne pas télécharger l’image tant qu’elle n’est pas proche du viewport (la zone visible de l’écran). C’est une fonctionnalité native, sans JavaScript. Elle réduit significativement le temps de chargement initial des pages longues. À ne pas appliquer aux images visibles immédiatement au chargement (logo, hero image) : cela retarderait le LCP, un indicateur clé de Google.
Pourquoi spécifier width et height sur une balise img ?
Indiquer les dimensions réelles du fichier via les attributs width et height permet au navigateur de réserver l’espace dans la page avant même que l’image soit téléchargée. Cela évite le décalage de mise en page (Cumulative Layout Shift), l’un des trois Core Web Vitals de Google. Un CLS élevé pénalise le classement dans les résultats de recherche et dégrade l’expérience utilisateur.
Peut-on utiliser des images libres de droits trouvées sur Unsplash dans un projet commercial ?
Oui. La licence Unsplash autorise l’utilisation des photos à des fins commerciales sans attribution obligatoire. En revanche, il est interdit de revendre les images telles quelles ou de les intégrer dans un produit concurrent à Unsplash. Pexels et Pixabay proposent des conditions similaires. Dans tous les cas, vérifiez les droits des personnes photographiées (droit à l’image) avant toute utilisation publicitaire ou commerciale directe.