Ecrire le HTML | A Propos | FAQ | Alumni | Kudos | Références | Tags | Leçons | précédent | suivant |

7. Graphiques "à la Web"

Envoyer du texte sur Internet : rien de plus que de l'antique courrier électronique. Les gens le font depuis des dizaines d'années ! Si vous pouvez y inclure des Images, votre message peut être bien plus parlant ! La moyenne est-elle toujours de 1000 mots par image ?

Objectifs

Après cette leçon, vous pourrez :

Leçon

Installez-vous confortablement et détendez-vous ! Cette leçon est en grande partie une introduction aux graphiques pour le Web. Mais nous vous ferons quand même faire une petite activité en-dessous.

Le Format Graphique Sur Le Web

Il y a d'innombrables formats de fichiers pour les fichiers graphiques sur ordinateur... PICT, GIF, TIFF, PNG, sans parler des EPS, BMP, PCX, JPEG...

Ca sonne comme de la poésie occulte. De la mauvaise poésie. De la poésie de tocard !

La manière dont un navigateur web affiche les images en format HTML indique l'emplacement d'un fichier graphique dans un format unique pouvant être interprété par différents types d'ordinateurs. Par exemple, quand l'information dans ce format est reçue par votre Macintosh, le navigateur web sait l'afficher en format image pour Macintosh. Et quand la même information est reçue par un navigateur Windows, elle est affichée en image pour Windows.

En jargon technique, nous dirions que ce format d'image est indépendant de la plate-forme matérielle. Le HTML lui-même est indépendant de la plate-forme matérielle, dans la mesure où les caractères de texte simple peuvent être interprétés par n'importe quel ordinateur.

Le format standard pouvant s'afficher à l'intérieur d'une page web est le format GIF pour Graphics Interchange Format. Le GIF compresse l'image (réduit la taille du fichier) et le traduit en code binaire pouvant être envoyé sur Internet. La compression GIF est très efficace sur du graphique ayant des zones contigües de même couleur, et la compression est encore meilleure quand la couleur est continue horizontalement. Les images GIF peuvent définir une couleur "transparente" pour que les images puissent apparaitre avec des contours non rectangulaires. Elles peuvent aussi être sauvegardées en format "interlaçé" pour que, quand vous voyez une page web, les images commencent à apparaitre plus tôt et se "dissolvent" dans l'image finale.

L'autre format de fichier utilisé sur le web est le JPEG (d'après le Joint Photographic Expert Group qui a développé ce format). Dans les premières années du web, les images JPEG n'étaient pas affichées dans la page mais dans une fenêtre séparée, en utilisant une application externe appelée "helper". La majorité des navigateurs supporte aujourd'hui les images JPEG et les affiche directement dans la page web.

La compression JPEG est très efficace pour les images photographiques où les couleurs peuvent varier sur de courtes distances (images avec du "grain"). Le JPEG offre une compression impressionnante en taille de fichier, quelquefois dans un rapport de 10 (e.g. un fichier de 1500 kb réduit à 150 kb), qui peut être un bon compromis en regard de la qualité de l'image. Les images JPEG n'ont pas la possibilité d'avoir des couleurs transparentes.

Pour plus d'informations sur ces formats, consultez la page SITO sur la Compression de Fichiers Graphiques. Si vous avez envie d'un excellent livre, essayez Concevoir des Images Web par Lynda Weinman.

De plus en plus de programmes d'images ont des fonctions intégrées pour sauvegarder les fichiers en format GIF. Les plus récents comme ImageReady de Adobe et Fireworks de Macromedia ont été spécialement conçus pour créer des images web. Vous pouvez trouver des programmes / utilitaires en shareware pour convertir des images au format web sur download.com.

Quelques Points à Considérer Quand Vous Utilisez Des Images

Pour ce didacticiel, vous n'aurez pas à utiliser un de ces programmes graphiques. Nous vous montrerons comment obtenir une copie des images nécessaires.

Pourtant, quand vous commencerez à développer vos propres pages web, vous devrez vous habituer à créer des images, soit en format GIF, soit en format JPEG. Si vos pages web intègrent du graphique, considérez les points suivants :

Vous pouvez concevoir une superbe page web, pleine de grandes images, qui se chargeront très bien sur votre ordinateur, mais qui seront excessivement lentes pour un internaute utilisant un modem lent sur un réseau encombré. Le 'net est un endroit populaire et de plus en plus chaque seconde.

Sauvegarder Et Inclure Des Images Dans Votre Page Web

Pour la prochaine leçon, vous aurez d'abord besoin de télécharger une copie d'une image GIF d'un volcan (attention, ça va chauffer !).

Suivez simplement les instructions du Studio d'Images de la Leçon 7 et revenez ensuite ici pour terminer cette leçon.


Vérifiez Votre Travail

Assurez-vous que le fichier, lava.gif, est bien dans le même répertoire/dossier que votre fichier HTML, volc.html. Si vous ne le trouvez pas, regardez si vous ne l'avez pas sauvegardé à un autre endroit par erreur. Le cas échéant, copiez-le au bon endroit.

Révision

  1. Quels sont les deux formats graphiques utilisés sur le World Wide Web ?
  2. Comment un fichier graphique s'affiche-t-il sur différents ordinateurs ?
  3. Quels sont les points-clés à considérer quand vous voulez inclure des images dans des pages web ?
  4. Comment avez-vous sauvegardé l'image de lave pour l'utiliser dans votre document WWW ?

Travail Indépendant

Surfez sur le web et cherchez des images. Essayez de télécharger au moins une image pouvant être utile à votre page. Quelques endroits à aller voir :


A Suivre....

Vous avez l'image... Maintenant, comment D I A B L E allez-vous l'afficher dans votre document ?

ALLER A.... | Index des Leçons | précédent : "Des Listes" | suivant : "Images Incluses" |

Ecrire le HTML : Leçon 7 : Graphiques à la Web
©1994-2003 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

La 'net connection (en anglais) à MCLI est Alan Levine
Suggestions en Français à Bernard Bensoussan

URL: http://www.mcli.dist.maricopa.edu/tut/tut7.html