Les images

1. Parce qu'une image peut en dire autant qu'un long texte...

Pour le moment nous ne nous sommes intéressé qu'au texte car c'est le contenu majoritaire d'une page Web...
Mais comme vous le savez déjà il est possible d'afficher beaucoup d'autres contenus tout aussi parlant !!

Ainsi dans ce chapitre nous allons étudier l'intégration d'images dans un document Xhtml.

Voici comment nous allons procéder :

• Différents types d'images
• Intégration d'une image
• Accessibilité des informations sur l'image

2. Différents types d'images

Il existe 3 formats d'images principalement utilisés sur Internet.
Nous allons donc les étudier d'un peu plus prés afin de connaitre les avantages et inconvénients de chacun de ces 3 formats :

Le format GIF (Graphics Interchange Format)

Ce format permet d'enregistrer une image possédant 256 couleurs maximum dont une teinte transparente. Lorsque l'on produit une image au format GIF le nombre de couleurs est donc réduit à 256 ce qui permet d'optimiser le poids de l'image. Revers de la médaille, il y a de forte chances que cette réduction du nombre de couleurs entraine une dégradation de l'image. Par conséquent celui-ci est tout indiqué lorsque vous souhaitez afficher des images ayant un fond transparent et surtout peu de couleurs. Juste histoire d'être au courant : ce format utilise l’algorithme de compression LZW et est sous licence d´Unisys

Le format JPEG (Joint Photographic Experts Group)

Ce format est adapté aux images affichant de nombreux dégradé ou autres contenu réaliste tels que les photographies... Son principal inconvénient est que les images ainsi créées peuvent-être très lourdes !! Bien sur ce format peut-être compressé mais cela se fera alors au détriment de la qualité de l'image... Mon conseil personnel sera donc d'éviter d'excéder une compression de plus de 20% lorsque vous enregistrez une image au format JPEG Mais après cela dépend aussi de votre image...

Le format PNG (Portable Network Graphics)

Souvent cité comme concurrent au format GIF, il est vrai que le PNG possède sont lot d'avantages : jusqu'à 16 millions de couleurs et 256niveaux de transparence. Le PNG possède également l'avantage d'une compression sans perte... Son principal inconvénient ne réside donc pas dans le format lui-même mais plutôt dans l'interprétation qu'en font les navigateurs Web... je parle bien sur du pire navigateur jamais développé (la bête noire des webmasters) : Internet Explorer (cela n'engage que moi bien sur) De petit "bug" peuvent donc apparaitre : par exemple la transparence n'est pas prise en compte ou encore les couleurs ne sont pas exactement les même, etc...

Maintenant que vous connaissez bien ces différents formats nous allons en revenir au Xhtml et à l'intégration d'images dans vos pages Web.

3. Intégration d'une image

Pour placer une image dans une page Web on utilise la balise <img>
Un peu comme pour la balise de lien avec l'attribut " href ", celle-ci est pour ainsi dire toujours utilisée avec l'attribut " src " qui permet d'indiquer le chemin de l'image.
(pour ceux qui n'auraient pas suivis vous pouvez obtenir plus d'informations sur l'adressage en consultant le chapitre sur les liens )

Voici un exemple d'insertion d'image : Une bonne habitude à prendre dès maintenant lorsque vous affichez une image est d'en indiquez les dimensions.
Vous disposez pour cela des attributs " width " pour la largeur et " height " pour la hauteur : Il est également possible d'invoquer un redimensionnement de l'image directement à l'affichage en indiquant soit la largeur soit la hauteur.
L'attribut délaissé est alors automatiquement déduit par le navigateur, par exemple : Certes cela peut-être utile mais le mieux est tout de même de renseigner ces 2 attributs avec leurs valeurs réelles.
Dans la partie sur le Css nous verrons d'autres méthodes plus "propres" pour attribuer ces valeurs.

4. Accessibilité des informations sur l'image

L'inconvénient des images c'est qu'elles ne sont pas très parlantes pour les navigateurs texte (tel que Lynx), les lecteurs d'écrans, etc...
En d'autres termes, elles posent quelques soucis d'accessibilité auxquels il va falloir remédier.

Pour cela vous disposez de 3 attributs : " alt ", " title " et " longdesc "

Commençons par voir le plus important des trois : l'attribut " alt "
Celui-ci permet d'indiquer un texte alternatif justement destiné aux navigateurs fonctionnant en mode texte mais est aussi utilisée lorsque pour une raison ou pour une autre l'image ne peut pas être affichée.
Cette balise est également prise en compte par les robots des moteurs de recherche, elle a donc sont importance dans le référencement.
Pour toutes ces raisons et parce que sont utilisation fait partie des recommandations du W3C il est important de décrire en quelques mots l'image en question dans l'attribut " alt ".

Cette attribut doit toujours apparaitre avec la balise <img> sous peine de mettre en péril la validité du document Xhtml, prenez donc dès maintenant la bonne habitude de l'indiquer pour chaque image.
Dans le cas où votre image n'est pas un élément du contenu mais simplement un élément décoratif vous devez alors utiliser un attribut vide : alt=""

Notez que sous Internet Explorer l'attribut " alt " déclenche l'apparition d'une info-bulle qui en affiche la valeur (la description de l'image). Passons maintenant à celui que je placerai en deuxième position : l'attribut " title "
Celui-ci s'apparente fortement à l'attribut " alt " à la différence qu'il vous permet cette fois de donner un titre à votre image
Il n'est donc pas considéré comme obligatoire par le W3C.
Sous FireFox c'est cet attribut qui déclenche l'affichage d'une info-bulle Nous allons donc achever cet article sur : l'attribut " longdesc "
Cet attribut permet d'indiquer un lien vers la description longue d'une image. (approximativement plus de 10 mots) Attention !! Si vous avez placé un lien sur une image, l'attribut " longdesc " ne doit pas avoir la même valeur que ce lien

Lorsque vous placez un lien sur une image cette bordure apparait afin de pouvoir indiquer à l'utilisateur s'il a déjà suivis le lien de celle-ci ou pas.
Pour supprimer ce cadre il vous suffit d'utiliser l'attribut " border " avec une valeur de 0 sur la balise <img>. Mais nous verrons d'autre façons de procéder dans le chapitre sur les css (feuilles de style).