
|
|

|

|

Afin de mieux concevoir le Web, voici quelques trucs et
astuces pour améliorer la présentation et la
durée de chargement des pages.
Veillez à ne pas avoir d'image, une bannière
ou un cartouche par exemple, qui traverse la partie
supérieure de l'écran et sorte de la partie
droite de l'écran. Ceci peut se produire si vous
concevez vos graphiques Web à l'aide d'un
écran haute résolution. De nombreux
écrans affichent les images avec une
résolution de 640 x 480. Si vous travaillez sur un
écran haute résolution, il y a de fortes
chances pour que vous ayez conçu vos cartouches ou
bannières avec une largeur de 570 pixels ou plus.
Dans ce cas, votre graphique déborde sur la droite de
nombreux écrans, affectant de ce fait l'aspect et la
présentation générale de vos pages. Le
meilleur moyen pour éviter ce problème est de
maintenir cette valeur égale ou inférieure
à 470 pixels.
Sauvegardez les images en mode entrelacé
(interlaced). Ceci permet à un fichier GIF de se
charger dans le navigateur en une image exacte,
constituée de pixels, qui apparaît lentement
via un effet d'obturateur. Que cet effet plaise ou non,
c'est affaire de goût. Testez vos graphiques avec ou
sans mode entrelacé pour vous rendre compte par
vous-même de l'apparence de l'image.
Si vous affichez des graphiques de taille importante, des
photographies par exemple, laissez le choix à vos
lecteurs de décider s'ils veulent ou non les voir.
Pour ce faire, le meilleur moyen est d'utiliser des versions
miniatures du graphique, reliées à une plus
grande version de l'image. L'image miniature constitue un
aperçu pour les lecteurs qui s'ils le désirent
peuvent voir la version la plus grande en cliquant dessus.
Il est toujours de bon ton d'avertir les utilisateurs qu'ils
vont télécharger un très gros graphique
(plus de 50 Ko). Pour ce faire, mentionnez la taille du
fichier entre parenthèses, près de l'image
miniature.
Certaines extensions Netscape de la balise "img" peuvent
accélérer le téléchargement pour
ceux qui affichent le Web dans Netscape Navigator. Si vous
spécifiez la ´ hauteur ª et la ´
largeur ª du graphique dans la balise de l'image,
Netscape Navigator sait l'espace qu'il doit laisser pour le
graphique et commence à télécharger le
texte immédiatement. Si ces attributs ne sont pas
spécifiés, le navigateur commence
immédiatement par calculer la taille des images. Une
autre extension de Netscape est la balise "lowsrc", qui
indique au navigateur de charger tout d'abord une version
basse résolution d'un graphique, puis d'y revenir et
de charger une version avec une résolution plus
élevée une fois que tout le reste est
chargé. Ces deux astuces permettent aux lecteurs de
commencer à lire le texte immédiatement,
plutôt que d'attendre qu'une page soit totalement
téléchargée avant d'en voir une
quelconque partie.
Une bordure s'affiche autour de chaque graphique lié.
Cette bordure est de la même couleur que tous les
autres liens de la page. Ceci peut Être plus ou moins
agréable à regarder. Si vous n'aimez pas cet
aspect, vous pouvez supprimer la couleur en ajoutant
"border=0" dans la balise "img". Vous pouvez
Également ajouter des balises supplémentaires
pour aligner le graphique à droite ou à gauche
du texte ou au-dessus, au milieu ou en dessous d'un
graphique. Ces extensions ne sont pas prises en charge de
manière universelle et peuvent entraîner un
aspect totalement diffèrent de la présentation
des pages, voire même peu soigné dans certains
navigateurs. Aussi utilisez-les avec précaution.
Testez vos pages dans plusieurs navigateurs pour voir de
quoi elles ont l'air, puis faites autant de corrections que
nécessaire.
Enfin, pour les personnes qui lisent vos pages à
l'aide d'un navigateur en mode texte uniquement, ajoutez une
balise "alt" dans la balise de l'image avec une brève
description de ce qu'elle représente.
Outils logiciels d'Édition et
de gestion des graphiques
Bon nombre de ces programmes sont
disponibles à la fois pour les plates-formes Windows
et Macintosh.
- Adobe
PhotoShop: une application
graphique puissante et un standard dans la
communauté de développement du Web.
- Adobe
Illustrator: une autre
application graphique faisant partie de la norme de
l'industrie.
- GraphicConverter.
Une autre application Shareware pour convertir des images
de différents formats afin d'assurer leur
transportabilités sur Macintosh.

- Graphic
Workshop: cette application
´ shareware ª vous permet d'afficher, de
juxtaposer et de convertir les graphiques aux formats GIF
et JPEG.
- PaintShop
Pro: cette application
permet d'afficher, de convertir et d'éditer les
fichiers graphiques.
Mise à jour :
10.03.01
Articles connexes :
|