|

Images inline, images-bouton

Thème

Connaître les principaux formats d'image supportés par les browsers Web, et les techniques d'insertion et justification d'images en-ligne dans les pages Web.

Caractéristiques des différents formats d'image utilisés sur le Web :

• GIF87a (format propriétaire défini par CompuServe et Unisys) :
  couleurs indexées (max. 8bits/pixel => 256 couleurs), compression sans perte (lossless LZW compression), entrelacement facultatif (permettant affichage progressif)
• GIF89a :
  comme GIF87a avec en outre : transparence, animation (GIF-animé)
• JPEG (format ouvert, supporté depuis Netscape 2 et IE 2) :
  couleurs vraies (24 bits/pixel => 16 millions de couleurs), compression avec perte (lossy compression : différents facteurs de compression/perte), progressive (analogue à entrelacement GIF)
• PNG (défini sous l'autorité du W3C) :
  couleurs vraies (jusqu'à 48 bits en couleur et 16 bits en n-bl.) ou indexées, compression sans perte meilleure que GIF, affichage progressif, correction gamma, alpha channel (effets sophistiqués de transparence), embedded text, réellement supporté à partir version 4 des browsers, mais encore très peu répandu sur le Web

Balises

• Placement image :

  <img src="URL" alt="texte alternatif" title="description" border="pixels"
  width="larg_pixels" height="haut_pixels" align="left,right,top,absmiddle,middle,bottom"
  hspace="pixels" vspace="pixels">
  

• l'attribut ALT sert à spécifier un texte alternatif (et non pas une information complémentaire à l'image) qui s'affichera en lieu et place de l'image dans le cas où :
  • le navigateur n'est pas capable d'afficher les images en général (p.ex. navigateur en mode texte comme Lynx...), ou certains types d'images en particulier
  • l'utilisateur a configuré son navigateur de façon à ne pas afficher les images (voir p.ex. fonctionnalité Tools>Image Manager sous Mozilla )
  • le lien pointant vers l'image est cassé
• l'attribut TITLE permet (à partir de Mozilla 1, Netscape 6, IE 5) d'associer à l'image une description complémentaire (annotation) qui apparaît par exemple, avec Mozilla ou IE, sous forme de "tooltip" jaune lorsque le curseur survole l'image (mouseover) (ce que fait aussi ALT sous IE, mais pas sous Mozilla) ; rappelons que cette attribut TITLE peut notamment aussi être utilisé dans la balise <A...> de définition de liens

la norme HTML 4.01 définit encore un attribut LONGDESC="url" permettant de définir un lien vers une ressource fournissant une description plus détaillée de l'image

• rendent possible une mise en page accélérée du texte de la page pour les browsers Web capables d'effectuer un affichage progressif (réservation de l'espace nécessaire à l'image dans la passe d'affichage du texte, puis affichage différé des images au fur et à mesure qu'elles "arrivent")
• permettent de redimensionner une image (compression) afin de bénéficier d'une meilleure qualité de la page à l'impression (les imprimantes ayant une nettement meilleure résolution que les écrans) ;
  Exemple si l'on veut afficher une image raster de 600x450 pixels en-ligne dans une page Web aux dimensions 200x150 pixels, 2 possibilités se présentent :
  • soit on redimensionne l'image (resampling), avec une application de traitement d'image (PaintShop Pro, PhotoShop...), en 33% (200x150 pixels) et on l'affiche simplement avec <IMG SRC=image> => rapidité d'affichage, mais qualité d'impression moindre
  • soit on insère l'image originale (600x450 pixels) avec <IMG SRC=image WIDTH="200" HEIGHT="150"> (compression) => qualité d'impression améliorée, mais impact négatif au niveau du temps de chargement de la page Web (de son image)

Attention ! Ces paramètres WIDTH et HEIGHT sont en général automatiquement (re)calculés par les éditeurs Web WYSIWYG (Adobe PageMill...) en fonction de la taille réelle de l'image, donc avec la seconde option de l'exemple ci-dessus l'image pourraît soudain apparaître 3x trop grande dans la fenêtre du browser !

Pour insérer dans une page Web une ressource externe (sous la forme d'un bloc en-ligne), on utilisera la technique coté serveur SSI , ou la technique coté client <IFRAME...> (plus risquée car non supportée par anciens navigateurs).

Exercice

<img src="/images/xhtml.png" alt="" align="top">
<img src="/images/xhtml.png" alt="" align="middle">
<img src="/images/xhtml.png" alt="" align="bottom">

<a href="http://dgrwww.epfl.ch">
<img src="/images/dgr64.gif" alt="Génie Rural" border="0">
</a>

|