SELFHTML/Aides à la navigation Graphisme

	Formats graphiques pour pages Web
	Généralités sur les formats graphiques pour pages Web  Le format GIF  Le format JPEG  Le format PNG  Le format LuraWave  Le format SVG

Généralités sur les formats graphiques pour pages Web

Sur le Web deux formats de fichiers, pouvant être affichés "en ligne" c'est à dire dans leur propre fenêtre par tous les navigateurs même les moins modernes se sont imposés pour les graphiques: Les formats GIF et JPEG. Les forces des deux formats résident pourtant dans des domaines différents. À cela s'ajoute un nouveau format plein de promesses qui réunit de nombreux avantages de GIF et de JPEG: le format PNG. Ce format est aussi supporté par les navigateurs plus récents même si c'est de façon inégale et souvent incomplète. Par ailleurs existent encore d'autres solutions qui méritent l'attention mais qui n'ont qu'un cercle restreint d'utilisateurs, parce qu'elles nécessitent un plugiciel - c'est le cas par exemple du format de LuraWave. Tous ces formats ont une chose en commun: ce sont des formats orientés pixels. Le graphique vectoriel sur le Web est encore par contre assez rare. Le format qui promet beaucoup dans cette optique, le format SVG basé sur XML, ne se développe malheureusement qu'en hésitant. L'espoir demeure cependant qu'il soit adopté.

Dans cette partie, les formats nommés sont brièvement présentés.

Le format GIF

Les fichiers du format GIF ont l'extension habituelle de nom de ficher .gif et le  type Mime image/gif. En HTML, les fichiers GIF peuvent être incorporés à l'aide de l'élément img (voir  Incorporer des graphiques).

GIF figure pour Graphics Interchange Format et a été introduit, il y a de nombreuses années déjà par l'annonceur en ligne CompuServe. Il se distingue par une haute compression. C'est pourquoi il s'est imposé rapidement dans le domaine en ligne où la transmission de données coûte du temps et de l'argent. Le standard du format GIF aujourd'hui largement répandu est ce qu'on appelle le "format 89". Ce format propose trois possibilités qui rendent le format GIF particulièrement intéressant pour la mise en oeuvre sur le Web:

• Interlaced: La possibilité de sauvegarder un fichier "interlaced". Un graphique ainsi sauvegardé, n'est pas lu et construit ligne par ligne lors de son chargement mais couche par couche . Ce qui est une aide pour le chargement de pages Web. Car ainsi, la structure de base du graphique apparaît très vite à l'écran chez l'utilisateur. Lors de la suite du processus de lecture, le graphique devient toujours plus précis et sa résolution plus fine à l'écran.
• Animation: Le format GIF offre la possibilité de sauvegarder plusieurs graphiques en un seul fichier graphique, en liaison avec les options pour le contrôle des différents graphiques. À l'aide de cette propriété du format GIF, il est possible de réaliser des  graphiques GIF animés.
• Couleur transparente: Le format GIF travaille avec des  palettes de couleurs et couleurs indexées, donc avec un nombre limité de "couleurs indexées". Ici s'offre la possibilité de définir une de ces couleurs comme couleur "transparente". À l'affichage apparaissent alors les éléments qui sont placés sous le graphique aux endroits où le graphique est transparent. Les détails sur les possibilités qui y sont liées sont exposés dans la partie traitant de la  Transparence d'une couleur déterminée de la palette de couleurs.

Un inconvénient du format GIF est qu'il peut sauvegarder au maximum 256 couleurs par fichier. Un point positif par contre est que vous pouvez les comprimer sans perte de données. En raison de ses caractéristiques, le format GIF n'est pas très approprié pour les graphiques à haute résolution comme les photos. Le format GIF est idéal par contre pour graphiques Web typiques comme les  boutons, les  puces, les  barres, les  symboles et les  Cliparts.

