image web - La tour des ruses

20-22 janvier 1999
Palais des congrès Maillot - Paris
Séminaires Formation
Les nouveaux savoir-faire
LES
SEMINAIRES FORMATION D’INTERGRAPHIC-CRÉAPUB.
21-22
JANVIER
1999 1
Des images pour le web
Sylvain Renard
Même s’ils ne sont pas spécialisés dans le multimédia, les
graphistes ont de plus en plus souvent à fabriquer des images
pour le web. Ils se trouvent confrontés à des problèmes nouveaux pour eux.
Les difficultés proviennent de la faiblesse des infrastructures ; impossible de faire circuler des fichiers de plus de
quelques dizaines de ko sur le réseau tel qu’il est et sur nos
lignes de téléphone telles qu’elles sont. Elles proviennent aussi
de la diversité des ordinateurs et des écrans.
Sommaire.
• Les contraintes.
Quels sont exactement les problèmes auxquels nous devons
faire face ?
• Les solutions.
Quelles sont les réponses techniques aux problèmes posés ?
• L’offre logicielle.
Quels sont les logiciels à notre disposition pour mettre en
œuvre ces solutions ?
2 LES
SEMINAIRES FORMATION D’INTERGRAPHIC-CRÉAPUB.
21-22
JANVIER
1999.
Même dans la meilleure des situations, on est
limité à quelques dizaines de ko (David Siegel
vent être diffusées sur le web se heurtent à des conseille une taille moyenne par page de 30 ko).
difficultés. Ceux qui sont habitués aux images C’est cette limitation que nous devons constamdestinées à être imprimées se trouvent confron- ment avoir en tête.
tés à des problèmes trés différents de ceux
qu’ils ont l’habitude de résoudre. Habitués à des
• La restitution de l’image sur l’écran de l’inimages de plusieurs dizaines de Mo, ils se ternaute pose également problème. Elle
retrouvent avec des images lilliputiennes de dépend de son calibrage, de la résolution d’afquelques ko qui ne sont même pas en millions fichage (l’image n’aura pas la même taille à
de couleurs !
l’arrivée sur tous les écrans), de la profondeur
d’affichage (nombre de couleurs pouvant être
Nous allons d’abord identifier les problèmes. affichées). Certains internautes n’ont encore
que des écrans à 256 couleurs, d’autres en
Nous aborderons ensuite les solutions qui 64 000.
existent puis dans une dernière partie, nous
nous intéresserons à l’offre logicielle qui permet
Les gammas sont également différents d’un
de mettre en œuvre ces solutions.
monde à l’autre. Une image créée sur Mac
paraitra nettement plus sombre sur Windows
mais plus claire sur une station de travail SGI.
Tous ceux qui préparent des images qui doi-
Les contraintes.
On peut également décrire les problèmes liés
au logiciel.
Décrivons pour le comprendre, le processus
de création et de diffusion des images sur le
Le navigateur doit être capable d’afficher le
web.
format qu’il reçoit. S’il n’est pas capable de le
faire, deux cas peuvent se présenter : soit il sera
Les images sont mises au point sur l’ordina- possible de charger un plug-in étendant les foncteur du concepteur. Elles sont ensuite télé- tions du navigateur, soit il faudra renoncer à voir
chargées aves les fichiers des pages HTML qui les images.
les appellent sur le serveur qui va en assurer la
diffusion. Aucune contrainte sérieuse à ce
Bref, nous devons nous limiter à des formats
niveau.
compris par la majorité des navigateurs et
réduire au maximum la taille des fichiers.
Il va falloir ensuite acheminer les images, à
chaque requête vers le internautes.
Les solutions.
La requête doit parvenir au serveur, être
traitée, le fichier doit être recherché, lu et
En ce qui concerne le temps de traitement par
envoyé sur le réseau. Il doit ensuite être interle serveur, il faut des machines suffisamment
prété par le navigateur et affiché à l’écran.
rapides et en nombre suffisant, c’est un critère
On peut identifier des problèmes liés au important quand on a à choisir un hébergement.
matériel et à l’infrastructure.
En ce qui concerne le temps de chargement,
• Le temps d’acheminement de la requête
puis de l’image, le temps de traitement par l’uni- il faut réduite au maximum la taille des fichiers.
té centrale du serveur. Les temps d’achemine- On peut y parvenir de trois manières diffément dépendent du modem, de son paramé- rentes :
trage, des équipements du FAI (founisseur
• en compressant les données,
d’accès Internet, en anglais ISP, Internet Service
Provider) et surtout de l’état du réseau au
• en réduisant le nombre de couleurs,
moment de la connection.
LES
SEMINAIRES FORMATION D’INTERGRAPHIC-CRÉAPUB.
21-22
JANVIER
1999 3
• en faisant les deux à la fois.
allons décrire les formats de fichier les plus couramment utilisés.
La compression peut être destructive ou non.
GIF. C’est le GIF87a qui est apparu sur le
Pour la fidélité de l’affichage, la seule solution réseau Compuserve. Nous utilisons actuelle(voir la conférence de Dominique Legrand sur ment le format GIF89a qui est une amélioration
la gestion des couleurs) semble être aujourd’hui du précédent. Il utilise une compression LZW.
de joindre un profil ICC à chaque image.
Il permet en particulier d’intégrer de la transLes solutions que nous avons envisagées jus- parence et d’enregistrer plusieurs images dans
qu’à maintenant reposaient toutes sur un trai- le même fichier qui vont se succéder à l’écran
tement bitmap de l’image mais il est évidem- créant ce que l’on apelle une GIF animée.
ment possible, même si c’est plus difficile,
d’envisager un traitement vectoriel des images
Le format GIF ne permet l’enregistrement
web.
que de 256 couleurs choisies parmi les 16 millions qui peuvent exister dans l’image d’origiLe format PDF est une bonne solution déjà ne. Les données en 256 couleurs sont ensuite
largement utilisée mais elle est surtout adap- compressées sans perte. Il est bien adapté en
tée à la diffusion de documents créés aves les général aux logos, aux dessins, aux images de
logiciels de PAO (XPress ou PageMaker par synthèse mais convient moins aux photograexemple). Le format n’apporte rien de nou- phies.
veau à la diffusion des images proprement dit
et nécessite pour l’instant un plug-in
Avantages :
PDFWiever.
• efficacité,
On peut néanmoins avoir une approche totalement vectorielle pour l’image fixe et pour
• universalité,
l’image animée.
• entrelacement possible pour affichage proIl existe déjà différentes solutions, on peut gressif.
citer CGM (Computer Graphics MetaFile) et
SWF (Flash) proposé par Macrmedia. Le consor• possiblilité d’animation,
tium Web étudie de son côté plusieurs propositions, en particulier PGML (Precision Graphics
• possibilité de transparence sur une couleur.
Markup Language, Adobe) et VML (Vector
Markup Language, Microsoft et Macromedia).
Inconvénients :
CGM est un standard qui vient du dessin
industriel, Flash et PGML sont plus adaptés au
graphisme.
• limitation à 256 couleurs,
• algorithme de compression un peu ancien,
Actuellement flash est le plus répandu et ren• méthode sous copyright.
contre un beau succès. Il permet de générer des
JPEG (Joint Photographic Expert Group)
fichiers de très petite taille comprenant des
images animées et du son. PGML et VML sont
Le JPEG repose sur une compression avec
des applications XML (eXtensible Markup
pertes en millions de couleurs. La différence
Language), un standard du futur.
entre l’image décompressée et l’image originale
Notons enfin que l’utilisation des feuilles de peut être imperceptible à l’œil si l’on choisit un
styles (CSS) devrait limiter l’utilisation des images haut niveau de qualité.
pour la typographie.
Il est mal adapté aux images en niveaux de
Pour voir ce qui se fait actuellement, nous gris, ou à celles qui contiennent des à plats, il
4 LES
SEMINAIRES FORMATION D’INTERGRAPHIC-CRÉAPUB.
21-22
JANVIER
1999.
convient par contre très bien pour les photo- hésiter sont aujourd’hui le JPEG et le GIF
graphies.
Avantages :
L’offre logicielle.
• efficacité,
• universalité,
• pas de réduction du nombre de couleurs,
• possibilité d’un paramétrage de la compression,
Il faut d’abord constater qu’on ne se trouve
pas dans la même situation que pour la PAO
pour laquelle des standards de fait se sont installés au fil des ans (XPress, Illustrator, Photoshop...).
De nombreux logiciels existent et apparaissent, le marché n’a pas encore tranché.
• possiblité d’un décodage progressif.
Il faut dabord rappeler que les logiciels que
Inconvénients :
nous utilisons en PAO peuvent souvent nous
permettre de traiter les images pour le web.
• apparition de matrices 8x8 à fort taux de C’est vrai pour Photoshop mais aussi pour
compression,
Illustrator et FreeHand.
• destruction importante de l’image quand
Des logiciels spécifiques ont fait leur apparion prend un taux très élevé.
tion, ils offrent généralement uine meilleure
ergonomie et des fonctions particulières dont
PNG
nous n’avons besoin que pour le web.
C’est un format récent qui répond aux
ImageReady d’Adobe est un logiciel efficace
besoins actels et qui intègre les résultats des qui séduira tous ceux qui connaissent Photoshop
recherches de ces dernières années.
car il utilise la même interface. Il est proposé à
un prix raisonnable et permet en particulier :
Avantages :
• un grand confort pour l’optimisation avec
• algorithme de compression plus perfor- la possiblité de comparer à l’écran l’image orimant que celui du format GIF,
ginale et l’image qui sera vue après décompression,
• possiblité de transparence variable,
• l’utilisation de calques et la mémorisation
• utilisation d’une palette 8 bits ou 24 bits, de sélection (sans travail sur les couches),
• affichage progressif possible,
• des corrections de chromie,
• inclusion possible de métadonnées :
• l’utilisation de scripts et de droplets pour
gamma, auteur, légende...
l’automatisation et le traitement par lot.
• libre de tout brevet.
• l’utilisation de filtres,
Inconvénients :
• le découpage d’une image en mosaïque.
• Pas de possibilité d’animation.
• la création d’animations,
• non universel.
• des détourages rapides dans les cas simples.
En résumé les deux formats à utiliser sans
A noter qu’ImageReady n’ouvre pas les
LES
SEMINAIRES FORMATION D’INTERGRAPHIC-CRÉAPUB.
21-22
JANVIER
1999 5
images en CMJN. A l’usage on a souvent besoin
La dernière version (5.5 Spécial Web), que
d’utiliser conjointement ImageReady et nous n’avons pas encore testée, est conçue
Photoshop
pour permettre à ceux qui créent avec Painter
de mettre leur travail en ligne sans passer par un
DeBabelizer d’Equilibrium est un outil remar- autre logiciel. Elle comporte des fonctions d’opquable, adapté aux professionnels qui sont exi- timisation (PNG non géré), de génération de
geant sur les fonctionnalités et le traitement par code Javascript, de découpe d’image, ...
lot. Il est capable de manipulations très complexes et accepte un très grand nombre de
En fonction de ses habitudes de travail et de
formats. L’interface est un peu décourageante ses besoins, chacun trouvera son bonheur avant
mais les performances sont au rendez-vous que des standards s’installent.
pour un prix nettement plus élevé qu’ImageReady. Il n’existe pas à notre connaissance en
version française.
Fireworks de Macromedia apparaît comme
un logiciel de qualité aux fonctions étendues. Il
permet de travailler à la fois en mode bitmap et
en mode vectoriel un peu à la manière de
Painter. Ses fonctions de création sont étendues,
des effets complexes (chanfreins, ombres, extrusions...) s’obtiennent facilement. Ils séduira sans
doute d’emblée ceux qui sont habitués à l’interface macromédia mais il vaut le détour pour
tout le monde.
ImageStyler d’Adobe offre un grand confort
de travail pour ceux qui ont à fabriquer rapidement des boutons ou des images pour le web.
Il permettra en particulier des mises à jour
rapide de site par des utilisateurs qui ne connaissent pas les logiciels de création graphique. Il
permet même de générer directement des
pages web.
GifBuilder d’Yves Piguet, un contributiel,
reste un excellent logiciel pour optimiser les GIF
animées.
Painter de Metacreations occupe une place
à part. Il est d’abord un logiciel irremplaçable de
création graphique avec ses instruments de
dessins qui imitent les instruments réels et sa
gestion remarquable des papiers mais il permet
aussi de concevoir des animations pour le web
en GIF animées et bien entendu, de préparer des
images.
Nous l’avons utilisé pour certaines des animations de notre site et pour fabriquer rapidement nos barres de navigation grace à ses
fonctions de chanfreinage particulièrement
sophistiquées..
6 LES
SEMINAIRES FORMATION D’INTERGRAPHIC-CRÉAPUB.
21-22
JANVIER
1999.
particulier des travaux spécialisés (transcodage,
conversion vers HTML, tableaux complexes,
mise en page de textes scientifiques, composition de formules mathématiques et chimiques,
dessins de perspectives,…)
Travail dans toutes les langues européennes
(y compris le grec), traductions possibles, nous
consulter.
Sylvain
Renard
Conseil
Audit, études d’implantation, négociation
de devis, installation de matériel.
De formation pluridisciplinaire (mathémaVeille technologique
Notes techniques, rapports sur l’évolution de
tiques-physique et licence de lettres), Sylvain
Renard a dirigé une entreprise de PAO avant de technologies qui vous concernent, réunions de
synthèse…
se consacrer à la formation et au conseil.
Pour plus d’informations, visitez la tour des
Ces dernières années, il a organisé 10 sessions
de formation de 1 000 heures au profit d’han- ruses : www.ruses.com
dicapés physiques et est intervenu dans de
nombreuses entreprises et centres de formation.
Sylvain Renard
58 bd Henri Dunant
Depuis deux ans, il travaille sur Internet. Il a
91100 CORBEIL-ESSONNES
créé et il anime le site « La tour des ruses »
O1 64 96 02 31
consacré aux arts graphiques, au multimédia et
[email protected]
à la PAO.
Il intervient dans les domaines suivants :
Internet.
Conception et réalisation de sites (design, réalisation de pages, hébergement, interfaçage de
bases de données, développements Javascript,
solution de vente en-ligne…)
Formation.
Il effectue sur site des formations sur les
thèmes suivants :
• Maintenance logicielle
• Initiation à Internet
• Conception et réalisation de sites
• XPress
• Illustrator
• Photoshop
• ImageReady
• Acrobat
• Cyberstudio
• Painter
Production et aide à la production
Réalisation de tous les travaux graphiques
(livres, brochures, plaquettes, affiches,…) et en
LES
SEMINAIRES FORMATION D’INTERGRAPHIC-CRÉAPUB.
21-22
JANVIER
1999 7