Articles

Images et graphiques pour le web: Le format GIF

Un peu d'histoire

L'invention du LZW. L'histoire du format GIF commence en 1977-8, lorsque deux informaticiens israéliens (Jacob Ziv and Abraham Lempel) publient leurs travaux relatifs à un algorithme de compression sans perte. En 1983, grâce aux travaux de Terry Welch, l'implémentation de l'algorithme de Ziv et Lempel devient nettement plus rapide. Welch publie ses travaux tandis que son employeur (la société Sperry) dépose un brevet. Ainsi nait un nouveau procédé de compression non dégradante, appelé LZW en l'honneur de ses trois inventeurs. A la fin des années 1980, le procédé LZW devient pratiquement le standard de la compression non-dégradante (sans perte d'information). Il est utilisé aussi bien dans le logiciel (le célèbre ZIP) que dans le matériel (les modems).

Comme c'est très souvent le cas, deux autres chercheurs (Victor Miller and Mark Wegman, de la société IBM), travaillent en même temps sur le même sujet, mettent au point le même procédé, et déposent un brevet en 1983. L'office des brevets américain accorde les deux brevets (en décembre 1985 et en mars 1989 respectivement)... ce sont des choses qui arrivent.

En 1986, Sperry s'associe à Burroughs pour former la société Unisys, laquelle hérite des droits sur le brevet LZW.

La création du format GIF. La société Compuserve a été créée en 1969 comme service de time-sharing sur les gros ordinateurs, en dehors de leurs heures normales d'utilisation. En 1979, Compuserve offre le premier service de courrier électronique au monde. Le réseau Internet étant alors en gestation, Compuserve communique avec ses clients via les réseaux de transmission de données (PDN : Public Data Network). Un an plus tard, Compuserve crée le premier service de "chat". Puis la société développe son propre PDN, lequel s'étend à la fin des années 1980 aux principaux pays développés.

A cette époque, les modems transmettent les données à la vitesse de 1200 bps (2400 bps pour les meilleurs). Cette vitesse est considérée comme suffisante pour le texte, mais pas pour les images, à moins d'imaginer un format qui permette de réduire fortement leur taille. C'est ainsi que Bob Berry conçoit le format GIF chez Compuserve en 1987 (format GIF 87a), et qu'il le dote du mode de compression LZW. Il ne s'aperçoit pas que le procédé n'est pas libre de droits, bien que le brevet déposé par Sperry ait été publié en décembre 1985. Compuserve publie les spécifications du nouveau format d'image, et le déclare libre de droits. Sur les PDN d'abord, puis sur Internet ensuite, le format GIF connait alors un succès rapide. En 1989, une nouvelle spécification publiée par Compuserve crée l'image GIF animée (format GIF89a).

Une mauvaise surprise. En 1993, la société Unisys découvre que le format GIF utilise le procédé LZW et entamme des discussions avec Compuserve. Fin décembre 1994, Compuserve signe un accord de licence. Unisys prévient alors (via un communiqué de presse) tous les concepteurs de logiciel utilisant le procédé LZW, qu'ils doivent faire de même.

Pour les éditeurs de logiciel, ce n'est qu'une mauvaise surprise, une dépense de plus à assumer. Pour tous ceux qui créent du logiciel libre, c'est un drame, car n'ayant pas de revenu, ils ne peuvent s'offrir la licence. A leur égard, Unisys durcit progessivement le ton, si bien qu'en 1999 est lancée la campagne "Burn all your gifs". Les concepteurs de site sont invités à remplacer leurs images au format GIF par des images au format PNG. Cette campagne a un effet très limité.

Aujourd'hui (écrit fin 2003), cette affaire appartient presque au passé. Le brevet américain d'Unisys a expiré, et ses extensions dans les pays étranges expirent à leur tour au milieu de l'année 2004. On notera que, contrairement à Unisys, la société IBM, également titulaire d'un brevet sur le procédé LZW, n'a jamais fait valoir ses droits.

Les base du format GIF

