XHTML > Les images

Définitions

La balise <img> permet d'insérer une image dans une page web, elle s'accompagne des attributes suivants :

• src : Adresse relative ou absolue pointant vers l'image à afficher.
• alt : Texte alternatif décrivant ce que représente l'image. Ce texte est très important car il s'affiche lorsque l'image ne peut pas être affichée par le navigateur, et est très utile pour les personnes mal-voyantes (utilisation de synthétiseurs vocaux).
• title : Permet d'afficher une info-bulle à destination du visiteur.

	<img src="images/internet-directory-brown-128.png" 
	     alt="Logo du site" 
	     title="Joli logo non ?" />

Les différents formats d'image pour le web

Toute image diffusée sur le web doit être compressée au maximum pour en diminuer le poids, mais sans perdre trop de qualité par rapport à l'image originale.

• jpeg : Très utilisé, ce format est très bien adapté pour les photos.
• png : Format le plus récent et adapté aujourd'hui à tous les usages (graphisme et photos) depuis le support de la version PNG 24 bits par tous les navigateurs récents (attention à IE 6 !!!). Avantage par rapport au jpeg ? Le support de la transparence (sur plusieurs niveaux) !
• gif : Format assez vieux mais qui a été très utilisé. Il est à remplacer aujourd'hui par le PNG (meilleur support de la transparence, meilleur taux de compression, etc.). Ce format permet notamment le support de la transparence (un seul niveau) et permet de réaliser des images animées.

Place à la pratique :

Exercices

Récupérer sur Google Images les logos de réseaux sociaux tels que Facebook, Twitter, Viadeo, Flickr, ... et créer une page web contenant une liste de "liens-images" menant vers ces différents réseaux sociaux.