Malheureusement, le format GIF n'est plus complètement épargné par les éclaboussures des tentatives pour faire de l'argent sur Internet. La firme Unisys, qui à l'origine déposa un brevet pour l'algorithme LZW qu'utilise le format GIF, remua beaucoup de vent fin 1999 quand elle fit connaître son intention d'ester en justice contre les graphiques GIF non patentés sur la toile. Si on considère le fait qu'il y a bien à peu près autant de graphiques GIF sur la toile que d'habitants sur notre planète, ce projet n'était pas il est vrai, particulièrement réaliste. Les fournisseurs de logiciels graphiques soutenant le format GIF, doivent, il est vrai détenir u8ne licence et sont aussi contrôlés. C'est pourquoi, il y a, avant tout dans le monde des gratuiciels et divers autres lieux, des protestations et des appels à ne plus utiliser le format GIF.

Le format JPEG

Les fichiers du format JPEG GIF ont l'extension habituelle de nom de ficher .jpg, .jpeg ou .jpe et le  type Mime image/jpeg. En HTML, les fichiers JPEG peuvent être incorporés à l'aide de l'élément HTML img (voir   Incorporer des graphiques).

JPEG figure pour Joint Photographic Expert Group, donc pas pour le nom du format graphique mais pour la nom de la corporation qui a développé le format. Le procédé JPEG est un algorithme de compression pour des flux de données qui se base dur l'algorithme DCT (Diskrete Cosinus Transformation) en relation avec le codage de Huffman. Le format du même nom pour les graphiques est simplement une application de cet algorithme sur les graphiques en pixels. Entre-temps, l'algorithme JPEG est appliqué également aux vidéos et a introduit le format vidéo apprécié MPEG.

Le format graphique JPEG comprime également très bien et a l'avantage par rapport au format GIF qu'il peut sauvegarder par image jusqu'à 16,7 millions de couleurs. C'est pourquoi il ne travaille pas comme le format GIF avec des palettes de couleurs de couleurs déterminées, mais avec tout le spectre des couleurs. . L'inconvénient en est que JPEG comprime avec perte de données, c'est à dire plus le facteur de compression est grand plus la qualité du graphique sera mauvaise.

Pour le format JPEG vous pouvez avec de bons programmes graphiques déterminer vous même deux paramètres:

• La résolution DPI: C'est la densité en points (dpi = dots par pouce). Pour les fichiers JPEG, dont vous avez besoin pour l'affichage sur des pages WWW, une valeur entre 70 et 100 dpi suffit. Au cas où vous voulez imprimer le graphique, vou avez besoin il est vrai de beaucoup plus de dpi.
• Le facteur de compression: Plus le facteur de compression est élevé, plus la qualité de l'image est mauvaise. Plus le facteur de compression est bas, plus la taille du fichier est élevée .

Les pertes dues à la compression pour les graphiques JPEG apparaissent avant tout dans les passages de couleurs tranchés sur l'image, donc sur les coins et les bords des objets représentés ("Les bords s'effilochent"). Pour les images ayant peu de couleurs mais des contours francs, donc par exemple pour des dessins simples, des esquisses contrastées etc... le format JPEG n'est de ce fait pas approprié. Le format montre par contre ses ponts forts pour la sauvegarde de photos et autres graphiques dans lesquels on observe des dégradés fins. Même avec un taux de compression faible, les tailles de fichier sont bien plus petites que celles de graphiques Bitmap. Même des photos remplissant l'écran peuvent être ramenées pour une qualité satisfaisante à une taille de fichier qui peut être considérée comme acceptable sur la toile.

Il existe une variante des graphiques JPEG appelée "graphiques progressifs JPEG". Là de façon similaire au format GIF dans sa variante "interlaced", est d'abord construite à l'écran une version complète mais encore imprécise du graphique. La première image pas encore très précise peut déjà être affichée à l'écran quand environ 15% du fichier graphique ont été transmis au navigateur appelant.

Le format PNG

Les fichiers du format PNG ont l'extension habituelle de nom de ficher .png et le  type Mime image/png. En HTML, les fichiers PNG peuvent être incorporés à l'aide de l'élément img (voir   Incorporer des graphiques), mais aussi avec les éléments embed ou object.

PNG signifie Portable Network Graphic (prononcé: PING). Il s'agit d'un format graphique conçu spécialement pour la mise en oeuvre sur le Web et dont les normes sont comme celles de HTML, CSS, XML et autres technologies Web assurées par le consortium W3. La recommandation (Recommendation) du consortium W3 sur PNG remonte à 1996. Le document correspondant peut être trouvé sur les pages du consortium W3 sous le titre  Spécification PNG (Portable Network Graphics).