Les bonnes performances du format GIF proviennent :

• de la limitation du nombre de couleurs de l'image à 256 au maximum. Ces couleurs constituent la palette de l'image, laquelle utilise le mode "couleurs indexées" ;
• de l'utilisation d'une technique de compression (LZW) bien adaptée au dessin au trait.

La palette. Pour définir la couleur de chaque pixel d'une image GIF par référence à sa palette, un octet suffit -- ce que l'on traduit en disant que la profondeur de couleur de l'image GIF vaut 8 bits. Rappelons qu'il faut trois octets (un pour chacune des trois composantes R, V, B) pour définir la couleur d'un pixel dans les formats qui utilisent le mode "vraies couleurs". Avant compression, la description d'une image GIF prend donc trois fois moins de place que celle d'une image en vraies couleurs. En contrepartie, on peut choisir parmi 16 millions de couleurs (au lieu de 256) pour colorer chaque pixel d'une image en vraies couleurs. Un dessin au trait peut souvent se contenter de 256 couleurs ou même moins, alors qu'une bonne photographie ne le peut généralement pas. C'est la première raison pour laquelle le format GIF est bien adapté à la numérisation des dessins au trait, et non à celle des photos.

La compression. Le format GIF utilise la méthode de compression LZW, qui consiste à analyser l'image ligne par ligne à la recherche de motifs répétitifs, et à les mettre en bibliothèque pour les réutiliser le plus possible. Ce mode de compression est d'autant plus efficace que la structure de l'image est plus simple. Le fait que l'image soit un dessin au trait d'une part, et que le nombre de ses couleurs soit limité à 256 au maximum d'autre part, contribuent à cette simplicité. Ceci constitue la seconde raison pour laquelle le format GIF est bien adapté à la numérisation des dessins au trait, et pas à celle des photos.

Les logiciels de dessin (ex : Photoshop) permettent de visualiser la palette d'une image GIF. A titre d'exemple, nous avons représenté ci-dessous la palette (64 couleurs / Photoshop v.5) correspondant à l'un des boutons de navigation qui figurent en haut de cette page. Dans cette palette on retrouve les bleus foncés de la flèche, les teintes orange du bouton lui-même, et les gris des ombrages qui donnent l'illusion du relief.

L'image...	... et sa palette de couleurs

La transparence et l'entrelacement

La transparence. L'une des couleurs de la palette peut être déclarée transparente, ou seulement une zone possédant cette couleur. Si on déclare transparent le fond d'une image GIF, on donne l'impression que l'image a été découpée en suivant le bord de la partie non-transparente. En fait, cette façon de procéder risque de créer des défauts d'affichage (le halo et le crénelage), si bien qu'on doit la réserver au cas où le fond de la page web n'est pas uniforme.

Le texte "CERIG" en police fantaisie (figures ci-dessous) a été dessiné (sur calque) dans Photoshop. Les images 1 et 2 correspondent au cas où le fond était blanc avant qu'on ne le déclare transparent. L'image s'intègre parfaitement au fond blanc de la présente page web (image n°1), mais mal sur un fond marron (image n°2) ; les pixels résultant du lissage sur fond blanc créent un halo de couleur blanchâtre sur le fond marron. Simultanément, la disparition du lissage fait apparaître du crénelage (aliasing).

Les images 3 et 4 correspondent au cas où le fond était marron avant qu'on ne le déclare transparent. L'image s'intègre parfaitement au fond marron (image n°4), mais mal sur le fond blanc de la page (image n°3) ; les pixels résultant du lissage sur fond marron créent un halo de couleur marron sur le fond blanc. Comme précédemment, la disparition du lissage fait apparaître du crénelage.

1 - Ni halo ni crénelage sur fond blanc	2 - Halo blanchâtre et crénelage sur fond marron
3 - Halo marron et crénelage sur fond blanc	4 - Ni halo ni crénelage sur fond marron

