Images et graphiques pour le web: Le format SWF (Flash)
Un peu d'histoire
Le créateur de Flash, Jonathan Gay, est un américain passionné d'informatique qui commence sa carrière en créant des jeux pour ordinateur,
alors même qu'il n'a pas fini ses études. Des jeux il passe au
logiciel de dessin vectoriel (pour Mac et PC) dans le cadre d'une petite entreprise
(Silicon Beach Software), laquelle tente sans succès de concurrencer
le logiciel Illustrator d'Adobe. Au début de 1993, Gay décide
de créer sa propre entreprise, dénommée FutureWave Software.
Il publie un nouveau logiciel de dessin vectoriel (SmartSketch), mais c'est
un nouvel échec.
Au milieu de 1995 Gay comprend que le marché du logiciel de dessin
est trop encombré, et il décide d'abandonner l'image fixe au
profit de l'image vectorielle animée. Simultanément, il songe à diffuser ce type d'image sur le web -- une idée révolutionnaire pour l'époque. Remanié, SmartSketch devient FutureSplash Animator, le logiciel qui
permet de créer la célèbre image de la balle qui avance
en rebondissant.
En fait, les premières démonstrations ne soulèvent pas
l'enthousiasme : la balle rebondit fort lentement... D'abord, les ordinateurs
de l'époque n'ont pas la puissance que nous leur connaissons aujourd'hui.
De plus, une partie du programme est écrite en Java, et les mauvaises
langues vous diront que pour la rapidité, on fait mieux (du moins en
1995). Bref, la technologie de Gay est un peu trop en avance sur son temps.
A l'automne de 1995, Gay essaye sans succès de vendre son produit à Adobe,
puis à Fractal Design. Au milieu de 1996, il le lance sur le marché,
où il rencontre un certain succès, ses deux plus célèbres
clients étant MSN et Disney Online. En novembre 1996, l'éditeur
Macromedia propose de racheter FutureWave. Étant donné qu'en
quatre années de fonctionnement, Gay a beaucoup plus dépensé qu'il
n'a gagné, il accepte l'offre. Le logiciel change une fois de plus de
nom, et devient Macromedia Flash 1.0., tandis que son créateur prend
chez l'éditeur le poste de vice-président en charge de Flash.
Aujourd'hui, Flash en est à sa sixième version. Il est utilisé par
de nombreux développeurs de sites web, et on estime que plus de 90 %
des internautes sont équipés du plug-in correspondant. Certes,
il est regrettable que ce format soit la plupart du temps utilisé pour
réaliser des animations ineptes, qui n'ont pas d'autre résultat
que d'impatienter l'internaute (d'où la présence du fameux bouton "skip
intro"). Mais ces errements n'enlèvent rien à la valeur
technique du produit.
Flash et l'image fixe
Flash n'est presque pas utilisé pour réaliser des images vectorielles
fixes, et personne ne semble en connaître la raison. Certes, il n'a pas été créé pour cela, mais les formats vectoriels étant plutôt rares sur le web, c'est une possibilité qu'il est bon de considérer.
Considérons un exemple simple de dessin au trait, un cercle rouge bordé de
noir. Enregistrée au format SWF, l'image pèse 111 octets. Moyennant
quoi, on peut l'afficher à n'importe quelle échelle, comme le
montre la figure ci-dessous. Que l'internaute ne s'y trompe pas : bien qu'elle
soit affichée cinq fois à des tailles différentes, l'image
n'est téléchargée qu'une seule fois.
Évidemment, sur un tel exemple, les formats GIF ou PNG ne sont pas
concurrentiels. Pour représenter la plus petite image (le cercle de
10 pixels de rayon) en format GIF, il faut au moins 200 pixels. Et plus l'image
est grande, plus l'avantage du vectoriel s'accroît.
Pour un dessin au trait un peu plus complexe, le format vectoriel garde tout
son avantage, comme le montre l'exemple ci-dessous, extrait d'un document du
CERIG consacré à la typographie du web. L'image de l'arbre a été dessinée directement dans Flash, puis enregistrée au format SWF grâce à la fonction "Exporter l'image...". Elle a ensuite été transportée dans Photoshop par copier-coller (car ce logiciel ne lit pas le format SWF), où elle a été pixellisée. Elle a enfin été débarrassée de quelques pixels qui ne servaient à rien. Même ainsi toilettée, l'image GIF (32 couleurs) pèse quatre fois plus lourd que l'image SWF.
Ceci dit, les pages web des sites professionnels contiennent plutôt
des graphes que des arbres. C'est pourquoi nous avons dessiné l'image
ci-dessous, dans Photoshop et dans Flash séparément. L'image
au format GIF a finalement été créée dans Fireworks,
et nous avons conservé toutes les couleurs d'origine (31). L'image au
format SWF a été enregistrée dans Flash MX.
Dans cet exemple, l'image vectorielle Flash est presque deux fois plus lourde
que l'image matricielle GIF. De plus, elle est de moins belle qualité :
le lecteur "Flash Player" n'est visiblement pas à l'aise pour
afficher les caractères et les détails de petite taille, pour
lesquels il effectue un lissage désagréable.
Par contre, agrandie deux fois, l'image Flash devient nettement plus belle,
alors que l'image GIF se dégrade, comme le montre la figure ci-dessous.
En particulier, Flash lisse systématiquement le texte, ce qui donne
bonne apparence à ce dernier lorsque la taille de l'image croît.
Mais... le point faible de Flash, c'est le texte, comme le montre la figure
ci-dessous. L'image de gauche a été créée dans
Photoshop, puis enregistrée au format PNG dans Fireworks MX. L'image
de droite a été créée dans Flash MX, puis enregistrée
au format SWF. Nous voyons immédiatement que dans Flash, le texte pèse
lourd. Plus il y a de texte dans une image, moins Flash est attrayant (du point
de vue du poids des fichiers s'entend).
Notons pour terminer que l'introduction d'une image Flash (extension "swf")
dans une page web requiert l'usage de la balise embed. Le type MIME correspondant
est : "application/x-shockwave-flash".
Flash et l'importation
Comme nous venons de le constater, le résultat de la compétition
entre les formats GIF et SWF -- pour la représentation de l'image au
trait -- dépend de la nature de l'image et de la taille à laquelle
on veut la représenter. Cela signifie qu'il est difficile de prévoir
a priori dans quel format l'image sera la moins lourde, et qu'il est par conséquent
nécessaire de se livrer à quelques essais. Pour que ces derniers
soient rapidement effectués, il faut pouvoir transporter facilement
la version originale de l'image d'un logiciel à l'autre. Et c'est là que
le bât blesse.
Flash communique très mal avec Illustrator, et de façon médiocre
avec Excel. Or Illustrator est le logiciel de dessin vectoriel le plus utilisé,
et Excel le tableur le plus courant. En milieu professionnel, de très
nombreux graphes (courbes, bâtons, camemberts, 3D, etc.) sont issus d'Excel.
A l'origine, le graphe utilisé ci-dessus a été dessiné dans
Illustrator. Il a été importé dans Photoshop, où il
a été pixellisé, puis retravaillé pour éliminer
tout lissage intempestif (cadre, graduations, points bleus, texte). Flash,
par contre, n'admet pas les fichiers provenant d'Illustrator, que ce soit par
copier-coller ou par importation. Heureusement, Illustrator permet d'enregistrer
au format SWF (depuis la version 9). Une image au format SWF a pu ainsi être
créée, qui pesait 3790 octets. Reprise dans Flash et ré-enregistrée, l'image pesait 3003 octets -- ce qui montre que le poids d'un fichier SWF dépend du logiciel utilisé pour le créer. L'image n'étant pas fameuse, nous l'avons redessinée sur un nouveau calque. Débarrassée de son ancien calque (c'est important !), la nouvelle image SWF ne pesait plus que 2593 octets. Ceci nous montre que le poids d'une image ne dépend
pas seulement de son format, mais aussi de son histoire -- laquelle peut être
assez mouvementée...
Un bon usage pour le format SWF
Dans les pages web d'un site professionnel, il y a beaucoup d'images relevant
du dessin au trait (graphes, schémas d'appareils, flow-sheets de procédé, etc.). Pour ne pas rendre trop long le téléchargement des pages, et pour fournir le meilleur service possible à l'internaute, on peut
mettre en oeuvre la stratégie suivante :
- afficher dans les pages web les images relevant du dessin au trait dans
un format matriciel (GIF ou PNG), la priorité étant donné à celui qui fournit l'image la plus légère ;
- donner à ces images des dimensions aussi réduites que possible,
tout en conservant l'essentiel du message que l'on veut transmettre sous
forme graphique ;
- se servir de ces petites images comme de miniatures. S'il clique dessus,
l'internaute voit s'afficher dans une autre fenêtre la même image au format
SWF. Il peut lui donner la taille qu'il désire pour l'examiner à loisir,
et il peut l'imprimer dans une grande taille sans perte de qualité.
La miniature ci-contre illustre cette stratégie.
En cliquant sur cette image, on fait apparaître son homologue au format
SWF dans une fenêtre séparée, le lien étant réalisé de telle sorte que la taille de l'image SWF suive celle de la fenêtre (présentation proportionnelle). L'internaute peut donc examiner l'image, dans son navigateur, à l'échelle qui lui convient le mieux. Il peut également imprimer une image agrandie de bonne qualité, moyennant quelques précautions.
La fonction "Imprimer..." du navigateur Internet Explorer (nous
parlons de la version 6, la plus récente à l'heure où nous écrivons ces lignes) fonctionne correctement avec les images SWF dont les dimensions
sont définies de manière absolue (exemple : la présente
page web), mais de manière abominable avec celles dont les dimensions
sont définies de manière relative (exemple : la page affichée à partir de la miniature). Par contre, le plug-in "Flash Player" (version
6 actuellement) imprime correctement dans les deux cas. C'est donc à lui
que nous ferons appel, en effectuant un clic droit sur l'image, et en sélectionnant
la fonction "Imprimer..." dans la liste qui s'affiche.
La fonction "Imprimer..." du navigateur de Netscape (nous parlons de
la version 7) se comporte normalement quelle que soit la manière dont
est définie la taille de l'image SWF. Par contre, la fonction "Aperçu
avant impression" ne sait pas afficher ce type d'image.
Une telle stratégie de présentation d'image possède à notre
avis plusieurs avantages :
- la miniature est affichée dans un format matriciel (GIF ou PNG) que
tous les navigateurs reconnaissent, et qui ne nécessite pas de plug-in.
On est ainsi certain que le message graphique est transmis, du moins pour
l'essentiel ;
- l'image à laquelle conduit la miniature est vectorielle, et affichée
en présentation proportionnelle. C'est un plus pour l'internaute qui
possède le plug-in Flash Player, mais ce n'est pas un drame pour celui
qui ne le possède pas et ne veut pas le télécharger ;
- le fait que l'image au format SWF soit plus lourde que la miniature n'est
pas grave, l'internaute n'étant pas obligé de la télécharger.
Cependant, cette stratégie n'est réalisable en pratique que si
elle n'implique pas que la même image soit dessinée deux fois.
Nous reviendrons sur ce point au chapitre 9.
Conclusion
Pour le dessin au trait en image fixe, la compétition entre les formats
GIF et SWF (Flash) reste ouverte. Et pourtant, le format SWF n'est guère
utilisé pour le dessin au trait en image fixe : cela mérite une
explication. Deux types de causes peuvent être invoqués.
Les raisons psychologiques d'abord (auxquelles nous ne croyons pas beaucoup...)
:
- le poids des habitudes. Le format GIF existe depuis plus de 16 ans -- autant
dire qu'il appartient à la préhistoire du web. Pourquoi abandonner
un outil éprouvé ?
- on s'est toujours passé de format vectoriel fixe sur le web, pourquoi
se remettre en question maintenant ?
- dans l'esprit des infographistes, le format SWF est indissolublement lié à la
notion d'animation. Il ne leur vient pas à l'idée de l'utiliser
pour l'image fixe ;
- le développement des liaisons rapides (ADSL, câble) laisse penser
que le poids des fichiers n'est plus un problème à l'ordre
du jour, etc.
Les raisons techniques ensuite (qui nous paraissent prépondérantes
par rapport aux précédentes) :
- le texte pèse lourd dans Flash, et pour les images de type professionnel,
c'est un défaut presque rédhibitoire ;
- l'internaute doit télécharger un plug-in pour être en
mesure de visualiser les images Flash (c'est toujours le cas avec Internet
Explorer version 6, par exemple) ;
- le logiciel Flash communique mal avec les logiciels de création d'images
vectorielles les plus utilisés par les infographistes ;
pour les images de très petite taille, le format GIF est presque imbattable.
L'utilisation du format SWF pour l'image fixe ressemble à l'histoire
d'un amour déçu. Sur un petit essai "quick and dirty",
tout parait merveilleux : l'image Flash est légère comme une
plume comparée à l'image GIF. Mais que se présente une
image dont nous avons réellement besoin -- un graphe bien sûr,
nous ne sommes pas un site professionnel pour rien -- et l'image Flash perd
tout intérêt...
La bonne conclusion, en fait, est beaucoup plus modérée. D'abord,
on peut rencontrer des images de type professionnel dans lesquelles l'information
textuelle est proportionnellement très réduite, et le format
SWF retrouve alors tout son intérêt. Ensuite, l'idée d'utiliser
une image matricielle (GIF ou PNG) comme miniature, permettant l'affichage
dans une fenêtre séparée de la même image en format
vectoriel (SWF) et en présentation proportionnelle, nous paraît
constituer une utilisation raisonnable du format SWF.
| |
|
— Le format SWF