PNG doit rassembler tous les avantages de GIF et de JPEG et se distingue par les caractéristiques suivantes:

• Compression sans pertes: PNG comprime sans perte de données comme le format GIF. L'algorithme de compression mis en œuvre travaille de façon similaire à celle du format ZIP. Les répétitions de modèles de pixels sont remplacées par des informations Meta sur ce modèle, ce qui mène à des forts taux de compression avant tout pour des graphiques comme les cliparts, les esquisses etc... Cet algorithme a par contre moins d'effet pour les photos et graphiques avec de nombreux dégradés de couleurs fins. C'est tout à fait similaire à la compression de données en fichier ZIP où les fichiers binaires dont les modèle d'octets reconnaissables est moindre se laissent moins compresser que des fichiers texte par exemple.
• Intensité de couleurs plus transparence: PNG soutient 16,7 millions de couleurs comme le format JPEG, mais aussi au choix la sauvegarde avec couleurs indexées donc avec une palette de couleurs limitée. Ainsi le format reste t-il flexible et peut être employé pour toutes les sortes de graphiques. Outre les trois valeurs de couleurs pour le rouge, le vert et le bleu, le format PNG peut en plus sauvegarder une quatrième valeur par pixel, à savoir le canal alpha. La valeur alpha sauvegarde le le degré de transparence du pixel. De cette façon des effets de transparence sont possibles dont l'échelonnement est beaucoup plus fin que ce qu'il est possible de faire avec le format GIF.
• Fonction Interlaced: comme le format GIF et le format JPEG dans sa variante "progressive", PNG soutient la construction du graphique par couche (fonction Interlaced). Avec PNG, 1-2% des données transmises suffisent déjà pour pouvoir afficher une ébauche de l'image.
• Informations sur la correction Gamma: le format PNG permet la sauvegarde d'une série d'informations complémentaires relatives à l'image, parmi lesquelles la valeur Gamma, qui par exemple était déterminante lors de la prise de vue. Les navigateurs Web qui affichent l'image peuvent par exemple utiliser cette information pour, lors de l'affichage de l'image effectuer une correction Gamma automatique en fonction de l'écran utilisé et du système d'exploitation. Cette propriété peut aider à éviter que le même image apparaisse souvent avec tant de différences sur divers écrans et plates formes.
• Informations sur la provenance de l'image et les droits: Le format PNG permet de sauvegarder des champs texte sur le titre de l'image, l'auteur de l'image, la description de l'image, les droits, la date de création, le logiciel de création, la source des données ainsi que des remarques juridiques et coutumières sur la protection.

Les graphiques animés comme dans le format GIF ne sont il est vrai pas possibles avec le format PNG.

Il y a donc de nombreuses raisons qui plaident pour le format PNG. Il ne constitue pas tant une concurrence pour le format JPEG (JPEG compresse les photos sensiblement plus que PNG - Les tailles de fichiers de photos à haute définition au format PNG ne sont par particulièrement attrayantes pour la toile), mais plutôt une concurrence au format GIF -Format, qui depuis la façon cavalière de se conduire de Unisys sur le plan des droits attachés au brevet, est devenu incertain. Le plus gros problème de PNG n'est vraiment que le soutien hésitant par les logiciels. Certes, Netscape soutient le format PNG depuis sa version 4.04, et même l'Explorer Internet peut afficher les graphiques PNG depuis sa version 4.0. Il y a aussi toujours plus de programmes graphiques qui maîtrisent le format PNG. Pourtant il y eut ensuite pour les différentes versions des navigateurs toujours des lacunes dans le soutien PNG. Le format n'était pas non plus complètement soutenu etc... C'est pourquoi - et bien sûr aussi pour des raisons d'habitude - le format PNG a encore du mal à s'imposer face au format GIF.

Le format LuraWave

Les fichiers du format LuraWave ont l'extension habituelle de nom de ficher .lwf et le  type Mime image/x-wavelet. En HTML, les fichiers PNG peuvent être incorporés à l'aide de l'élément embed ou object (voir  Incorporer des objets et  Incorporer du multimédia (Netscape traditionnel).

