Trois formats sont reconnus par les navigateurs :
Il en résulte que format GIF est essentiellement utilisé pour les logos, les illustrations, les petites animations, mais en aucun cas pour des images photographiques.
En partant d'une image de 267,1 Ko (304 x 222 points avec 32 bits/point)
| Compression JPEG (7Ko) Gain = 97% | Compression GIF (37 Ko) Gain = 86% |
|---|---|
 |
 |
| (source : http://gimp-savvy.com/ ) | perte de qualité dans le dégradé du ciel |
Le format JPEG est parfaitement adapté à la compression d'image photographiques.
Seuls les navigateurs récents reconnaissent ce format. L'utilisation de millions de couleurs, la correction gamma et la compression sans perte permet un résultat qualitatif optimal. Ce format sera donc utilisé lorsque les images ne doivent souffrir d'aucune altération. La compression JPEG, étant bien plus efficace pour un résultat très satisfaisant, lui sera préférée lorsque l'exactitude de la restitution n'est pas critique et que l'image n'utilise aucun effet de transparence..
| Compression JPEG (7Ko) Gain = 97% | Compression PNG (94Ko) Gain = 64% |
|
 |
La différence est à peine perceptible pour un gain nettement supérieur
La balise <img> sert à l'intégration d'images dans une page web. L'image est déterminée par la valeur de l'attribut “src” qui désigne le fichier (jpeg jpg gif ou png) la contenant.
La valeur de l'attribut “src” obéit aux même règle de syntaxe que celle de la référence à une page dans l'attribut “href” de la balise <a>. On retrouve les trois type de références de l'attribut “href” de la balise <a>.
Les dimensions de la zone d'affichage de l'image peuvent être précisées par le biais des attributs “width” et “height” de la balise <img>.
 |
|
|
| <img src="photo.jpg" width="84" height="104" /> |
<img src="photo.jpg" width="161" height="199" /> |
<img src="photo.jpg" width="50" height="199" /> |
En principe il faut donc faire correspondre les attributs “width” et “height” avec les dimensions réelles de l'image ou inversement adapter l'image aux dimensions d'affichage souhaitées. Ainsi il n'y a pas de perte de qualité tout en ayant une image de taille optimale.
L'attribut “align” permet de gérer le positionnement d'une image par rapport au texte qui l'entoure. Cet attribut est en cours d'abandon, l'utilisation des CSS permettant un controle plus fin.
lorsque la valeur de l'attribut “align” est bottom
le bas de l'image s'aligne sur la ligne de base du texte
lorsque la valeur de l'attribut “align” est middle
le milieu de l'image s'aligne sur la ligne de base du texte
lorsque la valeur de l'attribut “align” est top
le haut de l'image s'aligne sur l'élément le plus haut de la ligne courante.
Cet élément peut être du texte
Le point le plus haut du texte est déterminé par le plus haut caractère de la police :
Ê
Cet élément
peut aussi être une image :
Lorsque la valeur de l'attribut “align” est left, les éléments qui suivent la balise <img> dans le code source s'alignent à droite de l'image.
Pour forcer le texte à ne plus s'aligner sur la droite de l'image on insère une balise <br clear="left">. Cet attribut impose à la suite du flux de passer sous l'image cadrée à gauche comme cela est le cas pour la suite.
Lorsque la valeur de l'attribut “align” est right, les éléments qui suivent la balise <img> dans le code source s'alignent à gauche de l'image.
Pour forcer le texte à ne plus s'aligner sur la gauche de l'image on insère une balise <br clear="right">. Cet attribut impose à la suite du flux de passer sous l'image cadrée à droite. On peut également utiliser <br clear="all"> qui fonctionne dans le cas des cadrage à droite et à gauche.
Il est possible de gérer l'espacement horizontal et vertical entre le texte et l'image grâce aux attributs “hspace” et “vspace”
de la balise <img>
Ainsi dans cette illustration la valeur de l'attribut “hspace” à été fixée à 30 .
Le positionnement des images sera avantageusement géré par des propriétés CSS
Copyright Gabriel Braun 2007