Retrouvez cet article dans : Linux Pratique 32

Sur le web, on rencontre trois types de formats : GIF, JPEG et PNG. Les deux premiers, GIF et JPEG, sont correctement interprétés par tous les navigateurs, même les plus anciennes versions. Le format PNG quant à lui, est, comme vous le savez, un format libre, et n'est pas toujours bien interprété par les navigateurs courants. Ces formats ont un point commun : ce sont tous des formats orientés pixels. Le graphisme vectoriel, comme le format SVG, reste assez rare sur le web. Nous allons détailler ici ces différents formats...

Deux types d'images

Il existe deux types d'images bien distincts :

• image de type matriciel (communément appeléebitmap par analogie avec le format d'image du même nom créé par Microsoft), constituée de l'assemblage de petits carrés appelés pixels. Une couleur est attribuée à chacun de ces pixels.

• image de type vectoriel, définie par les coordonnées des objets, ou vecteurs, qui la composent (figures géométriques simples, segments, courbes de Bézier, etc.). Tous ces objets ont dans l'image une certaine position, certaines dimensions, couleurs et autres propriétés. L'image à afficher est créée à partir des données descriptives.

On distingue une image vectorielle d'une image bitmap du fait que la première ne perd pas en qualité lorsqu'on agrandit sa taille.
En HTML, toutes les images, quel que soit leur format, sont insérées dans la page à l'aide de la balise <img>.

Les images de type bitmap

Le format GIF

Utilisation : illustrations, boutons de navigations, icônes, logos et photos ne comportant pas beaucoup de couleurs.
Les images au format GIF ont pour extension .gif et pour type Mime image/gif. GIF, acronyme de Graphics Interchange Format, est un format qui se distingue par une haute compression, et ce, sans aucune perte de données. C'est pourquoi il s'est imposé rapidement dans le développement web.
Les avantages du format GIF :

• Le GIF peut être « entrelacé » (ou interlaced) ce qui signifie que l'image ainsi enregistrée n'est pas lue et construite ligne par ligne lors du chargement de la page web, mais couche par couche. Ainsi, la structure de base de l'image apparaît très vite à l'écran.
• Le format GIF offre également la possibilité d'enregistrer plusieurs images en une, ce qui permet de réaliser des animations (ce que l'on appelle « GIF animés »).
• Enfin, le format GIF permet d'utiliser la transparence : cela signifie qu'à l'affichage, les éléments placés sous l'image aux endroits où celle-ci est transparente, apparaissent à l'écran. Ce qui permet d'harmoniser la couleur de fond d'un site avec la couleur de fond d'une image.

Un inconvénient du format GIF est qu'il ne peut sauvegarder au maximum que 256 couleurs par fichier (encodage sous 8 bits, donc 28, soit 256 valeurs possibles pour représenter la couleur). Comme il ne peut y avoir que 256 couleurs (ou tons de gris), il est préférable de ne pas utiliser ce format pour des photographies.

Le format JPEG

Utilisation : idéal pour les photographies de qualité et autres images sur lesquelles on peut observer des dégradés de couleurs.
Les fichiers du format JPEG ont pour extension .jpg ou .jpeg et pour type Mime image/jpeg.

JPEG est l'acronyme de Joint Photographic Expert Group, nom de la société qui a développé le format. Par extension, JPEG est devenu le nom du format lui-même.
Le format JPEG propose, comme le format GIF, une forte compression mais peut sauvegarder quant à lui plusieurs milliers de couleurs. En revanche, il en résulte que JPEG comprime avec perte de données (plus le facteur de compression sera grand plus la qualité de l'image sera mauvaise). C'est ce que l'on appelle un format « destructeur ».
Pour le format JPEG, il est possible de fixer deux para-
mètres :

• La résolution DPI (Dots Per Inch) : nombre de points par pouce. Pour un affichage sur des pages web, une valeur entre 70 et 100 dpi suffit. Pour une impression, il vous faudra 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 impliquent concrètement que les bords des objets se dégradent. En général, ce sont les frontières entre deux couleurs bien distinctes (donc les coins et bords des objets) qui vont être affectées.

Tout comme le format GIF, JPEG peut être entrelacé pour un affichage progressif. En revanche, JPEG n'offre pas la transparence.

Le format PNG

Utilisation : même utilisation que pour le format GIF ; peut aussi être utilisé pour les photos, mais le fichier résultant sera beaucoup plus lourd qu'avec le format JPEG.
Les fichiers du format PNG ont pour extension .png et pour type Mime image/png. En HTML, les images PNG peuvent être insérées via la balise <img> mais aussi via les balises <embed> ou <object>. PNG, acronyme de Portable Network Graphic, est un format graphique libre, standard du W3C. Il a été conçu à l'origine pour proposer un équivalent libre au format GIF.
Les avantages du format PNG :

• Compression sans pertes : PNG comprime sans perte de données comme le format GIF. Cet algorithme a en revanche moins d'effet pour les photos et graphiques avec de nombreux dégradés de couleurs fins. Et JPEG compresse les photos sensiblement plus que PNG.
• Couleurs et transparence : PNG accepte 16,7 millions de couleurs comme le format JPEG. Il permet de sauvegarder une valeur supplémentaire par pixel, à savoir le canal alpha. La valeur alpha sauvegarde le degré de transparence du pixel.
• Fonction interlaced : PNG supporte lui aussi la construction du graphique par couche.
• Correction Gamma : le format PNG permet la sauvegarde de la valeur Gamma de l'image, correction nécessaire pour pallier les différences de rendu des images sur différents écrans et systèmes d'exploitation.
• Informations spécifiques : Le format PNG permet de sauvegarder le titre de l'image, l'auteur, la description, les droits, la date de création, le logiciel de création, etc.

En revanche, les images animées comme dans le format GIF ne sont pas possibles avec le format PNG. En outre, PNG n'est pas toujours complètement supporté par certains navigateurs (surtout au niveau de la transparence et de la correction gamma).

Les images de type vectoriel

Le format SVG

Utilisation : symboles, logos, icônes, images techniques, dessin industriel, images interactives.
Les fichiers du format SVG ont pour extension .svg ou .svgz et pour type Mime image/svg+xml. En HTML, les images SVG peuvent être insérées via les balises <embed> ou <object>. SVG, acronyme de Scalable Vector Graphics, est un format libre (contrairement au format .swf de Flash Macromedia), standard du W3C.
Comme précisé en introduction, 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. Or, ces données descriptives prennent en général beaucoup moins de place que dans le cas d'une image bitmap. Ce format est donc tout approprié pour le web.
Le principal avantage de SVG est qu'il est basé sur le langage XML. Il est très compressible, car c'est un format texte. SVG permet de plus les animations et la transparence. En outre, SVG propose le support Xlink, XLink étant un schéma pour la description de liens en XML. Il est ainsi possible de créer des images SVG composées de liens (par exemple, des cartes cliquables).
Les images vectorielles peuvent être agrandies sans perte de données. Ceci est particulièrement apprécié des malvoyants qui doivent agrandir au maximum l'affichage dans leur navigateur. De la même façon une légère rotation peut être appliquée sur ces images.
Les versions plus récentes des logiciels de graphiques vectoriels supportent le format SVG. Malheureusement, peu de navigateurs supportent par défaut ce format pour l'instant.

 Retrouvez cet article dans : Linux Pratique 32