LuraWave est un format de fichier de la firme LuraTech pour les graphiques en pixels. Il convient bien avant tout pour les graphiques haute définition, donc pour les photos et images avec des fins dégradés de couleurs. Pour de tels graphiques, l'algorithme de compression particulier qu'emploie le format LuraWave et qui est supérieur aux algorithmes de JPEG et de PNG, se distingue. L'algorithme Lura qui travaille avec ce qu'on appelle la compression Wavelet (compression en ondelettes), garantit, si on le compare directement avec JPEG pour une réduction de la taille du fichier identique de l'image originale, une qualité d'image bien meilleure que le format JPEG. Outre la compression particulièrement bonne, le format Lurawave dispose d'autres particularités:

• Taille réglable: En raison de l'algorithme de compression en ondelettes, il est possible, comme avec un hologramme, de reconstituer l'image à partir d'une petite partie de celle-ci. Cela permet de zoomer un graphique Lurawave, donc de l'agrandir sans que le graphique ne s'en enlaidisse tout de suite en affichant que des points.
• Protection par mot de passe: Les graphiques LuraWave peuvent être protégés par mot de passe de telle façon qu'une variante de moindre qualité de l'image puisse être consultée par le public, alors qu'une variante de haute qualité n'est affichable et susceptible d'être traitée que contre l'entrée d'un mot de passe.

Pour la création de graphiques Lurawave, le logiciel LuraWave est indispensable. Le logiciel existe sous forme de plugiciel pour des produit connus tels que Photoshop, Cumulus ou bien Paintshop Pro. Ces programmes peuvent alors sauvegarder des graphiques en tant que fichiers lwf. Il existe aussi un utilitaire séparé de Lurawave qui lit d'autres formats graphiques comme JPEG, BMP, TIFF etc... et qui peut ensuite les sauvegarder sous le format lwf. Les plugiciels pour les programmes professionnels et l'utilitaire séparé sont payants, une version limitée de l'utilitaire séparé est gratuite. De plus les plugiciels malheureusement indispensables au navigateur sont gratuits. Les informations sur les produits et les possibilités de téléchargement sont à consulter sur les pages Web de  LuraTech.

Le format LuraWave est donc une alternative intéressante sur le plan technique avant tout au format JPEG. L'inconvénient en est qu'il ne s'agit pas d'un standard ouvert, qu'il dépend d'un logiciel déterminé et qu'il n'est pas soutenu d'origine par les navigateurs mais seulement après l'installation du plugiciel.

Le format SVG

Les fichiers du format SVG ont l'extension habituelle de nom de ficher .svg ou svgz et le  type Mime image/svg+xml. . En HTML, les fichiers SVG peuvent être incorporés à l'aide de l'élément HTML embed ou object (voir  Incorporer des objets et  Incorporer du multimédia (Netscape traditionnel)).

SVG figure pour Scalable Vector Graphics. C'est le seul format graphique vectoriel parmi les formats présentés ici. À l'inverse des formats classiques de ce genre, qui en règle générale sont liés à des logiciels commerciaux, le format SVG est développé par le consortium W3 et exactement comme d'autres langages dont les normes y sont assurées, donc comme HTML, CSS, XML, et aussi PNG, il est indépendant de la plate-forme, documenté ouvertement et peut être utilisé librement. Vous trouverez des informations actuelles et la spécification SVG sur les pages du consortium W3 par la page d'accueil  Scalable Vector Graphics (SVG).

Les formats de graphiques vectoriels ne décrivent pas quelles proportions de couleurs possède un pixel de l'image, mais ils décrivent des objets. Il existe des objets comme des lignes droites ou courbées selon un algorithme, des surfaces rondes ou angulaires, du texte etc... Tous ces objets ont dans l'image une certaine position et certaines dimensions, couleurs et autres propriétés. Les surfaces peuvent être remplies uniformément, avec un dégradé ou avec un modèle bitmap, Des effets 3D et des filtres couleurs peuvent leur avoir été affectés. Les objets peuvent aussi être rassemblés en groupes d'objets. Dans le fichier figurent alors seulement les descriptions des objets. Le graphique à afficher est créé lors de l'exécution à partir des données descriptives.

