Accueil Recherche | Plan Technique | Liens | Actualités | Formation | Emploi | Forums | Base
logo CERIG NOTE TECHNIQUE Cerig 
Vous êtes ici : Accueil > Technique > Internet et le web > L'optimisation des images pour le web           Révision : 06 décembre 2003
Note précédente Liste des notes     L'optimisation des images pour le web
(début)
    Page technique Note suivante
 
Jean-Claude Sohm (CERIG / EFPG)
(15 octobre 2003)
 

Si le débit d'Internet s'est bien amélioré, beaucoup d'internautes lui sont encore relié avec un modem 56K. Le concepteur de pages web doit donc faire attention au poids de ses images. Pour le format JPEG, la procédure est simple : au moment de l'enregistrement, on réalise un compromis entre poids du fichier et qualité de l'image résultante. Pour le format GIF, la démarche est plus subtile. Nous décrivons dans cette note les différentes mesures à prendre pour qu'une image GIF transmette son message graphique sans que son fichier ne soit trop lourd.

 

Préambule

"Un bon dessin vaut mieux qu'un long discours"
"A picture is worth one thousand words"

En savoir plus sur...

Né à l'époque où l'imprimé régnait en maître, cet adage s'applique aussi au web, où un texte sans images paraît bien austère. Au CERIG, nous n'avons pas toujours respecté l'adage (mea culpa !), mais nous avons une bonne (mauvaise) excuse : à l'époque de nos débuts, Internet était un petit tuyau très encombré, où les images passaient mal. Il n'était pas rare qu'un internaute navigue en décochant la case "Afficher les images" de son navigateur, afin d'aller un peu plus vite. Aujourd'hui, on compte en moyenne dans les pages web une image tous les mille mots... si cette donnée statistique est exacte.

