Accueil Recherche | Plan Technique | Liens | Actualités | Formation | Emploi | Forums | Base
dossier cerig.efpg.inpg.fr 
Vous êtes ici : Accueil > La technique > Internet et le web > Images et graphiques pour le web > Stratégie de création des images           Révision : 23 mars 2005
Page précédente Images et graphiques pour le web Page suivante
Page précédente   Page suivante  
Jean-Claude SOHM - CERIG / EFPG
(07 janvier 2004)

IX- Stratégie de création des images
(dessin au trait)

IX-1- Introduction

Les images fixes qui sont mises en ligne sur le web ont deux sources : soit elles sont la reproduction de l'existant (via la photographie ou la numérisation), soit elles sont créées de toutes pièces à l'aide d'un logiciel de dessin. Examinons ces trois cas, dans l'optique du dessin au trait.

1 - Reproduction de l'existant par photographie

Ce cas correspond à l'image en tons continus, et le format JPEG est généralement celui qui conduit aux fichiers les plus légers. Il existe cependant deux exceptions notables, qui sont :

2 - Reproduction de l'existant par numérisation

On peut numériser les deux types d'image -- au trait ou en tons continus -- et les logiciels de numérisation reconnaissent souvent de manière automatique à quel type ils ont affaire. Cependant, l'opérateur reste maître de la manière dont doit être numérisée l'image. Ainsi, un dessin au trait peut être numérisé comme tel, ou comme une image en tons continus. Une image originale en tons continus, par contre, sera pratiquement toujours numérisée comme telle.

3 - Création par logiciel

La création d'une image par des moyens informatiques conduit généralement à un dessin au trait ou à une image hybride (c'est à dire intermédiaire entre l'image en tons continus et le dessin au trait). L'image est issue d'un logiciel possédant une fonction de dessin, et il en existe beaucoup sur le marché. Le choix du logiciel, et la manière dont on s'en sert, ont une influence profonde sur la qualité et le poids final de l'image. Pour mettre en ligne cette dernière, les formats GIF et PNG entrent en compétition, le second s'avérant particulièrement adapté au cas des images hybrides. Enfin, si l'on veut transmettre à l'internaute une image vectorielle plutôt que matricielle, le format SWF (Flash) représente la meilleure solution.

Le cas du dessin au trait est donc nettement plus complexe que celui de l'image en tons continus. Pour obtenir un bon résultat à un coût acceptable, il faut concevoir une stratégie efficace. Et cette dernière ne se résume pas au simple choix GIF / JPEG, tarte à la crème des tutoriels traitant de la conception des images pour le web.

Le présent chapitre traite du cas où l'image s'apparente à un dessin au trait. Le cas de l'image en tons continus et celui de l'image hybride seront traités au chapitre suivant.

Dans ce qui suit, nous examinerons trois exemples :

 

IX-2- L'image issue d'un tableur

1 - La genèse de l'image

