image web - La tour des ruses
Transcription
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