Dernière mise à jour le 24 septembre 2022
Pour ajouter une image dans un document HTML on emploie l’élément img.
Cet élément utilise une balise unique (<img>) et n'a donc pas de balise de fermeture.
L’élément img possède deux attributs obligatoires :
| src | Spécifie la source (le chemin relatif ou absolu) de l’image. |
| alt | Indique le texte alternatif à afficher si l’image ne peut pas l’être. |
La source (attribut src) peut être un lien externe (adresse débutant pas "http" ou "https") si l’image sur trouve déjà ailleurs sur le Web ou un lien interne si elle se trouve sur le disque dur.
Le plus simple est évidemment lorsque l’image se trouve dans le même dossier que le fichier HTML qui y fait référence, puisqu’on peut simplement indiquer le nom du fichier d’image comme source :
<img src="pizza.png" alt="La meilleure pizza au monde">
L’image apparaîtra à l’endroit indiqué, dans sa taille originale
Notez qu’elle n’apparaît pas nécessairement sur sa propre ligne et qu’elle s’alignera avec le texte qui la suit ou la précède si on la laisse sur une ligne déjà entamée
Exemple :
Lorem ipsum dolor sit amet, yconsectetur adipiscing elit. Cras consequat sollicitudin dolor vel elementum. Morbi metus mi, mattis in lacus nec, euismod dictum lorem. 
Cras sed diam dictum, euismod est at, rutrum lacus. Vestibulum commodo mauris diam, vitae convallis nisi aliquam ut. Maecenas viverra justo et dolor interdum bibendum rhoncus in massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean in laoreet velit.
Nous verrons plus loin comment positionner l'image avec plus de précision.
Avec src, l'attribut alt est le seul attribut obligatoire de l'élément img.
L'attribut alt contient le texte utilisé...
<img src="pizza.png" alt="La meilleure pizza au monde">
Si la présence de l'attribut alt est obligatoire avec l'élément img, sachez qu'il peut être vide!
C'est même ce qui est recommandé de faire lorsque l'image ne fait pas partie du véritable contenu de la page, mais n'est qu'un élément décoratif.
Exempe :
<img src="bande_fleurs.jpg" alt="">
En effet, il n'est pas très utile pour une personne aveugle de savoir qu'il y a un bande décorative à un certain endroit dans la page.
Il est rare qu'un image ait exactement les dimensions requises pour notre page Web.
Heureusement il est possible de redimensionner l’image en utilisant les attributs width (largeur) et height (hauteur).
Les dimensions exprimées sont en "px" (pixels).
Exemple :
<img src="poisson.jpg" alt=""> <img src="poisson.jpg" alt="" style="width: 200px; height: 200px;">
Sortie :
Si la largeur et la hauteur de l'image sont identiques, il est possible d'omettre une des deux propriétés. Si seule la largeur est fournie, la hauteur sera déterminée dans le respect des proportions et vice versa.
Exemple :
<!-- pour une image de forme carrée, ces trois lignes ont le même effet --> <img src="images/poisson.jpg" alt="" style="width: 200px; height: 200px;"> <img src="images/poisson.jpg" alt="" style="width: 200px;"> <img src="images/poisson.jpg" alt="" style="height: 200px;">
Bon. Tout va bien jusqu'ici par qu'il n'a été question que d'images carrées.
Voyons maintenant le cas d'images rectangulaires.
Exemple 1a :
<img src="manchot.jpg" alt=""> <img src="manchot.jpg" alt="" style="width: 200px; height: 200px;">
Sortie :
Exemple 2a :
<img src="zebres.jpg" alt=""> <img src="zebres.jpg" alt="" style="width: 200px; height: 200px;">
Sortie :
Dans les deux exemples on constate que les images ont été déformées. Le résultat fait très "amateur".
La solution est d'utiliser les propriétés max-width et max-height.
Exemple 1b :
<img src="manchot.jpg" alt=""> <img src="manchot.jpg" alt="" style="max-width: 200px; max-height: 200px;">
Sortie :
Exemple 2b :
<img src="zebres.jpg" alt=""> <img src="zebres.jpg" alt="" style="max-width: 200px; max-height: 200px;">
Sortie :
Maintenant il est important de se rappeler que l’image n’est redimensionnée que par le navigateur, au moment de l’affichage.
L’image originale est envoyée du serveur au navigateur, peu importe la taille d'affichage spécifiée dans le code HTML.
Si vous utilisez de très grosses images alors que votre but est de les afficher en petit format, vous devriez utiliser un logiciel de traitement d'images (ou un outil en ligne) afin de diminuer leur poids (nombre d'octets) et d'accélérer le chargement de la page.
Vous aurez alors la possibilité de les redimensionner et/ou de changer le taux de compression du fichier.
Attention à la provenance de vos images!
Il est très facile de trouver des images sur le Web. Mais savez-vous que la grande majorité de ces images ne sont pas libres de droits?
Ce qui signifie que vous n'avez généralement pas le droit d'utiliser ces images sans le consentement de son ayant droit (personne qui détient les droits sur l'image).
Bien sûr, pour un petit site Web réalisé dans le cadre d'un cours d'introduction au Web, les risque d'être poursuivi en justice sont négligeables. Il en va autrement s'il s'agit d'un site public, surtout s'il est très populaire.
L'approche la plus sûre et la plus éthique consiste à utiliser uniquement ses propres images (photos, dessins, etc.) ou encore d'employer des images libres de droits.
On trouve assez facilement sur le Web des sites qui offrent de telles images. Vous devez toutefois être prudents car ses sites ont parfois des sections gratuites et payantes. Il arrive aussi que des sites, une fois connus, changent de vocation et n'offrent plus de contenu gratuit.
Vous devez aussi faire attention au type de licence à laquelle est soumise l'image. Par exemple, il arriver souvent que l'image est gratuite seulement pour un usage non commecial ou encore qu'il soit obligatoire de mentionner le nom de l'artiste.
Par exemple, la plupart des images prises sur Wikipédia peuvent être utilisées ailleurs sous réserve de mentionner le nom de son auteur et le type de licence.
Exemple :
.jpg)
Remarquez qu'il n'est pas essentiel d'inclure un hyperlien vers le site Web de l'auteur ou vers la définition de la licence.
La liste suivante regroupe quelques sites Web qui offrent des images libres de droits :
Il est généralement considéré comme une bonne pratique de stocker ses images dans un dossier différent de celui qui contient les fichiers HTML, simplement pour s’y retrouver plus facilement lorsque le site Web prend de l'ampleur.
Dans ce cas, l’attribut src devra contenir un chemin pour retrouver l’image.
Le répertoire contenant les images s'appelle généralement images ou simplement img.
Attention : utilisez uniquement des chemins relatifs!
Les chemins absolus (ceux qui débutent pas un nom de domaine ou un "/") sont à éviter puisque lorsque vous placerez votre page Web sur un serveur, les chemins risquent d’être différents de ceux qui existaient sur votre ordinateur de développement.
<img src="images/manchot.jpg" alt=""> <!-- OUI -->
<img src="/home/bob/labo4/images/manchot.jpg" alt=""> <!-- NON -->
Les chemins sont toujours relatifs à la position du fichier HTML.
Il est possible de remplacer le texte d'un hyperlien par une image.
Il suffit de placer un élément img dans un élément a.
Exemple :
<a href="https://fr.wikipedia.org/wiki/Gollum" target="_blank"><img src="images/gollum.jpg" alt=""></a>
Sortie :
Par défaut, une image se positionne comme un caractère, ce qui n'est généralement pas ce qu'on désire :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec nunc et diam laoreet hendrerit ac a turpis. Sed enim nisi, faucibus id risus non, porta tincidunt orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
Vestibulum dapibus vehicula tortor nec lobortis. Nulla gravida aliquet sem, vitae posuere nisi auctor ut. Morbi a varius dui, vestibulum euismod metus. Integer ut ipsum sagittis, blandit eros non, mollis est. Praesent at felis nec turpis malesuada vestibulum. Curabitur rhoncus vitae mi nec tempus. Proin viverra turpis luctus nisi molestie facilisis. Donec fermentum odio et interdum accumsan.
On peut mettre une image toute seule dans un paragraphe et il n'y aura pas d'habillage (elle ne sera pas entourée par du texte) :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec nunc et diam laoreet hendrerit ac a turpis. Sed enim nisi, faucibus id risus non, porta tincidunt orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Vestibulum dapibus vehicula tortor nec lobortis. Nulla gravida aliquet sem, vitae posuere nisi auctor ut. Morbi a varius dui, vestibulum euismod metus. Integer ut ipsum sagittis, blandit eros non, mollis est. Praesent at felis nec turpis malesuada vestibulum. Curabitur rhoncus vitae mi nec tempus. Proin viverra turpis luctus nisi molestie facilisis. Donec fermentum odio et interdum accumsan.
La solution est d'utiliser la propriété CSS float pour que l'image "flotte" (s’aligne) à gauche ou à droite dans le texte :
<img style="float:right" src="images/happy_face.jpg" alt="Happy face">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec nunc et diam laoreet hendrerit ac a turpis. Sed enim nisi, faucibus id risus non, porta tincidunt orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum dapibus vehicula tortor nec lobortis. Nulla gravida aliquet sem, vitae posuere nisi auctor ut. Morbi a varius dui, vestibulum euismod metus. Integer ut ipsum sagittis, blandit eros non, mollis est. Praesent at felis nec turpis malesuada vestibulum. Curabitur rhoncus vitae mi nec tempus. Proin viverra turpis luctus nisi molestie facilisis. Donec fermentum odio et interdum accumsan.
Ce qui nécessite parfois un peu de remplissage (padding) :
<img style="float:left; padding:10px;" src="images/happy_face.jpg" ...>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec nunc et diam laoreet hendrerit ac a turpis. Sed enim nisi, faucibus id risus non, porta tincidunt orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum dapibus vehicula tortor nec lobortis. Nulla gravida aliquet sem, vitae posuere nisi auctor ut. Morbi a varius dui, vestibulum euismod metus. Integer ut ipsum sagittis, blandit eros non, mollis est. Praesent at felis nec turpis malesuada vestibulum. Curabitur rhoncus vitae mi nec tempus. Proin viverra turpis luctus nisi molestie facilisis. Donec fermentum odio et interdum accumsan.
Une question qui revient régulièrement est "Comment fait-on pour utiliser une image comme arrière-plan et faire en sorte que la taille de cette image s'ajuste en fonction de la taille de la fenêtre?"
Bonne question!
La solution réside dans l'usage de certaines propriétés CSS liées aux images.
Voici un exemple avec un paragraphe :
body {
background-color: SkyBlue;
}
p {
background-image: url("/html/images/plage.jpg");
background-size: cover;
background-position: center;
padding: 20px;
color: white;
font-size: 200%;
}
Les propriétés background-repeat: repeat; et background-repeat: no-repeat; pourrait aussi vous intéresser.
Pour terminer, mentionnons qu'il est possible de spécifier l'opacité d'un élément HTML.
La propriété opacity peut prendre une valeur de 0.0 à 1.0. Plus la valeur est faible, plus l'élément est "transparent".
Appliquons cette propriété à une image :
<p> <img src="images/mordor.jpg" alt="" style="opacity: 0.2;"> </p> <p> <img src="images/mordor.jpg" alt="" style="opacity: 0.5;"> </p> <p> <img src="images/mordor.jpg" alt="" style="opacity: 0.8;"> </p>
Sortie :
