Images HTML
Pour intégrer une image dans une page web, utilisez la balise <img>.
La balise <img> prend un certain nombre d’attributs obligatoires et facultatifs, qui lui fournissent des informations supplémentaires.
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 fermée (<img/>).
Attributs d’image obligatoires - src et alt
L’attribut src (source) spécifie le nom ou l’emplacement de l’image à afficher. La valeur de l’attribut src doit contenir le nom du fichier image ou son URL.
Exemple d’URL
<img src="example.jpg" />
or
<img src="https://www.example.com/images/example.jpg" />L’attribut alt est également obligatoire pour la balise <img>. Il sert à fournir aux navigateurs un texte alternatif au cas où l’image ne pourrait pas être affichée (en cas de connexion lente, lorsqu’un lecteur d’écran est utilisé, etc.). Remarque : le comportement de l’infobulle au survol est en réalité contrôlé par l’attribut title, et non par alt.
La syntaxe de la balise <img> avec les attributs src et alt obligatoires ressemble à ceci :
Exemple d’image HTML
<img src="example.jpg" alt="HTML tutorial" />TIP
Utilisez l’attribut alt pour toutes les images afin de fournir une description claire et concise du contenu de l’image, ce qui améliore l’accessibilité et aide les moteurs de recherche à comprendre votre page.
Attributs d’image recommandés - width et height
Il est fortement recommandé d’utiliser les attributs width et height avec la balise <img>. Si ces attributs sont utilisés, le navigateur réserve l’espace pour l’image lors du chargement du contenu, ce qui accélère l’affichage de la page.
Exemple d’image HTML
<img src="https://www.example.com/images/example.jpg" alt="HTML tutorial" width="200" height="120" />Exemple de la balise <img> HTML avec les attributs src, alt, width et height :
Le titre de l’image|Exemple|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your 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>Résultat
TIP
Au lieu d’utiliser les dimensions width et height, vous pouvez définir la taille à l’aide des propriétés CSS max-width ou max-height pour plus de flexibilité. Cela peut empêcher de grandes images de ruiner votre mise en page sur un appareil à petit écran.
Image flottante
Par défaut, un élément <img> est en ligne, donc le texte s’écoule autour. Cependant, vous pouvez contrôler la mise en page à l’aide de la propriété CSS float. Cette propriété spécifie comment l’image doit flotter, ou comment le texte doit s’enrouler autour d’elle. (Remarque : bien que float ait historiquement été utilisé à cette fin, les mises en page modernes utilisent généralement Flexbox ou Grid pour un meilleur contrôle.)
Pour afficher l’image à gauche et le texte à droite, ajoutez style="float:left" à la balise <img>. Pour une meilleure maintenabilité, envisagez de déplacer les styles en ligne vers une classe CSS.
Exemple de la balise <img> et de la propriété CSS float pour faire flotter une image à gauche :
Exemple d’une image avec float|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your heading </h1>
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:left"/>
<p>Aleq's photo</p>
</body>
</html>Ajouter l’attribut style="float:right" à la balise <img> place le texte à gauche et l’image à droite.
Exemple de la balise <img> et de la propriété CSS float pour faire flotter une image à droite :
Exemple avec un attribut float:right|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your heading </h1>
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:right"/>
<p>Aleq's photo</p>
</body>
</html>Résultat
Comment ajouter un lien hypertexte à une image
Comme la balise <a> est utilisée pour insérer des liens hypertextes, il vous suffit de placer l’image dans la balise <a> pour rendre votre image cliquable.
Exemple des balises <a> et <img> pour ajouter un lien hypertexte à une image :
Exemple d’une image avec un lien hypertexte
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/" aria-label="w3docs homepage">
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo"/>
</a>
</body>
</html>Quel format d’image choisir pour le web
Il existe trois principaux types de formats d’image pris en charge par les navigateurs :
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
GIF possède 256 couleurs uniques, ce qui permet de créer des graphiques simples et rapides à charger. Vous pouvez utiliser GIF pour de petits dessins, diagrammes, graphiques, boutons et autres éléments graphiques simples, qui n’empêcheront pas le chargement rapide de votre page.
JPEG est généralement un format 24 bits qui mélange la lumière rouge, bleue et verte pour afficher des millions de couleurs. Il est donc principalement utilisé pour les photographies. Ce format vous offre la flexibilité de choisir le niveau de compression de votre image — de 0 % (compression forte) à 100 % (sans compression). Vous pouvez choisir ce format si vous acceptez de sacrifier un peu de qualité pour réduire la taille du fichier. Évitez d’utiliser JPEG pour les images contenant du texte, des formes ou de grands aplats de couleur, car lorsque le fichier est compressé, les lignes deviennent floues et les couleurs changent.
Le format PNG combine les avantages de JPEG et de GIF : il prend en charge des millions de couleurs et permet une compression sans perte. Vous pouvez utiliser PNG pour des graphiques web nécessitant de la transparence, des graphiques riches en couleurs et complexes, ou des photographies.
Formats d’image modernes
Aujourd’hui, plusieurs formats d’image modernes sont utilisés sur le web afin d’obtenir des images plus petites, plus riches et plus rapides à charger.
WebP, conçu par Google, offre une compression sans perte et avec perte pour les images sur le web. Son objectif principal est de devenir le format principal pour les photographies sur le web, en remplaçant JPEG. (WebP - Wikipedia)
Un autre format conçu pour remplacer JPEG est BPG (Better Portable Graphics), qui affiche également un taux de compression élevé (les fichiers sont plus petits que JPEG à qualité égale).
HEIC est un nouveau format d’image qu’Apple utilise à la place de JPEG dans iOS 11. Ce format utilise des méthodes de compression modernes, ce qui permet d’obtenir une meilleure qualité d’image dans des fichiers plus petits.
Practice
Which of the following tags and attributes can be used when defining images in HTML?