Les images HTML
Pour insérer une image dans la page Web, on utilise le tag simple <img> avec un certain nombre d'attributs.
Les attributs obligatoires pour le tag <img>
L’attribut src (source) est requis, car il indique le chemin de l’accès à l’image. La valeur de l’attribut src peut être un nom de fichier, aussi que son URL.
<img src="example.jpg" />
ou
<img src="https://www.example.com/images/example.jpg" />L’attribut alt est aussi requis pour le tag <img>. Sa valeur est un texte explicatif affiché dans le navigateur avant le chargement de l'image. Le navigateur affiche également ce texte lorsque vous passez la souris sur l'image.
La syntaxe du tag <img> avec les deux attributs obligatoires ressemble à ceci:
<img src="https://www.w3docs.com/" alt="Auto-apprentissage HTML">Les attributs recommandés du tag <img>
Avec le tag <img> on recommande d’utiliser les attributs width et height, qui définissent la largeur et la hauteur des images respectivement. Tout d’abord, le navigateur charge le texte sur la page, et ensuite les images. Quand la hauteur et la largeur des images sont indiquées, le navigateur réserve un lieu pour des images (on voit un carré vide sur la page). Si ces paramètres ne sont pas indiqués, le navigateur ne saura pas la taille de l'image et montrera un petit carré. Une fois l'image chargée, le texte et les autres objets de la page seront déplacés, ce qui affectera la vitesse de téléchargement du site et entraînera des inconvénients.
<img src="https://www.w3docs.com/learn-html" alt="HTML tutorial" width=”200” height=”120” />Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<h1>Place pour votre titre </h1>
<p>C'est une image d'ALeq</p>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>Résultat
Emballage des images avec un texte
La position des images par rapport au texte peut être ajustée à l’aide de la propriété CSS float
Pour placer l’image à gauche et le texte à droite, on doit l’ajouter au tag <img> style="float:left".
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<h1>Place pour votre titre </h1>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:left"/>
<p>L'image d'Aleq</p>
</body>
</html>Résultat
Si ajouter style="float:right" au tag <img>, le text sera placé de gauche, et l’image de droite.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<h1>Place pour votre titre </h1>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:right"/>
<p>L'image d'Aleq</p>
</body>
</html>Résultat
Comment ajouter un hyperlien à l’image
Dans le chapitre précédent, nous avons appris à utiliser l'élément <a> pour ajouter des hyperliens. Si vous voulez faire un clic sur une image, vous devez la placer dans le tag <a>.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<a href="https://www.w3docs.com/" aria-label="w3docs homepage">
<img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo"/>
</a>
</body>
</html>Résultat
Voyons comment cela fonctionne. Cliquez sur l'image ci-dessous et vous serez redirigé vers la page d'accueil de notre site Web.
Les formats des images
Les sites Web utilisent généralement des images numériques de trois formats :
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
Le format GIF ne supporte que 256 couleurs uniques. Pour obtenir le reste des nuances, les pixels voisins sont mélangés afin que l'œil humain les perçoive comme la bonne couleur. C'est pourquoi ce format ne convient pas aux photos en couleur. Il est utilisé pour créer des images simples (diagrammes, boutons, graphiques simples, etc.) qui se chargent rapidement et ne ralentissent pas le site.
Le format JPEG supporte plus que 16 millions couleurs. Il convient pour la compression et le stockage de photos en couleur, mais une fois compressé, leur qualité est perdue. Lorsque vous travaillez avec ce format, l’essentiel est de trouver un équilibre entre le niveau de qualité et le poids optimal des images.
Le format PNG combine les avantages des formats JPEG et GIF. Il prend en charge des millions de couleurs et vous permet de compresser des images sans perte de qualité. Ce format est adapté à la sauvegarde d’images où vous avez besoin d’une extrême clarté (dessins, graphiques, diagrammes complexes, etc.).
Les formats modernes
Outre les formats d'image classiques, il existe des formats modernes qui gagnent progressivement en popularité.
Le format WebP développé par Google remplace le format JPEG: avec le même taux de compression, il offre la meilleure qualité.
Un autre format qui surpasse le JPEG classique en préservant une meilleure qualité au même niveau de compression est BPG (Better Portable Graphics).
Apple dans la 11ème version d'iOS au lieu de JPEG utilise le format HEIC, qui vous permet de sauvegarder des images de haute qualité qui ne prennent pas beaucoup de place.
Pratiquez vos connaissances
