0Faute : Créer et animer son site, Georges Simenon, Yello
Sommaire  Plan du site  Contact  Vous cherchez ?  Les liens
DESIGN
Sur le site
0Faute News
Recevez chaque mois les nouveautés de 0Faute ainsi que les tendances du Net et de la société.

S'inscrire Se désinscrire
Consultez le dernier numéro de 0Faute News, les archives et les enquêtes sur la protection des personnes et nos élus et le Net.

Partenaire

Créez votre site  Les images

Les images égayent la présentation d'une page, mais elle doivent surtout enrichir la page en aidant à la compréhension et à la navigation, ou en apportant des éléments nouveaux. Mieux vaut donc choisir judicieusement les illustrations afin de les adapter au texte. Sur les sites les plus réussis, les images adoptent le style dominant du serveur Web. De plus, un certain sens artistique n'est pas superflu afin d'harmoniser les couleurs entre elles et de dégager une cohérence graphique de la page, ou mieux encore, du site entier. L'utilisation des technologies multimédia sur le Web permettent d'apporter une réelle valeur ajoutée à la vente en ligne. Elles ne sont pas nécessairement très lourdes à utiliser, mais demandent souvent l'intervention de spécialistes pour obtenir un bon compromis entre une taille réduite des fichiers et une qualité acceptable.

