Balise HTML <img>
La balise <img> est utilisée pour insérer une image dans un document HTML. L’image elle-même n’est pas insérée directement dans le document ; le navigateur insère une image HTML à partir de la source spécifiée dans la balise <img>.
Deux attributs sont obligatoires pour un élément <img> : src, qui sert à afficher la source de l’image, et alt, qui définit un texte alternatif pour l’image.
Pour rendre les images HTML cliquables, vous devez placer la balise <img> à l’intérieur de la balise <a>, qui sert à insérer un lien d’image HTML.
Syntaxe
La balise <img> est vide, ce qui signifie que la balise de fermeture n’est pas requise. Elle contient uniquement des attributs. Mais en XHTML, la balise <img> doit être auto-fermée (<img />).
Exemple de la balise HTML <img> :
Un exemple d’utilisation d’une balise HTML <img>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Heading </h1>
<p>This is Aleq's photo</p>
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>Nous pouvons utiliser CSS pour modifier l’apparence initiale d’une image.
Exemple de la balise <img> stylée avec CSS :
Comment styliser une balise HTML <img> à l’aide des propriétés CSS vertical-align et padding ?
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
border-radius: 50%;
border: 4px dashed #077cb9;
width: 300px;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<img src="https://fr.w3docs.com/uploads/media/default/0001/03/e91b0d7a957cadd0c3282d34e423ff0f97799a1d.jpeg" alt="Ararat mountain" width="256" height="256" />
</div>
</body>
</html>Attributs Src et Alt
L’attribut src (source) affiche la source de l’image. Il est obligatoire, car il définit le chemin vers l’image. La valeur de l’attribut src peut être soit le nom du fichier, soit son URL.
L’attribut alt définit un nom alternatif pour l’image. Il est également obligatoire pour la balise <img>. Sa valeur est un texte descriptif affiché dans le navigateur avant le chargement de l’image, ou si l’image ne parvient pas à se charger.
TIP
Nous recommandons d’inclure des mots-clés dans le texte alternatif. Cela améliorera le classement du site web dans les moteurs de recherche.
Utilisation de "data:image/[type];base64,[base64-string]" pour l’attribut src
Le format data:image/[type];base64,[base64-string] peut être utilisé comme valeur de l’attribut src d’une balise img pour afficher une image directement à partir du code HTML, sans avoir à la charger depuis un fichier externe.
Voici un exemple d’utilisation de ce format pour afficher une image dans une balise img :
Utilisation de "data:image/[type];base64,[base64-string]" pour l’attribut src
<img src="data:image/png;base64,iVBORw0KG..." alt="Base64 encoded image">Dans cet exemple, image/png spécifie le type MIME de l’image, et iVBORw0KG... représente les données de l’image encodées en base64.
Notez que l’utilisation d’images encodées en base64 peut augmenter la taille du fichier HTML et ralentir le chargement de la page. Il est généralement recommandé d’utiliser ce format pour de petites images ou des icônes, et d’utiliser des fichiers externes pour des images plus grandes.
Exemple de la balise HTML <img> avec les attributs src et alt :
Un exemple de la balise img avec les attributs src et alt
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<img src="https://fr.w3docs.com/uploads/media/default/0001/03/01cc5ccf0ce755075e468cc651f27c354e1b032e.jpeg" alt="Paris" width="256" height="256" />
</body>
</html>L’attribut loading
L’attribut loading permet de différer le chargement des images et des iframes jusqu’à ce qu’ils soient proches d’être affichés. C’est désormais une fonctionnalité HTML standard prise en charge par tous les navigateurs modernes.
Les valeurs prises en charge pour l’attribut loading incluent :
lazy, qui diffère le chargement jusqu’à ce que l’image ou l’iframe atteigne un seuil de distance par rapport à la zone d’affichage.eager, qui charge la ressource immédiatement.
Vous pouvez utiliser la valeur lazy pour profiter du chargement différé natif du navigateur :
Balise HTML <img>
<img src="defer.png" loading="lazy" alt="Beautiful" width="500" height="400">Le chargement différé est un ensemble de techniques de développement web et applicatif qui reportent le chargement des ressources d’une page à un moment ultérieur, lorsque ces ressources sont nécessaires, au lieu de les charger immédiatement. Ces techniques aident à améliorer les performances et l’utilisation des ressources de l’appareil, en réduisant les coûts associés.
Formats d’image pris en charge
Les formats de fichiers image sont des moyens standardisés d’organiser et de stocker des images numériques. Un format de fichier image peut stocker des données dans un format non compressé, un format compressé (sans perte ou avec perte), ou un format vectoriel. (Wikipedia).
Chaque agent utilisateur prend en charge différents formats d’image. Voici la liste des formats d’image courants :
| Abréviation | Format de fichier | Type MIME | Extension(s) de fichier | Compatibilité navigateur |
|---|---|---|---|---|
| APNG | Animated Portable Network Graphics | image/apng | .apng | Chrome, Edge, Firefox, Opera, Safari |
| BMP | Bitmap file | image/bmp | .bmp | Chrome, Edge, Firefox, Opera, Safari |
| GIF | Graphics Interchange Format | image/gif | .gif | Chrome, Edge, Firefox, Opera, Safari |
| ICO | Microsoft Icon | image/x-icon | .ico, .cur | Chrome, Edge, Firefox, Opera, Safari |
| JPEG | Joint Photographic Expert Group image | image/jpeg | .jpg, .jpeg, .jfif, .pjpeg, .pjp | Chrome, Edge, Firefox, Opera, Safari |
| PNG | Portable Network Graphics | image/png | .png | Chrome, Edge, Firefox, Opera, Safari |
| SVG | Scalable Vector Graphics | image/svg+xml | .svg | Chrome, Edge, Firefox, Opera, Safari |
| TIFF | Tagged Image File Format | image/tiff | .tif, .tiff | Aucun intégré ; extensions requises |
| WebP | Web Picture format | image/webp | .webp | Chrome, Edge, Firefox, Opera |
Erreurs de chargement d’image
Il peut se produire certaines erreurs lors du chargement d’une image. Si un gestionnaire d’événement onerror a été défini sur l’événement d’erreur, ce gestionnaire sera appelé. Voici les situations dans lesquelles cela peut se produire :
- L’attribut src est vide ("") ou null.
- L’URL du src et l’URL de la page sur laquelle se trouve actuellement l’utilisateur sont identiques.
- Une corruption de l’image empêche son chargement.
- Les métadonnées de l’image sont corrompues au point qu’il est impossible d’en récupérer les dimensions, et aucune dimension n’est spécifiée dans les attributs de la balise
<img>. - Le format n’est pas pris en charge par l’agent utilisateur.
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| align | left right top bottom middle | Définit l’alignement de l’image par rapport aux éléments environnants. Non pris en charge en HTML5. |
| alt | text | Définit le texte alternatif pour l’image. |
| border | pixels | Définit la largeur de la bordure autour de l’image. Non pris en charge en HTML5. |
| crossorigin | anonymous | use-credentials | Définit si CORS est utilisé lors du chargement de l’image. Les images chargées via CORS peuvent être utilisées dans l’élément <canvas> sans limiter ses fonctionnalités. |
| height | pixels | Définit la hauteur de l’image. |
| hspace | pixels | Définit des espaces à gauche et à droite de l’image. Non pris en charge en HTML5. |
| ismap | ismap | Indique que le contenu de la balise est une carte d’image côté serveur. |
| longdesc | URL | Spécifie l’adresse URL contenant une description détaillée de l’image (pour une brève description de l’image, utilisez l’attribut alt). Non pris en charge en HTML5. |
| src | URL | Définit la source de l’image. |
| usemap | #mapname | Spécifie un lien vers l’élément <map>, qui contient les coordonnées de la carte d’image côté client. |
| vspace | pixels | Définit des espaces en haut et en bas de l’image. Non pris en charge en HTML5. |
| width | pixels | Définit la largeur de l’image. |
La balise <img> prend en charge les attributs globaux et les attributs d’événement.
Attributs obsolètes
| Attribut | Valeurs | Description | Alternative |
|---|---|---|---|
| align | left right top bottom middle | Définit l’alignement de l’image par rapport aux éléments environnants.Centre l’image HTML par rapport aux éléments environnants. | Les propriétés CSS float et/ou vertical-align. |
| border | pixels | Définit la largeur de la bordure autour de l’image. | La propriété CSS border. |
| hspace | La propriété CSS margin à la place. | ||
| name | Spécifie un nom pour l’élément | L’attribut id. | |
| vspace | pixels | Définit des espaces en haut et en bas de l’image. | Utilisez plutôt la propriété CSS margin. |
Practice
Quels attributs peuvent être utilisés avec la balise HTML <img> ?