Pour illustrer le choix d'une stratégie, nous avons choisi l'exemple d'un graphique représentant l'audience de notre site Web (mesurée par la méthode des marqueurs, et exprimée en nombre de pages vues par jour) pendant 12 semaines de l'automne 2003. Les données sont d'abord extraites d'une base de données Access à l'aide de requêtes appropriées, puis exportées vers le tableur Excel pour tracer le graphique correspondant et le mettre en forme (parce que la fonction de dessin d'Access ne vaut pas la corde pour la pendre). A partir de là, plusieurs voies peuvent être suivies.

Les logiciels qui permettent de créer des graphes ont généralement une fonction d'enregistrement pour le Web. Dans Excel, il s'agit de "Fichier > Enregistrer en tant que page Web...". Le résultat, qui est constitué d'une page HTML et d'un dossier associé, réserve quelques surprises.

La page Web elle-même est bonne à jeter à la poubelle. Aucun webmestre sensé ne mettra jamais sur le Web une page contenant 39,2 Ko de code parfaitement inutile (xml, javascript, cadres...). Dans le dossier associé, par contre, se trouve l'image GIF qui est représentée ci-dessous.

Audience du CERIG,automne 2003
Image GIF (5244 octets) créée dans Excel

Cette image possède une qualité : elle est relativement légère pour sa complexité, parce qu'aucun de ses éléments n'est lissé, et que de ce fait elle n'utilise que quatre couleurs (blanc, noir, bleu et cyan). Mais elle possède le défaut de sa qualité : les segments qui joignent les points ne sont pas beaux à voir (crénelage), parce qu'ils ne sont pas lissés -- et que l'on demande ou non leur lissage dans Excel n'y change rien. De plus, si on examine l'image de près, on s'aperçoit que l'équidistance des points (un par jour) est très approximative. Le problème naît lors de la création de l'image : il n'est pas possible de préciser la largeur du cadre de telle sorte qu'elle soit divisible par 84 (12 semaines, soit 84 jours). Mais pour une image obtenue assez facilement, on ne peut pas être trop difficile.

Si l'on introduit l'image dans Photoshop CS ou dans Fireworks MX, et si on enregistre au format PNG-8, on a une heureuse surprise : la taille de l'image diminue de plus de 50 %. C'est Fireworks qui fournit le meilleur résultat (image ci-dessous).

Audience du CERIG, automne 2003
Image PNG (2183 octets) créée dans Fireworks MX

2 - Le mieux est-il l'ennemi du bien ?

Les logiciels de dessin communiquent peu ou prou avec les tableurs, ce qui donne envie de voir ce que l'on obtient en exportant l'image obtenue dans Excel.

Impossible de transférer directement l'image Excel dans Fireworks. Pas de problème, par contre, avec Illustrator parce que le copier-coller fonctionne. Mais une grosse surprise : tous les éléments de l'image sont lissés sans exception, si bien que l'image contient 84 couleurs distinctes. En utilisant la fonction "Enregistrer pour le Web...", et en ne conservant que 16 couleurs, on obtient l'image GIF représentée ci-dessous. Bien que plus petite que les précédentes (le logiciel ne nous a pas demandé notre avis), l'image pèse plus lourd. En enregistrant l'image Illustrator dans un format matriciel non dégradant, et en la transportant dans Fireworks, on peut obtenir une image PNG-8 de 4 Ko environ.

Conclusion de toute cette affaire : il ne faut pas passer par Illustrator quand on dessine pour le Web dans Excel.

Audience du CERIG, automne 2003
Image GIF (6286 octets) créée dans Illustrator 9

Pas de problème pour copier-coller l'image Excel dans Photoshop CS. L'image n'est pas lissée, mais elle est quelque peu déformée. En utilisant la fonction "Enregistrer pour le web...", on obtient une image GIF pesant plus lourd que celle fournie directement par Excel. Inutile donc de passer par Photoshop quand on dessine pour le Web dans Excel.

Toujours pas de problème pour copier-coller l'image Excel dans Flash MX. Après avoir réduit les dimensions de la scène à celles du document, on enregistre au format SWF, et la surprise n'est pas mauvaise, comme on peut le constater ci-dessous. Pour moins de 4 Ko, on peut mettre à la disposition de l'internaute une image vectorielle qu'il peut redimensionner à sa guise, et imprimer en format pleine page (via Flash Player et non via IE). Vive Flash, tout de même !

Image SWF (3878 octets) créée par Flash MX

3 - Une meilleure image ?

Oui mais... nous aimerions bien disposer d'une image qui soit un peu plus élégante que l'image GIF que nous fournit Excel, sans être trop lourde pour autant. Pour ce faire, il nous faut ouvrir dans Photoshop (ou dans tout autre logiciel de dessin matriciel) l'image GIF créée dans Excel, retrousser nos manches et nous mettre au travail. Une heure et demi plus tard, nous obtenons le résultat représenté ci-dessous.

Audience du CERIG, automne 2003
Image PNG (9507 octets) créée dans Photoshop et enregistrée dans Fireworks MX

Il est clair que, en poids de fichier comme en temps passé, l'esthétique se paye cher -- d'autant plus qu'en redessinant l'image, nous l'avons un peu agrandie, ce qui n'arrange pas les choses.

Pour obtenir un lissage correct des segments de droite joignant les points, nous avons dû consentir à ce que le nombre de couleurs de l'image passe de 4 à 16. De plus, comme de nombreux segments sont peu inclinés sur l'axe des ordonnées, et donc difficiles à lisser proprement, nous avons choisi de les tracer dans une couleur (cyan moyen) en contraste modéré avec le fond blanc.

 

IX-3- L'image numérisée

Comme nous l'avons signalé dans l'introduction, une image au trait peut être numérisée comme telle, ou comme une image en tons continus. La première méthode est préférable, comme le montre l'exemple traité ci-dessous.

L'image originale est constituée de lettres noires sur fond blanc, et ses dimensions valent 17,07 x 3,61 cm. Numérisée à la résolution de 300 dpi, elle mesure 2016 x 426 pixels. Pour vous la présenter, nous réduisons sa résolution à la valeur traditionnelle de 72 dpi ; l'image mesure alors 484 x 102 pixels. Si la résolution de votre système est égale à 72 dpi, l'image que vous observez mesure effectivement 17 cm de large et 3,6 cm de haut. En pratique, si vous utilisez un PC récent dans des conditions courantes, la résolution de votre système est plus proche de 96 dpi que de 72. L'image que vous obtenez est alors plus petite.

1 - Numérisation en tant qu'image en tons continus

Comme il s'agit d'une image en N&B, nous numérisons en niveaux de gris. Dans Photoshop CS, nous vérifions que le mode de l'image correspond bien à "niveaux de gris", puis nous réduisons la résolution à 72 dpi. Enregistrée en 16 couleurs (blanc, noir et 14 nuances de gris) et au format PNG, l'image pèse 16,4 Ko. Elle est représentée ci-dessous.

Image numérisée et réduite en niveau de gris
Image numérisée en niveaux de gris et affichée telle quelle

Évidemment, 16 Ko pour une image aussi simple constitue un vrai scandale ! Tout le mal provient du fait que le fond n'est pas uniforme -- ce qui correspond effectivement à la réalité, même si le fond de l'image originale est moins gris qu'il n'y parait ci-dessus. Cette non-uniformité du fond n'apportant aucune information intéressante, il convient de l'éliminer pour faire décroître le poids de l'image.

D'un grand coup de baguette magique (tolérance 20) et de pot de peinture, nous rendons le fond blanc comme neige (255/255/255). Enregistrée en 16 couleurs, au format PNG et à la résolution de 72 dpi, l'image pèse 3,75 Ko. Elle est représentée ci-dessous.

Image numérisée en niveaux de gris - uniformisation du fond avant réduction
Image numérisée en niveaux de gris
(le nettoyage du fond est effectué avant la réduction de la résolution)

Certes, l'image ne pèse pas lourd, mais le scandale réside cette fois dans sa mauvaise qualité, due au fait que le lissage des lettres a quasiment disparu. Si nous prenons la précaution de réduire la résolution à 72 dpi avant de nettoyer le fond, nous obtenons finalement une image PNG toujours légère (3,68 Ko), mais de meilleure qualité, comme on peut le constater ci-dessous.

Image numérisée en niveaux de gris - uniformisation du fond après réduction
Image numérisée en bitmap
(le nettoyage du fond est effectué après la réduction de la résolution)

2 - Numérisation en mode bitmap

Cette fois, nous numérisons l'image en mode "bitmap", c'est à dire que le fichier correspondant ne contient que des pixels blancs et des pixels noirs. La résolution étant ramenée à 72 dpi, l'image enregistrée au format PNG ne pèse que 1,14 Ko (elle ne contient que deux couleurs, le blanc et le noir). Par la force des choses, son fond est uniformément blanc. Mais comme le texte n'est pas lissé, son aspect est rébarbatif, comme on peut le constater ci-dessous.

Image numérisée puir réduite en bitmap
Image numérisée en bitmap
(la résolution est réduite dans ce mode)

La bonne façon de procéder consiste à fixer, dans Photoshop, le mode de l'image à "niveaux de gris" avant de réduire la résolution à 72 dpi. Cela permet au logiciel de procéder lui-même à un lissage lors de la réduction du nombre de pixels de l'image. Au format PNG et en 16 couleurs, l'image ne pèse que 3,44 Ko. Sa qualité est bonne, comme on peut le constater ci-dessous.

Image numérisée en bitmap, puis réduite en niveaux de gris
Image numérisée en bitmap
(la résolution est réduite en mode niveaux de gris)

3 - La procédure recommandée

La conclusion de ces essais est facile à tirer. Pour numériser un dessin au trait, la meilleure procédure consiste à :

On obtient ainsi une image bien lissée sur un fond parfaitement uniforme.

Cette procédure permet de réduire la taille des images -- le résultat obtenu dépend de la largeur des traits du dessin original. Si nécessaire, on peut redonner de la netteté à l'image, après réduction de sa taille, en utilisant la fonction "Filtre --> Renforcement --> Accentuation..." de Photoshop, comme pour une photographie. C'est ainsi qu'a été traitée l'image suivante (gain : 50 %, rayon : 1 px, seuil : 0), après réduction de la moitié de sa taille. Le résultat obtenu est représenté ci-dessous.

Image numérisée en bitmap, puis réduite et accentuée en niveaux de gris
Image numérisée en bitmap
(la taille est réduite de moitié en mode niveaux de gris)

Bien entendu, il n'y a pas de miracle : réduire la taille d'un facteur 4 constitue une limite (accentuation : 200 % - 2,5 px - 0), comme le montre l'image ci-dessous. Le texte est encore lisible, mais la qualité de l'image est dégradée.

Image numérisée en bitmap, fortement réduite et accentuée en niveaux de gris
Image numérisée en bitmap
(la taille est réduite au quart en mode niveaux de gris)

IX-4- L'image créée par logiciel

N'importe quel graphiste qui se respecte vous dira que l'auteur de ces lignes mérite un zéro pointé. Il professe en effet que, pour créer de toutes pièces un dessin au trait pour le Web, il faut utiliser un logiciel de dessin matriciel, et non vectoriel. Ceci dans le but d'éviter les lissages intempestifs, qui présentent le double inconvénient de peser lourd et de dégrader l'aspect. Le désavantage de cette méthode réside dans le fait qu'il faut se fixer dès le départ la taille de l'image à obtenir, et ne pas chercher à en changer par la suite, pour ne pas dégrader les tracés non lissés.

Contrairement à ce que l'on pourrait penser, tracer des contours, leur donner la couleur et l'épaisseur voulues, puis colorer l'intérieur, n'est guère plus difficile dans Photoshop que dans Illustrator. Ainsi, l'ellipse ci-dessous a été créée à l'aide de quatre calques : un pour le fond (blanc), un pour le fond d'ellipse, un pour le contour, et un pour le texte. Pas de quoi fouetter un chat.

Création d'une ellipse dans Photoshop, coloration du fond et du contour
Ellipse tracée directement dans Photoshop,
à sa taille définitive

Créer directement dans Photoshop (ou dans tout autre logiciel de dessin matriciel) un dessin au trait permet de ne pas lisser les éléments qui n'ont pas besoin de l'être : les segments de droite qui sont parallèles au axes et les petits caractères. Or dans un dessin au trait de type graphique, ces éléments sont légion ! Ne pas les lisser permet de réduire sérieusement le poids de l'image, tout en lui donnant un aspect beaucoup plus net. La plupart des diagrammes qui illustrent le site Web du CERIG ont été tracés de cette manière, dans Photoshop.

Cette façon de procéder ne s'applique pas à un dessin au trait dont la nature est plus artistique que technique, dessin pour lequel l'usage d'un logiciel tel qu'Illustrator conserve tout son intérêt.

 

IX-5- Conclusion

Nous avons voulu montrer, sur trois exemples, que la qualité et le poids d'une image destinée au Web dépendent de multiples facteurs : la taille de l'image, le logiciel de dessin utilisé pour la créer, les décisions prises quant au lissage, l'ordre des opérations effectuées sur l'image, le format et le logiciel d'enregistrement au format final, etc.

En ce qui concerne le logiciel de dessin, la fonction "Enregistrer pour le Web..." -- si elle existe -- mérite d'être regardée de très près. Mais attention ! les logiciels où l'on dessine le mieux ne sont pas forcément ceux dans lesquels on enregistre les images les plus légères. A l'heure où nous écrivons ces lignes (début 2004), le logiciel Fireworks mérite un détour en fin d'opération. Le format PNG s'y révèle fréquemment comme supérieur au format GIF. Même remarque, un an plus tard (mars 2005), en ce qui concerne Photoshop CS.

Enfin, le format SWF (Flash) mériterait d'être utilisé plus souvent pour mettre en ligne sur le Web des images vectorielles fixes... et moins souvent pour réaliser des animations inutiles, pour ne pas dire ineptes.

Page précédente Retour au sommaire Page suivante
Page précédente Retour au sommaire Page suivante
Accueil | Technique | Liens | Actualités | Formation | Emploi | Forums | Base  
Copyright © CERIG/EFPG 1996-2004
Mise en page : J.C. Sohm