Pour être compréhensibles par tous, les images diffusées sur le Web doivent être codées en GIF (Graphics Interchange Format, conçu par Compuserve en 1987) ou en JPEG (Joint Photographic Expert Group, créé en 1990 de manière collégiale afin d'être libre de droit). Ces deux formats travaillent et sauvegardent en mode point, c'est à dire que chaque point de l'image est référencé dans le fichier avec ses attributs de couleurs.
Le format GIF, créé le premier, plus restrictif sur le plan technique, reste toutefois très répandu. Il ne sait gérer que 256 couleurs au maximum alors que le format JPEG gère jusqu'à 16,7 millions de couleurs.
GIF et JPEG se chargent de compresser l'image et ce, afin de réduire le volume à transférer. À condition de s'en tenir à la palette de couleurs du document original, GIF n'altère pas l'image. En revanche, JPEG peut entraîner une perte de qualité. Celle-ci est déterminée par le taux de compression choisi. JPEG étant susceptible de diviser par 100 l'espace occupé par un fichier graphique, il convient de trouver le bon compromis entre la compression et la perte qualitative. Notez que la compression suivie d'une modification de l'image puis d'une nouvelle compression JPEG au même taux est un autre facteur de perte de détails. On considère généralement que JPEG est mieux adapté que GIF aux photographies, tandis que GIF prend l'avantage sur les images composées d'aplats.

La définition d'une image étant le nombre de pixels la constituant (par exemple 150 pixels en largeur et 240 en hauteur), sa résolution traduit sa précision et donc la "densité" des pixels. La résolution s'exprime en points par pouce (ppp ou dpi pour dot per inch). Même si vous avez l'habitude de manipuler des images en haute résolution en vue de leur impression sur votre imprimante "qualité photo", ne perdez pas de vue qu'une page Web n'attend que du 72 ppp. Cette valeur correspond à la résolution moyenne d'un écran.
La plupart des micro-ordinateurs se contentant d'un affichage 8 bits (256 couleurs), il est inutile de placer sur vos pages des images en miAlliers ou millions de couleurs. Si la profondeur (nombre de bits codant la couleur) d'un pixel est trop importante, le navigateur tente de simuler les couleurs absentes de sa palette. Le format GIF a l'avantage de se limiter dans tous les cas à 8 bits par pixel.

Une image peut être insérée de deux façons différentes dans une page Web : elle peut constituer le fond d'écran ou être gérée à la manière d'un bloc ancré dans la chaîne de caractères. Placée en fond, l'image constitue un décor, éventuellement sous la forme d'un motif répété. Ancrée dans la chaîne de caractères, l'image acquiert le statut d'illustration au sein du document. Bref, l'image de fond apporte une certaine consistance à la page tandis que l'image ancrée est à percevoir comme une information. Si vous en avez la possibilité, préférez un fond d'écran uni défini par la balise "BGCOLOR" à la même couleur sous forme d'image GIF.
N'oubliez pas de préciser la taille d'une image. Si vous supprimez ces informations, vous interdisez la réservation de l'espace correspondant. Dans un tel cas, les autres éléments de la page se mettent en place puis sont décalés pour laisser la place à l'image lorsque le chargement de celle-ci est achevé. L'utilisateur risque donc d'être gêné s'il a commencé à lire la page avant la fin du chargement de celle-ci.
Utilisez au maximum les tailles réelles des images. Si vous disposez d'une image de 100 x 200 pixels, ne modifiez pas artificiellement sa taille en 10 x 20. Le temps d'affichage serait celui de sa taille réelle. Préférez l'utilisation d'une véritable vignette de 10 x 20 pixels.
Les graphiques créés par un tableur peuvent devenir des fichiers graphiques indépendants qui peuvent bien sûr prendre place sur vos pages Web. Ces graphiques devront être enregistrés au format GIF et ne pas contenir de dégradés car, non contents d'alourdir l'image, ces derniers risquent fort de contenir des couleurs absentes de la palette 8 bits employée sur le Web.

Grâce aux fonctions de transparence du format GIF, les images apparaissent comme détourées sur une page Web. Pour réaliser cet effet, la technique consiste à exploiter l'une des astuces du format Gif89a : la couleur de transparence. Attention, le format JPEG n'autorise pas ce genre de manipulation. Si vous disposez d'un logiciel de dessin évolué, supportant l'édition de fichiers au format GIF, vous avez en magasin l'outil idéal. Pour que l'effet soit le plus efficace possible, mieux vaut partir d'une image en 16,7 millions de couleurs. Peu importe le format d'origine. Le risque encouru sur une image en 256 couleurs ? Utiliser par inadvertance une nuance très importante de l'image comme couleur transparente. Autrement dit, le contour de votre cliché sera transparent, mais d'autres zones de la photo pourraient aussi jouer aux ectoplasmes. Votre création perdrait alors une grosse part de son intérêt.

Il existe une option de sauvegarde des fichiers JPEG qui propose le choix d'un affichage progressif. Ce procédé permet aux visiteurs de se faire une idée des images en cours d'affichage , sans avoir à attendre la fin du téléchargement, sauf s'ils ne disposent que d'un vieux navigateur.

Pour donner de la vie, rien de tel que le mouvement. Vous pouvez créer une animation grâce aux "Gifs animés". Il s'agit tout simplement d'un ensemble de fichiers image au format GIF, qui, affichés les uns après les autres, donnent un effet de mouvement. Vous en pouvez en voir sur de nombreux sites. Attention, certains navigateurs ne sont même pas capables de jouer l'animation. C'est le cas par exemple du navigateur d'AOL, qui se contente d'afficher le dernière image. En ce qui concerne les anciennes versions de Navigator ou d'Explorer, c'est la première image de la pile d'animation qui sera affichée. Prévoyez ces problèmes. Si vous le pouvez, faîtes en sorte que le premier et le dernier graphique de votre animation soient intéressants pour votre visiteur.

0Faute vous a sélectionné quelques sites pour trouver des images et pour créer, ou faire créer vos bannières. Si vous préferez les belles photos, vous en trouverez un grand choix dans la banque d'images de Fotosearch mais la qualité se paie. Et, quand vous aurez créé vos images, vous pouvez aussi les heberger gratuitement chez Web.Images jusqu'à une taille maximale de 1Mo.

GIF Wizard Free Site Survey!
Testez vos images !

Surtout, n'oubliez pas d'accorder la plus grande importance à la création de vos bannières.

  Sommet de la page

Precedente Sommaire Remonter Suivante

  Click Here!
Pour toute question ou remarque concernant ce site, envoyez un courriel à jacques @ 0faute.com
Dernière mise à jour de cette page le 11/12/2005.
 
Dans cette rubrique
Réactions

Une réaction ? Besoin d'un conseil ?
Participez au Forum 0Faute Design !

N'oubliez pas de signer le livre d'or de 0Faute !