Cette forme de graphique est idéale pour la toile en ce sens que les données de description d'objets graphiques vectoriels ont besoin en règle générale de beaucoup moins de place que des graphiques orientés pixels. Précisément pour des graphiques qui contiennent des symboles, des logo ou des cliparts, le format SVG serait une alternative intelligente au format GIF. Il est approprié de façon idéale à toutes sortes de graphiques techniques, aux graphiques d'illustrations et de dessin industriel. Le format SVG se distingue par les propriétés particulières suivantes:

• basé sur XML: SVG est un langage basé sur  XML. Le format put ainsi être validé à tout moment par rapport à une DTD, et ce qui est très important, - c'est un format en texte clair. Les contenus textes des graphiques SVG peuvent de ce fait servir de champ de recherche aux moteurs de recherche. De plus, il est possible sans aucun problème de créer des graphiques SVG de façon dynamique avec des scripts, que ce soit côté serveur avec des scripts  CGI, ou côté client avec un langage comme  JavaScript. À l'aide d'un modèle DOM (DOM) l'accès direct dynamique à chaque donnée descriptive d'un fichier SVG est même possible. SVG se prêtent merveilleusement bien pour cette raison aux graphiques interactifs pour lesquels un utilisateur entre des paramètres dans un fichier HTML à partir desquels le graphique est composé ou bien pour les graphiques en histogrammes (colonnes) ou en secteurs (camemberts) sur les statistiques serveur.
• Soutien XLink: XLink est un schéma pour la description de liens (Hyperlinks) en XML. Ce schéma est également applicable à SVG. Il est ainsi possible de créer des graphiques SVG composés de liens (cartes cliquables). Les cibles quelconques des liens peuvent être locales ou éloignées.
• Possibilités d'être agrandis ou basculés: Les graphiques vectoriels peuvent être agrandis sans perte de données. Ainsi des graphiques de petite taille peuvent-ils être agrandis sans problème pour des mal-voyants. De même peut-on appliquer une légère rotation sur ces graphique (basculer).
• Interface SMIL: SMIL est également un langage dont les normes sont fixées par le consortium W3. Il décrit des zones de temps pour des processus multimédia. Avec SMIL, il est possible de combiner des graphiques SVG dynamiques avec d'autres éléments comme le son.

Les versions plus récentes des logiciels de graphiques vectoriels connus soutiennent le format SVG, comme par exemple CorelDraw à partir de la version 10. D'autres, des produits commercialisés en tant que programmes partagiciels abordables comme le programme WebDraw du fabricant Jasc, duquel vient aussi le programme pixel populaire Paintshop Pro, aident également à la création de graphiques SVG. Théoriquement, un éditeur de texte quelconque suffit, il est vrai, aussi - comme pour tous les formats en texte clair de la famille XML. Celui qui est prêt à s'attaquer au langage SVG peut effectivement créer des graphiques SVG avec un éditeur de texte et un programme d'affichage SVG. Et il y a des programmes d'affichage SVG gratuits. Le plus connus est de Adobe. Le programme d'affichage Adobe peut aussi être installé comme plugiciel du navigateur. De cette façon des navigateurs comme Netscape ou l'Explorer Internet sont en mesure d'afficher des graphiques SVG sur la toile. Malheureusement le soutien d'origine de SVG par les navigateurs fait cependant encore défaut. Tout ce pour quoi l'utilisateur a besoin d'un plugiciel ne se développe qu'avec hésitation. Un soutien SVG incorporé au navigateur comme c'est le cas pour GIF et JPEG serait, pour cette raison, souhaitable d'urgence. Car le format SVG est vraisemblablement dans le domaine du graphique le développement le plus palpitant ayant lieu à l'heure actuelle est est approprié comme aucun autre à une multitude de sortes de graphiques statiques ou dynamiques sur le Web.

	Sortes de graphiques typiques sur les pages Web
	Polices à télécharger

SELFHTML/Aides à la navigation Graphisme

© 2001 Stefan Münz / © 2002 Traduction  Serge François, 13405@free.fr
 selfhtml@fr.selfhtml.org