Ajouter des images en XHTML

Noter ce cours :

Liens sponsorisés :

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 :

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 :

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

Blocs et conteneurs

Vous avez aimé cet article intitulé Ajouter des images en XHTML ? Partagez-le !
Vulgarisation-informatique.com
Cours en informatique & tutoriels