Ce guide explique comment insérer une image en HTML et quels attributs utiliser. Il cible les pratiques claires, utiles pour un site performant.
Insérer une image en HTML avec la balise <img> et l’attribut src
La balise image est un élément autofermé et de type inline. Pour afficher un fichier, il suffit de fournir la source via src.
Exemple de code (affiché en texte) : <img src= »images/mon_image.jpg » alt= »description » />. Le chemin peut être relatif ou absolu.
Cas pratique : Agence Pixel a reçu un brief pour un site vitrine. Le logo était dans /assets/logo.svg. Le développeur a placé le fichier via src et vérifié l’affichage sur mobile. Le projet a gagné en clarté après cette simple mise en place.
Phrase-clé : utiliser src propre et cohérent évite les erreurs de chargement.
| Point clé | Action à retenir |
|---|---|
| src | Vérifier le chemin, privilégier les chemins relatifs propres |
| alt | Rédiger un texte court et descriptif |
| width / height | Définir les dimensions natives pour éviter le CLS |
| Formats | Choisir .webp, .jpg, .png ou .svg selon l'usage |
| Responsive | Utiliser srcset et sizes pour adapter les tailles |
Formats d’images courants : .jpg .png .gif .svg
Les formats influencent la qualité et le poids. .jpg pour les photos, .png pour les images avec zones transparentes, .gif pour petites animations, .svg pour les logos vectoriels.
- 📸 .jpg — bonne compression pour photos.
- 🖼️ .png — idéal pour transparence et détails.
- 🎞️ .gif — animations simples, usage limité.
- 📐 .svg — logos nets à toutes tailles.
Exemple client : pour la page d’accueil, Agence Pixel a choisi un .webp pour réduire le poids. Le temps de chargement a baissé notablement.
Phrase-clé : choisir le bon format réduit le poids et améliore l’expérience.
Accessibilité : rédiger un bon attribut alt pour les images HTML
L’attribut alt fournit un texte alternatif quand l’image ne charge pas. Il aide aussi les lecteurs d’écran et le référencement.
Exemple de code (texte) : <img src=’images/mon_image.jpg’ alt=’Homme debout sur une dune, paysage désertique’ />. Le texte doit rester court et descriptif.
Anecdote : un site e-commerce d’Agence Pixel avait des photos sans alt. Après ajout, les fiches produits ont gagné en visibilité dans les moteurs de recherche.
Phrase-clé : un alt bien rédigé améliore accessibilité et SEO.
Définir la taille : width et height pour limiter les décalages
Préciser width et height renseigne le navigateur sur l’espace à réserver. Cela évite les décalages de mise en page pendant le chargement.
Exemple de code (texte) : <img src=’images/mon_image.jpg’ width=’425′ height=’283′ alt=’…’ />. Ces valeurs peuvent être en pixels.
Astuce pratique : définir les dimensions natives puis ajuster en CSS pour la responsivité. Agence Pixel a évité des CLS (layout shift) sur un site magazine grâce à cette méthode.
Phrase-clé : déclarer dimensions natives réduit les sauts de contenu.
Images responsive et bonnes pratiques de performance
Pour adapter une image aux écrans, utiliser des alternatives et techniques modernes. Par exemple, srcset et sizes ou les images en .webp pour les navigateurs compatibles.
Liste de vérifications rapide :
- ⚡ Optimiser le poids avant publication.
- 🧭 Utiliser alt descriptif et court.
- 📐 Déclarer width et height pour éviter CLS.
- 🧩 Préférer .svg pour les logos quand possible.
- 📱 Tester sur mobile et tablette.
Cas d’usage : lors d’une refonte, Agence Pixel a remplacé des JPG lourds par des WEBP adaptés. Le score Core Web Vitals a progressé.
Phrase-clé : combiner optimisation et attributs HTML améliore la performance.
Tableau récapitulatif : points clés et actions à retenir
| 🔑 Point clé | ✅ Action à retenir |
|---|---|
| 📂 src | 🔗 Vérifier le chemin et privilégier chemins relatifs propres. |
| 📝 alt | ✍️ Rédiger un texte court et descriptif. |
| 📏 width / height | 📐 Définir dimensions natives pour éviter CLS. |
| 🌐 Formats | 🧪 Choisir .webp/.jpg/.png/.svg selon usage. |
| 📱 Responsive | 🛠️ Utiliser srcset et sizes pour adapter les tailles. |
Phrase-clé : appliquer ces actions garantit images propres et performantes.
Les vraies questions sur les images HTML
Quelle différence entre src et alt ?
src donne le chemin du fichier, alt donne le texte de remplacement. L'un est indispensable pour afficher, l'autre pour l'accessibilité et le SEO.
Est-ce que je dois toujours mettre width et height ?
C'est recommandé. Ça réserve l'espace dans la page et évite les sauts de mise en page pendant le chargement.
Le .webp passe partout ?
Quasiment. Les navigateurs modernes le lisent tous. Pour les anciens, prévoyez une solution de repli avec .
Ça vaut le coup d'utiliser srcset ?
Si votre trafic mobile compte, oui. srcset permet d'envoyer une image plus légère aux petits écrans.
Vous avez une autre source ? Partagez-la
Laisser un commentaire
Rédacteur en chef d’Objectif Affiliation, douze ans passés entre régies d’affiliation, agences et éditeurs BtoB. Travaille depuis Nantes, teste chaque tactique avant d’en parler, refuse les guides recyclés d’outre-Atlantique sans contexte français.