La bande passante d'Internet est aujourd'hui nettement plus large, mais pas au point que l'on puisse faire n'importe quoi. Tout le monde n'a pas une liaison ADSL ou T1 à sa disposition. Le modem 56K (ainsi appelé parce que son débit descendant n'atteint jamais 56 Kbps) est encore très répandu. Il lui faut au moins 8 secondes pour décharger une image de 50 Ko et, si l'on n'y prend pas garde quand on crée une image, les 50 Ko sont vite atteints ou dépassés. Faire attention au poids des images (c'est à dire à la taille de leur fichier), sans aliéner le message graphique, reste donc une question à l'ordre du jour. Il faut optimiser les images destinées au web.

Pour une raison qui nous échappe, les pères fondateurs du web nous ont légué deux formats d'image matricielle -- GIF et JPEG -- mais aucun format d'image vectorielle. Le W3C a bien essayé récemment de combler cette lacune avec le format SVG, mais son initiative est tombée à plat, parce qu'elle est arrivé trop tard d'une part, et parce que le format SVG ne permet pas de faire des économies de poids d'autre part. Flash, de l'éditeur Macromedia, est un format vectoriel, mais -- sans que l'on en connaisse la raison -- il n'est pas utilisé pour réaliser des images fixes. Rappelons, pour l'exhaustivité, qu'il existe un troisième format matriciel -- PNG -- mais qu'il est très peu utilisé ; il suffit, pour s'en persuader, de regarder dans le cache de son navigateur après un surf débridé sur Internet. L'image GIF animée, enfin, est constituée d'images gif se succédant les unes aux autres pour créer l'impression de mouvement.
 

GIF ou JPEG ?

Comme chacun sait, le format GIF conduit à des fichiers de taille moindre pour les images qui seraient éligibles à un format vectoriel : dessin au trait, schéma, diagramme, logo, texte, etc. La présence d'aplats plaide en faveur du choix du format GIF. Le format JPEG, par contre, est préférable pour les photographies et les dégradés. Il est par contre déconseillé lorsque l'image comporte du texte, bien que les versions récentes de Photoshop permettent de palier ce phénomène.

Ceci dit, il existe des cas où ces règles bien connues sont prises en défaut, si bien qu'il faut les manipuler avec prudence, comme le montre l'exemple ci-dessous. Pour des qualités similaires, les trois formats conduisent à des images de poids voisins, l'image GIF se révélant néanmoins plus légère que les deux autres. Pourtant, l'image représente un dégradé... Et le format PNG, dont on dit tant de bien, ne fait pas d'étincelles (l'image PNG n'est pas visible dans les navigateurs un peu anciens). En fait, ce que les discours usuels oublient de dire, c'est que la taille de l'image intervient. Plus l'image est petite, plus le format GIF devient intéressant.

Dégradé de couleur (gif)   Dégradé de couleur (jpeg)   Dégradé de couleur (png)
4059 octets
64 couleurs
5638 octets
qualité faible (1)
5466 octets
filtrage supérieur
GIF JPEG PNG

Pour restreindre le poids d'une image au format JPEG, nous disposons de deux moyens :

    diminuer la taille de l'image, opération que les photographies supportent assez bien ;
  augmenter le taux de compression, en essayant d'optimiser le rapport qualité/poids de l'image.

Restreindre le poids d'une image au format GIF est une opération plus subtile. La démarche commence dès la création de l'image, et se poursuit durant toute sa réalisation, comme nous entendons le montrer dans cette note.
 

Le lissage

Les couleurs d'une image au format GIF constituent sa palette (en anglais : Color LookUp Table, CLUT), et leur nombre est limité à 256. Les informations qui constituent l'image sont stockées sous forme compressée selon le procédé LZW (du nom des inventeurs : Lempel, Ziv et Welch). Ces options techniques résultent de la nécessité de réduire le poids des images à transmettre via un réseau. On notera que la compression LZW est d'autant plus efficace que l'image est plus simple, que sa taille est plus faible, et que le nombre de couleurs de sa palette est moins élevé.

Un dilemme naît immédiatement, comme le montrent les figures GIF ci-dessous, qui représentent toutes deux un cercle noir de 28 pixels de diamètre. Pour obtenir une image de belle qualité, il faut utiliser la technique du lissage (image de gauche), appelée anti-aliasing en anglais. Mais cette technique augmente le nombre de couleurs, ce qui accroît le poids de l'image. Pour obtenir une image plus légère, il ne faut pas lisser (image de droite). Mais l'absence de lissage fait apparaître du crénelage, ce qui enlaidit l'image. Lorsqu'on crée une image GIF pour le web, il faut réaliser un compromis entre le poids de l'image et la qualité de son aspect. En d'autres termes, il faut optimiser l'image.

 
Cercle lissé
16 couleurs
232 octets
Cercle non lissé
2 couleurs
104 octets

Pour rappeler ce qu'est la technique du lissage, nous avons représenté ci-dessous un quart de chacun des deux cercles précédents, en l'agrandissant 16 fois. Le lissage consiste à créer des pixels de teinte intermédiaire (grise) entre le fond (blanc) et le cercle (noir). La taille d'un pixel (environ 1/3 de mm) étant inférieure au pouvoir séparateur de l'oeil, ce dernier perçoit le cercle comme parfaitement rond, au prix d'une légère impression de flou.

Cercle lissé Cercle non lissé

Ceci dit, le lissage ne fait pas de miracles. Les droites peu inclinées sur l'horizontale ou la verticale sont très laides, surtout si elles sont fines, comme le montre la figure suivante. Dans cette figure, les droites rouges sont lissées, les droites bleues ne le sont pas ; l'épaisseur des droites varie de 1 à 4 pixels. Comme on peut le constater, mieux vaut éviter de tracer des droites qui soient à la fois fines et peu inclinées. Mais si on ne peut éviter de le faire, mieux vaut quand même les lisser, leur donner (si possible) une largeur de plusieurs pixels, et utiliser une couleur qui ne tranche pas trop avec le fond.


 

Le lissage intempestif

La première mesure à prendre pour diminuer l'augmentation de poids consécutive au lissage consiste à éviter de lisser ce qui n'a pas besoin de l'être, c'est à dire les contours horizontaux et verticaux, ainsi que le texte. Le lissage involontaire, souvent intempestif, peut résulter de causes multiples :

    l'utilisation inappropriée d'un logiciel de dessin ;
  la numérisation d'une image imprimée ;
  le redimensionnement de l'image ;
  la rotation de l'image ou de certains de ses éléments, etc.

Une mauvaise utilisation du logiciel. Les deux figures GIF ci-dessous représentent un carré de 24x24 pixels de dimensions extérieures, limité par un trait de 3 pixels d'épaisseur. Le carré de gauche a été tracé dans Photoshop en cochant l'option "Lissé" de l'outil trait, et sans forcer le parallélisme aux axes (touche shift non enfoncée) -- bref, en travaillant comme un cochon. Le carré de droite a été tracé avec les options inverses.

26 couleurs
287 octets
2 couleurs
111 octets
(Photoshop)

Agrandies 6 fois, ces deux images se présentent ainsi :

carré lissé par négligence carré non lissé
(Photoshop)

Un lissage superflu est encore plus facile à créer dans Illustrator que dans Photoshop, comme le montrent les deux images ci-dessous. Elles représentent un carré de 28x28 pixels de dimensions extérieures, limité par un trait de 3 pixels d'épaisseur. Pour créer l'image de droite, nous avons pris soin d'activer le magnétisme de la grille, et d'aligner les contours sur cette dernière. La fonction "Enregistrer pour le Web..." fournit alors une image non lissée. Sans ces précautions, nous obtenons l'image de gauche, inutilement lissée, et donc de poids plus élevé.

 
12 couleurs
192 octets
2 couleurs
116 octets
(Illustrator)

Agrandies 6 fois, ces deux images se présentent ainsi :

carré lissé par inadvertance carré non lissé
(Illustrator)

La numérisation. L'image de départ est un carré de 24 pixels de côté extérieur, limité par un trait de 3 pixels d'épaisseur. Elle est imprimée (sur une imprimante à jet d'encre), puis numérisée avec trois options successives. L'option "bitmap" correspond à une image en noir et blanc ; le lissage ne peut pas exister, mais l'image initiale est déformée. L'option "aplat" correspond à une numérisation en 256 couleurs au maximum. L'option "vraies couleurs" correspond à une numérisation en 16 millions de couleurs.

Les résultats de ces trois numérisations sont représentés ci-dessous ; ils ne sont pas brillants ! C'est un peu notre faute, parce que nous avons choisi d'emblée la résolution du web (72 dpi). Mais quoique nous fassions, pour obtenir une image finale de bonne qualité, il faut souvent redessiner l'image, en se servant du résultat de la numérisation comme modèle.

 
2 couleurs
111 octets
2 couleurs
115 octets
11 couleurs
216 octets
233 couleurs
1318 octets
Image initiale Option "bitmap" Option"aplat" "Vraies couleurs"

Les trois numérisations sont représentées ci-dessous, agrandies 4 fois de façon à faire apparaître leurs défauts.

2 couleurs
115 octets
11 couleurs
216 octets
233 couleurs
1318 octets
"Bitmap" "Aplat" "Vraies couleurs"

D'une manière générale, la numérisation en "vraies couleurs" fournit des images qui s'apparentent beaucoup à des photographies, quelle que soit la nature de l'image scannée. Contribuent à cet effet : les défauts du papier, le tramage (impression offset), les défauts du numériseur, etc. Une image scannée doit donc être retravaillée dans Photoshop, avant d'être enregistrée pour le web. On peut utiliser la fonctionnalité "Image > Réglages > Niveaux automatiques". Pour être maître du résultat, on utilise plutôt "Images > Réglages > Niveaux..." ; on se sert de la flèche blanche pour éclaircir le fond, et de la flèche noire pour améliorer les noirs.

Une autre façon de procéder consiste à réduire drastiquement le nombre de couleurs avant d'enregistrer au format GIF. Le manque de couleurs force le système à recréer des aplats et à simplifier l'image. Cette technique élémentaire peut fournir des résultats inespérés.

Le redimensionnement. Réduire la taille d'une image matricielle a pour effet de perdre de l'information. Augmenter sa taille conduit à créer de l'information qui n'existait pas. Dans les deux cas, l'opération est irréversible. Effectuée sur une image matricielle éligible au format vectoriel, elle a un double effet :

    elle nuit à la qualité de l'image,
  elle introduit du lissage inutile.

Appliquée à un dessin au trait, la réduction de taille rend rapidement l'image floue (extrapolation bicubique), et même illisible si l'on utilise la méthode d'extrapolation "au plus proche" (figures ci-dessous).

Original       Image éch.1/2 (bicubique)       Image éch.1/4 (bicubique)       Image éch.1/2 (au plus proche)       Image éch.1/4 (au plus proche)
échelle 1 échelle 1/2 échelle 1/4 échelle 1/2 échelle 1/4
original "bicubique" "bicubique" "au plus proche" id.

Agrandir l'image a des effets moins dramatiques, mais introduit généralement du lissage superflu. Trois options sont disponibles dans Photoshop pour le rééchantillonage ("Au plus proche", "Bilinéaire" et "Bicubique"), qui correspondent à trois méthodes différentes d'extrapolation. Les images ci-dessous montrent le résultat obtenu pour un agrandissement d'un facteur 4.

2 couleurs
111 octets
2 couleurs
483 octets
24 couleurs
1001 octets
54 couleurs
1218 octets
image initiale "Au plus proche" "Bilinéaire" "Bicubique"

Les rotations. L'image de départ est de nouveau un carré de 24 pixels de côté extérieur, limité par un trait de 3 pixels d'épaisseur. L'image est très légère, et une rotation de 90 degrés ne l'altère pas. Deux rotations successives de 45 degrés, par contre, ont un effet désastreux, comme le montrent les images ci-dessous.

2 couleurs
111 octets
2 couleurs
111 octets
137 couleurs
1231 octets
Image initiale Après rotation
de 90 degrés
Après 2 rotations
de 45 degrés

La figure ci-dessous représente, agrandie huit fois, l'image ayant subi les deux rotations de 45 degrés. Sans commentaire !

Effet de deux rotations successives (45°)

Vers la suite de la note...

Note précédente Liste des notes Page technique  Note suivante 
 
Accueil | Technique | Liens | Actualités | Formation | Emploi | Forums | Base
 
Copyright © Cerig/Grenoble INP-Pagora
Mise en page : J.C. Sohm