La bonne façon de procéder (en cas de fond de page uniforme) consiste à doter l'image d'un fond de la même couleur que celle de la page à laquelle elle est destinée. De plus, il faut soigneusement conserver l'image originale en format natif. Cela permet de changer facilement la couleur de fond, et de recréer rapidement une image (GIF, JPEG ou PNG) pour l'insérer dans une page dont la couleur de fond est différente, sans générer halo et crénelage.

La transparence, en fait, est rarement utile. Dans le cas où le fond de page possède une couleur uniforme, la transparence ne sert à rien ; il suffit de doter l'image d'un fond de la même couleur. Lorsque le fond de page n'est pas uniforme, le halo est presque inévitable sur certaines parties de l'image ; ce n'est donc pas une bonne idée que d'installer des images sur un fond de page déjà décoré (trop, c'est trop). De plus, lorsque l'image est accompagnée de texte, utiliser un fond de page non uniforme constitue une grave erreur, car la lecture du texte est rendue nettement plus difficile. Or c'est le texte qui contient le message que vous voulez transmettre aux internautes, et non le fond de page, que diable !

L'entrelacement. L'image GIF peut s'afficher de manière progressive (image gif entrelacée). Elle est alors partagée en quatre sous-images, qui sont transmises et affichées l'une après l'autre. Si la transmission est lente, et / ou si l'image est lourde, l'internaute peut décider -- au vu de ce qui est déjà affiché -- de patienter ou non pour avoir l'image finale. Pour ceux que la technique intéresse, voici comment cela fonctionne :

• la première sous-image contient une ligne sur huit en partant de la première. Après affichage, 12,5 % de l'image est visible (une ligne sur huit) ;
• la seconde sous-image contient une ligne sur huit en partant de la cinquième. Après affichage, 25 % de l'image est visible (une ligne sur quatre) ;
• la troisième sous-image contient une ligne sur quatre en partant de la troisième. Après affichage, 50 % de l'image est visible (une ligne sur deux) ;
• la quatrième sous-image contient une ligne sur deux en partant de la seconde. Après affichage, l'image est complète.

L'optimisation de l'image GIF

Le poids d'une image GIF dépend en fait de trois facteurs principaux :

• le nombre de couleurs de la palette (de 1 à 256) ;
• la manière dont les couleurs de la palette sont échantillonnées par le logiciel, et éventuellement modifiées par l'opérateur ;
• le logiciel de dessin utilisé.

Le nombre de couleurs. Quand on réduit le nombre de couleurs d'une image GIF, sa palette prend moins de place, et la compression LZW devient plus efficace. Ces deux facteurs contribuent à rendre le fichier plus léger, mais la diminution du nombre de couleurs dégrade l'image. L'optimisation d'une image GIF consiste donc à réaliser un compromis entre l'aspect de l'image et le poids de son fichier, en jouant principalement sur le nombre de couleurs.

Le fait de réduire le nombre de couleurs d'une image constitue une perte d'information. Il n'est donc généralement pas correct de dire que le format GIF est non dégradant, même si la technique de compression utilisée (LZW) ne perd pas d'information.

La sélection des couleurs. Les logiciels de dessin proposent en général plusieurs options à l'opérateur. Ainsi, dans Photoshop (v.7), on peut choisir :

• Perception : le logiciel sélectionne les couleurs en donnant la priorité à celles auxquelles l'œil est le plus sensible ;
• Sélective : le logiciel fonctionne comme ci-dessus, mais privilégie les zones étendues de couleur et conserve les couleurs web présentes dans l’image ;
• Adaptative : le logiciel retient en priorité les couleurs les plus utilisées dans l'image. Cette option est probablement la plus recommandable ;
• Web : le logiciel se limite aux 216 "couleurs web" (les couleurs du cube de Netscape). Cette option n'est plus utilisée aujourd'hui, parce que pratiquement tous les internautes utilisent un affichage comportant plus de 256 couleurs ;
• Personnalisée : l'opérateur conçoit sa propre palette.

Les trois premières options conduisent à des résultats très voisins, qu'il s'agisse du poids de l'image ou de son aspect.

Le rôle du logiciel. Tous les logiciels de dessin matriciel, et toutes les versions d'un même logiciel, ne fonctionnent pas de la même façon ; ils ne fournissent donc pas des images de même poids. De plus, l'opérateur est amené à effectuer un compromis entre le poids et la qualité de l'image, ce qui implique un certain degré de subjectivité. Cet état de fait complique sérieusement les comparaisons entre logiciels et entre formats.

A titre d'exemple, nous avons représenté ci-dessous deux images GIF contenant le même nombre de couleurs (64), générées à partir d'une même image originale, à l'aide de deux versions distinctes (5 et 7) du même logiciel (Photoshop). Autant que l'on puisse en juger, elles sont de la même qualité, même si l'oeil décèle qu'elles ne sont pas absolument identiques. Et pourtant, leurs poids différent de 23 %, ce qui n'est pas négligeable.

Photoshop v.5 (977 octets)	Photoshop v.7 (749 octets)

L'examen attentif des images agrandies révèle les points suivants :

• bien que le nombre de couleurs soit le même (64), les deux images n'ont pas tout à fait la même palette ;
• la zone d'aplat (orange) a exactement la même couleur dans les deux images ;
• la transition entre la flèche et l'aplat orange est un peu plus régulière dans l'image de droite ;
• les ombres sont un peu plus claires dans l'image de droite - ce point peut provenir d'une modification du filtre réalisant l'effet d'estampage, et non de l'indexation des couleurs de l'image.

Il est donc clair que les éditeurs de logiciel de dessin matriciel, d'une version à la suivante, continuent à perfectionner leur produit, en particulier quant à la réduction du poids des images destinées au web.

L'image GIF animée

L'image GIF animée date de 1989 (format GIF89a). Elle est constituée d'une succession d'images qui se substituent les unes aux autres à une fréquence réglable. Elle a fait l'objet d'un fort engouement au milieu des années 90, mais son usage se restreint de plus en plus aux bannières publicitaires. Dans cette application, où le dessin au trait est prépondérant, l'image GIF animée est sérieusement concurrencée par l'image vectorielle Flash. Il semble que l'on tende vers une situation d'équilibre où les deux formats se partagent ce marché.

Il faut absolument éviter, tout au moins sur un site professionnel, d'installer des images animées hors des bandeaux publicitaires. L'internaute a beaucoup de mal à fixer son attention sur la lecture du texte si, dans son champ de vision secondaire, un objet bouge sans arrêt. Certes, le bouton "Arrêter" du navigateur fait cesser cette agitation (du moins lorsqu'il s'agit d'une image GIF et non d'une animation Flash), mais tous les internautes ne le savent pas. Faire en sorte qu'un petit chien traverse la page d'accueil en courant ne constitue pas une bonne idée pour promouvoir un site professionnel. Par contre, sur un site personnel, ou un site destiné à un public d'enfants, ou un site dédié aux images animées elles-mêmes, toutes les fantaisies sont permises.

Conclusion

Le format GIF présente des avantages importants :

• il est parfaitement stable (ses défauts de jeunesse appartiennent à un passé lointain). Des images GIF vieilles de huit années sont toujours visibles sans problème dans les navigateurs d'aujourd'hui ;
• il n'est pas sujet à des problèmes d'affichage, et il ne requiert aucun plug-in. Le concepteur de site, qui introduit dans une page web une image GIF de taille raisonnable, est pratiquement certain qu'elle sera vue par tous les internaute qui consulteront cette page ;
• les éditeurs de logiciel de dessin matriciel mettent à la disposition des utilisateurs des outils de plus en plus performants pour affiner le compromis entre qualité de l'image et poids du fichier ;
• le format GIF sera libre de droits dans le monde entier d'ici quelques mois (mi-2004).

Pour le dessin au trait, et dans le domaine de l'image fixe (beaucoup plus répandue que l'image animée), le format GIF a une position très forte sur le web. Pour l'instant, seul le format PNG lui fait un peu de concurrence.