Les Images HTML

GROUPE ILEIC-Module : Programmation web-Les images
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:
Nous vous recommandons fortement d'inclure des mots clés dans le texte alternatif.
Cela améliorera le classement du site dans les moteurs de recherche.
<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>
Essayez-vous-même!
Résultat
Au lieu d'utiliser les dimensions largeur et hauteur, vous pouvez définir la taille à
l'aide de CSS largeur maximale ou max-height pour une flexibilité accrue. Cela peut
empêcher les grandes images de gâcher votre mise en page sur un périphérique
doté d'un petit écran.
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>
</head>
<body>
<img
alt="Aleq" width="200" height="185" style="float:left"/>
<p> L'image d'Aleq </p>
</body>
</html>
Essayez-vous-même!
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>
</head>
<body>
<img
alt="Aleq" width="200" height="185" style="float:right"/>
<p> L'image d'Aleq </p>
</body>
</html>
Essayez-vous-même!
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>
</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>
Essayez-vous-même!
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.

Les Images HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Les Images HTML

Transféré par

Droits d'auteur :

Formats disponibles

GROUPE ILEIC-Module : Programmation web-Les images

Les images HTML

Les attributs obligatoires pour le tag <img>

<img src="example.jpg" />

<img src="https://www.example.com/images/example.jpg" />

<img src="https://www.w3docs.com/" alt="Auto-apprentissage HTML">

Les attributs recommandés du tag <img>

<img src="https://www.w3docs.com/learn-html" alt="HTML tutorial" width=”200”

<title> Titre du document </title>

<h1> Place pour votre titre </h1>

<p> C'est une image d'ALeq </p>

Emballage des images avec un texte

Pour placer l’image à gauche et le texte à droite, on doit l’ajouter au tag

<title> Titre du document </title>

<h1> Place pour votre titre </h1>

<p> L'image d'Aleq </p>

Si ajouter style="float:right" au tag <img>, le text sera placé de gauche, et l’image de

<title> Titre du document </title>

<h1> Place pour votre titre </h1>

<p> L'image d'Aleq </p>

Comment ajouter un hyperlien à l’image

<title> Titre du document </title>

<a href="https://www.w3docs.com/" aria-label="w3docs homepage">

Les formats des images

 GIF (Graphics Interchange Format)

Le format JPEG supporte plus que 16 millions couleurs. Il convient pour la

Les formats modernes

Vous aimerez peut-être aussi