Vous voulez mettre une image sur votre page web mais vous ne savez pas comment faire ? C’est une étape de base mais essentielle.
Ce guide vous explique comment utiliser la balise HTML <img> et tous les attributs à connaître pour le faire correctement.
L’essentiel à retenir sur l’image en HTML :
- La balise à utiliser est
<img>, c’est un élément vide (pas de balise de fermeture). - L’attribut
srcest obligatoire : il indique le chemin vers votre fichier image. - L’attribut
altest essentiel pour l’accessibilité et le SEO, il décrit l’image. - Les attributs
widthetheightsont cruciaux pour la performance de la page web. - Le format d’image WebP est le plus recommandé pour un bon équilibre entre qualité et poids du fichier.
La syntaxe de base pour insérer une image en HTML
Pour afficher une image sur une page web, tout part d’une seule balise HTML : la balise <img>. C’est une balise un peu spéciale.
Contrairement à un paragraphe <p>...</p>, la balise <img> n’a pas besoin de balise de fermeture. On l’appelle une balise « vide » ou « orpheline ». Elle fonctionne seule.
Le code minimal avec la balise `
`
Le code le plus simple pour insérer une image ressemble à ça :
<img src="URL_de_l_image" alt="description_de_l_image">
Dans cet exemple, il y a deux attributs indispensables :
src: C’est la source (l’URL ou le chemin) de votre image.alt: C’est le texte alternatif, une courte description de l’image.
Sans l’attribut src, le navigateur ne sait pas quelle image afficher. C’est donc le seul attribut réellement obligatoire pour que ça fonctionne.
`width` et `height` : définir les dimensions pour la performance
Les attributs width (largeur) et height (hauteur) indiquent au navigateur les dimensions de l’image en pixels. Ce ne sont pas des attributs obligatoires, mais ils sont très importants pour la vitesse de chargement de votre page web.
<img src="images/chat.jpg" alt="Un chat noir" width="400" height="300">
Lorsque vous ajoutez ces deux attributs, le navigateur sait quelle place exacte il doit réserver pour l’image, avant même de l’avoir téléchargée. Ça évite que le contenu de la page « saute » ou se décale pendant que les images se chargent. Ce phénomène de décalage s’appelle le CLS (Cumulative Layout Shift) et c’est un signal négatif pour Google.
En résumé, en spécifiant les dimensions, vous améliorez l’expérience utilisateur et votre score de performance (Core Web Vitals).
`title` : ajouter une information complémentaire au survol
L’attribut title permet d’afficher une petite « info-bulle » lorsque l’utilisateur passe sa souris sur l’image pendant quelques secondes. Il peut donner une information supplémentaire, mais il est optionnel.
<img src="images/chat.jpg" alt="Un chat noir" title="Son nom est Minuit">
Il ne faut pas confondre `title` et `alt`. Le `title` est une information bonus pour ceux qui voient l’image, tandis que l’`alt` est une description essentielle pour l’accessibilité et les navigateurs.
`loading= »lazy »` : optimiser le temps de chargement
Cet attribut est une technique moderne pour améliorer la vitesse des pages qui contiennent beaucoup d’images. Le « lazy loading » (ou chargement différé) demande au navigateur de ne charger que les images visibles à l’écran.
<img src="images/photo-bas-de-page.jpg" alt="..." loading="lazy">
Les images situées plus bas dans la page ne seront téléchargées que lorsque l’utilisateur scrollera vers elles. C’est une manière très efficace de réduire le temps de chargement initial de la page.
Attention, il ne faut pas utiliser cet attribut sur l’image principale située en haut de votre page (ce qu’on appelle la zone « au-dessus de la ligne de flottaison »). Cette image doit se charger le plus vite possible.
Techniques avancées et cas d’usage
Maintenant que vous maîtrisez les bases de la balise <img>, voyons quelques cas d’usage plus spécifiques.
Comment rendre une image cliquable (créer un lien hypertexte)
Pour qu’une image devienne un lien sur lequel on peut cliquer, il suffit d’envelopper votre balise `<img>` dans une balise de lien `<a>`. C’est aussi simple que ça.
Le code ressemble à ceci :
<a href="destination.html"> <img src="image.jpg" alt="Description de l'image"></a>
Ici, lorsque l’utilisateur cliquera sur l’image, il sera redirigé vers la page destination.html.
Comment utiliser une image de fond (avec CSS)
Parfois, on ne veut pas que l’image fasse partie du contenu, mais qu’elle serve de fond pour toute la page ou une section. Dans ce cas, on n’utilise pas la balise <img>.
On utilise plutôt la propriété CSS background-image. Cet attribut s’applique à un élément HTML comme `body` ou `div`.
Voici un exemple simple pour mettre une image en fond de toute la page web :
body { background-image: url('images/fond.jpg'); background-repeat: no-repeat; background-size: cover;}
background-image: Spécifie le chemin de l’image de fond.background-repeat: no-repeat: Empêche l’image de se répéter.background-size: cover: Redimensionne l’image pour qu’elle couvre tout l’élément, sans déformer ses proportions.
Comment gérer les images responsives avec `srcset`
Sur un site web moderne, les utilisateurs visitent vos pages depuis des écrans de toutes les tailles (smartphones, tablettes, grands écrans). L’attribut `srcset` permet de proposer plusieurs versions d’une même image (de tailles différentes) au navigateur.
Le navigateur choisit alors le fichier le plus adapté à la taille de l’écran de l’utilisateur. Ça évite de charger une très grande image sur un petit téléphone, ce qui améliore considérablement le temps de chargement sur mobile.
Le code est un peu plus complexe :
<img srcset="chat-480w.jpg 480w, chat-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="chat-800w.jpg" alt="Un chat noir très mignon">
Cet attribut est une pratique plus avancée, mais très efficace pour l’optimisation des performances.
Optimisation des images pour le web
Insérer une image, c’est facile. Mais l’insérer sans ralentir votre site web demande un peu plus d’attention. Deux points sont essentiels : le format du fichier et son impact sur la performance.
Choisir le bon format : WebP, JPEG, PNG, SVG…
Il existe plusieurs formats d’images, chacun avec ses avantages. Choisir le bon format est la première étape pour une bonne optimisation.
| Format | Cas d’usage recommandé | Avantages |
|---|---|---|
| WebP | Photos, images avec transparence. C’est le format à privilégier. | Excellent rapport qualité/poids. Gère la transparence. Supporté par tous les navigateurs modernes. |
| JPEG / JPG | Photos et images avec beaucoup de couleurs, sans besoin de transparence. | Très bonne compression pour les photos. Fichiers légers. |
| PNG | Images qui nécessitent un fond transparent (logos, icônes). | Gère la transparence sans perte de qualité. |
| SVG | Logos, icônes, illustrations simples. | Vectoriel : qualité parfaite peu importe le zoom. Fichiers très légers. |
En résumé : pour toutes vos photos et images de contenu, utilisez le format WebP. Pour votre logo ou des icônes, le format SVG est le meilleur choix.
L’impact des images sur les Core Web Vitals
Les Core Web Vitals sont des indicateurs utilisés par Google pour mesurer l’expérience utilisateur sur une page. Les images ont un impact direct sur deux de ces indicateurs :
- LCP (Largest Contentful Paint) : Cet indicateur mesure le temps d’affichage du plus grand élément visible sur la page. C’est souvent une image. Une image lourde et lente à charger va dégrader votre score LCP.
- CLS (Cumulative Layout Shift) : Comme expliqué plus tôt, si vous ne spécifiez pas les attributs
widthetheight, vos images vont provoquer un décalage de mise en page et donc un mauvais score CLS.
Vous pouvez utiliser des outils comme Google PageSpeed Insights ou Lighthouse (intégré dans le navigateur Chrome) pour analyser la performance de vos pages et l’impact de vos images.
Droits d’auteur et licences : utiliser des images légalement
On ne peut pas simplement prendre n’importe quelle image sur Google Images et l’utiliser sur son site. La plupart des images sont protégées par des droits d’auteur. Voici les règles de base à connaître :
- Tous droits réservés : C’est le cas par défaut. Si rien n’est précisé, vous n’avez pas le droit d’utiliser l’image sans l’autorisation de son créateur.
- Licences Creative Commons : Ces licences donnent plus de libertés. Certaines autorisent l’utilisation gratuite, parfois à condition de citer l’auteur.
- Domaine public (CC0) : Les images dans le domaine public peuvent être utilisées par tout le monde, sans aucune restriction.
La manière la plus simple d’utiliser des images légalement est de passer par des banques d’images gratuites et libres de droits. Voici quelques sites de référence :
- Unsplash
- Pexels
- Pixabay
Toutes les photos sur ces sites sont généralement sous une licence qui vous permet de les utiliser gratuitement, même pour un usage commercial.
FAQ : Questions fréquentes
Pourquoi mon image ne s’affiche-t-elle pas ?
C’est le problème le plus courant. Vérifiez ces trois points :
- Le chemin dans l’attribut
srcest-il correct ? (vérifiez le nom du dossier). - Le nom du fichier image est-il exact, y compris l’extension (.jpg, .png…) ?
- Avez-vous bien téléversé le fichier image sur votre serveur au bon endroit ?
Quel format choisir pour mon logo ?
Le meilleur format pour un logo est le SVG. C’est un format vectoriel, ce qui signifie qu’il restera parfaitement net, quelle que soit sa taille d’affichage. En plus, le fichier est souvent très léger.
Comment centrer une image ?
Le centrage d’une image ne se fait pas avec un attribut HTML, mais avec du CSS. La méthode la plus simple est d’appliquer les propriétés display: block; et margin: auto; à votre image.
Dois-je toujours mettre `width` et `height` ?
Oui. C’est une pratique essentielle pour la performance. Même si vous gérez la taille de vos images avec du CSS, ajouter les dimensions dans le HTML permet au navigateur de réserver l’espace et d’éviter le décalage de la page (CLS).
La balise <img> est simple en apparence. Mais ce sont les attributs comme alt, width, et height qui font la différence pour créer un site web accessible, rapide et bien référencé.
En choisissant le bon format de fichier et en pensant à la performance, vous vous assurez que vos images améliorent votre page web au lieu de la ralentir.
Commentaires
Laisser un commentaire