TRANSFER - Atelier 2 -

Le développement des pages du site : L'utilisation des images

Les deux standards de formats d'images les plus utilisés sur le Net sont :

GIF : Graphics Interchange Format ;
JPG ou JPEG : Joint Photograpgic Experts Group.

Quel format d'image ?

Le JPEG est utilisé pour les photos de grande taille : Il permet de compresser les images et de réduire ainsi leur temps de téléchargement ;
Le GIF est utilisé pour les fonds d'écran, les images à fond transparent, les logos et les boutons. Ce format permet d'avoir une bonne qualité d'images à 256 couleurs.

Tableau de comparaison entre GIF et JPEG :

	Nombre de couleurs	Utilisations	Avantages	Inconvénients
GIF	256	Logos, boutons, fonds d'écrans, images à fond transparent	Universalité	Limitation à 256 couleurs
JPEG	16.7 Millions	Photos de grandes tailles	Universalité	Destruction importante de la qualité de l'image quand on utilise un taux de compression très élevé

Le GIF à fond transparent :
Une image en format GIF peut être sauvegardée sous deux formats : le 89a ou 87a. Seul le format 89a permet de sauvegarder une image avec une couleur de fond transparente.
La transparence des images est très conseillée si vos pages ont un fond texturé, un motif, une image.
Affichage progressif des images :
La plupart des logiciels de retouche d'images permettent la sauvegarde d'un fichier GIF ou JPEG avec l'option ''Progressive'' ou ''Entrelacée''. Cette option permet d'afficher les images par trames successives (et non plus ligne par ligne de haut en bas). Ceci donne l'impression que l'image devient plus nette au fur à mesure de sa transmission. L'affichage de l'image est ainsi plus agréable pour l'internaute puisqu'il obtient assez rapidement une idée du contenu de l'image qui devient ensuite de plus en plus nette.
L'utilisation des imagettes :
Si vous êtes obligés de proposer sur votre site une image lourde (reproduction d'œuvres d'art en grand format, des plans d'accès…), optez pour une imagette de petit format optimisée au niveau de la taille. Proposez à l'utilisateur de cliquer dessus en lui indiquant qu'il pourra l'obtenir en grand format. Précisez alors la taille de l'image restaurée afin qu'il sache à quoi s'attendre.
Réutilisation des images :
Privilégiez la répétition d'images identiques lors de la navigation de l'internaute de page en page. Les images téléchargées au premier affichage seront ainsi présentes dans le fichier cache de l'ordinateur de l'internaute et ne seront pas rapatriées de nouveau sur sa machine lors de l'affichage des pages Html suivantes.
De même et pour diminuer le temps de téléchargement des images, vous pouvez utiliser les attributs WIDTH et HEIGHT de la balise IMG. Ceci permettra au navigateur d'avoir les dimensions de l'image et affichera la mise en page plus rapidement.

Le squelette des pages

Quelques modèles de pages

La page d'accueil du site

L'utilisation des images

Accueil - Aide - Contact - Haut de la page