Ajouter des images en XHTML
Noter ce cours : 
Insérer une image en XHTML
Avec l'arrivée massive des connexions haut-débit dans les foyers, les sites internet n'ont jamais été aussi riches en images et autres graphiques. Comme vous allez le voir, insérer une image dans un document XHTML n'a rien de sorcier, il suffit juste de connaître la balise associée :p
Cette balise est la balise <img /> qui est une balise ne nécessitant pas de balise fermante. Cette balise doit comporter toujours deux attributs obligatoires :
- src, qui indiquera la source de l'image selon un chemin relatif ou absolu (la notion de lien relatif ou absolu est expliquée au chapitre précédent).
- alt, qui fournira un texte alternatif si l'image ne peut s'afficher (on détaillera les autres cas plus bas dans cette page).
Voici ce que ça peut donner :
<img src="images/voiture.jpg" alt="Ma voiture" />
Texte alternatif et info-bulles
Le texte alternatif, matérialisé par l'attribut alt, est très important. D'une part, il est obligatoire pour être conforme aux recommandations XHTML strict, d'autre part, il s'agit bien plus qu'un simple texte utilisé pour "être aux normes". Ce texte doit contenir une description précise de l'image qui l'accompagne. En effet, si l'image ne s'affiche pas (pour une quelconque raison), le navigateur va la remplacer par son texte alternatif. Autre point important, les non-voyants utilisant des synthétiseurs vocaux ne peuvent se baser que sur du texte pour lire une page car ils ne voient pas les images. Le texte alternatif est donc très important pour eux. Pensez-y lorsque vous réaliserez vos pages web.
Pour placer une info-bulle sur l'image, on utilise comme on l'a vu pour les liens, l'attribut title.
<img src="images/voiture.jpg" alt="Ma voiture" title="Elle est belle non ?" />
Les différents formats d'images utilisés sur le web
Il existe différents formats d'images. Le plus connu étant le format BMP qu'il est possible d'obtenir avec n'importe quel éditeur d'images. L'inconvénient de ce format est sa lourdeur. En effet, une image codée sur 24 bits en 800*600 occupera 1.37 Mo. Avec une connexion 56k fonctionnant à 5 ko/s (le débit maximal étant de 7 ko, m'enfin il ne faut pas espérer les atteindre), il y en avait pour plus de 280 secondes de chargement. Vous imaginez bien que même le plus patient des visiteurs finit par s'en aller !
Il a donc fallu trouver une solution pour diminuer le poids des images en perdant le moins de qualité possible. Différents formats sont donc apparus. Les plus utilisés sur le web sont les formats suivants :
- gif
- jpeg
- png
- Le format gif se base sur un principe d'indexation. Il permet de stocker 256 couleurs maximum (avec une couleur utilisée pour faire de la transparence si vous le souhaitez). Ce format n'est pas adapté pour les photos car le nombre de couleurs maximales est trop faible. En revanche, il est parfaitement adapté pour des icônes ou des images animées (seul format adapté au web le permettant). Vous aurez la possibilité dans les logiciels d'édition photos de spécifier un nombre de couleurs à stocker. Plus vous diminuez le nombre de couleurs, plus l'image est légère mais moins la qualité est bonne. A vous de trouver un compromis.
- Le format jpeg est adapté pour les photos. Tout bon logiciel d'édition photo va vous permettre de spécifier un niveau de qualité allant de 0 à 100. Plus le niveau de qualité est faible, meilleur est le poids qu'occupe l'image sur le disque, et donc plus l'image est rapide à télécharger. Encore une fois, il faut trouver un compromis entre qualité et poids.
- Le format png dispose de plusieurs avantages : il existe le png 8 bits qui utilise un procédé similaire au gif, mais aussi un png 24 bits permettant d'enregistrer des photos. Le png compresse mieux que le gif et peut gérer différents niveaux de transparence (contrairement au gif qui, lui, n'en gère qu'un seul : soit c'est transparent, soit ça ne l'est pas).
En résumé, pour des photos, préférez le format jpeg aux autres. Pour ce qui est des images ayant un faible nombre de couleurs, si elles sont animées, vous ne pourrez utiliser que le gif, sinon vous avez le choix entre le gif et le png, le png compressant légèrement mieux.
Chapitre suivant
