Optimisation et formats d images standards pour le Web Par Thierry Goulet Web Designer, ministère de la Sécurité publique. Plan de conférence

Transcription

1 Optimisation et formats d images standards pour le Web Par Thierry Goulet Web Designer, ministère de la Sécurité publique Plan de conférence Contenu de la présentation 1. Les images et le Web : 2. Le format GIF : 3. Le format JPEG : 4. Le format PNG : 5. Le format PDF : 6. Conclusion : a. Pourquoi des images? b. La qualité des images; c. Les limites du Web; d. Images matricielles et vectorielles. a. Bref historique; b. Le fonctionnement; c. Avantages et inconvénients; d. Exemples. a. Bref historique; b. Le fonctionnement; c. Avantages et inconvénients; d. Exemples. a. Bref historique; b. Le fonctionnement; c. Avantages et inconvénients; d. Exemples. a. Qu est-ce que le PDF? b. Le Post-Script; c. Acrobat vs PDF; d. Avantages et inconvénients. a. Retour sur les quatre formats; b. Ce que réserve le futur; c. Conclusion. 1

2 1. Les images et le Web; a. Pourquoi des images? On ne reculera pas à l époque babylonienne du Web pour parler d images, mais on parlera du moment présent, l actuel. Lorsque l on parle d images sur le Web, on parle d éléments graphiques qui servent à mettre en relief certains aspects ou d identifi er un site, par exemple, une signature visuelle (comme le Québec au bas de cette diapositive). Aujourd hui, le médium électronique nous offre plein de petits gadgets visuels, comme les CSS et le Flash, qui donnent la possibilité au créateur de site d obtenir un produit nettement supérieur à ce que l on avait il y a quelques années. L utilisation d images standard, conjointement aux CSS, permet de réaliser un visuel riche et complexe, sans pour autant être lourd ou diffi cile de chargement. Il ne sera pas question ici des technologies propriétaires comme le Flash ou d images vectorielles SVG (Scalable Vector Graphics), mais plutôt de la distinction entre les trois principaux formats d images couramment utilisés sur le Web et qui sont des standards bien établis avec une légère incursion dans le monde du PDF. Le but de la présentation est de vous permettre de connaître la différence entre un GIF, un JPEG et un PNG ainsi que de comprendre ce qu est un PDF. b. La qualité des images; Une image sur le Web est, par défi nition, une image de mauvaise qualité. La principale raison est le médium lui-même, un réseau sur lequel on doit limiter l usage de la bande passante en diminuant le poids des fi chiers et l utilisation d écrans comme outils de visualisation. À titre indicatif, on utilise des images mesurées en pixels, avec une «résolution» calculée en PPI, Pixels Per Inch (Pixels par pouces en français ou DPI, Dot per inch). Une image sur le Web ne devra pas être d une résolution plus élevée ou plus petite que 72 à 75 ppi. La taille de celle-ci ne devra pas excéder celle de l écran moyen, soit 800 pixels de largeur par 600 pixels de hauteur, théoriquement. Pour faire une comparaison, une image destinée à l impression sur presse devra être généralement d environs 300 ppi et on mesure sa taille en pouces (picas ou cm, selon le choix), en taille imprimée. Une image diffusée sur le Web ne sera pas adaptée pour une impression étant donné sa basse résolution et de plus, elle aura subi une compression. Effectivement, un format Web, peu importe lequel, torture l image pour en diminuer le poids au maximum. Plus elle est torturée, plus elle sera légère et moins elle sera de qualité! 2

3 Une image sur le Web est considérée comme une fi nalité. Les formats GIF, JPEG et PNG ne devraient jamais être réutilisés dans d autres contextes. La qualité d une image sur le réseau est l équivalent d une mauvaise photocopie d un document, on ne peut plus rien faire avec, du moins, rien faire de mieux! c. Les limites du Web; Le Web, tel qu on le connaît maintenant, utilise le HTML comme outil de codifi cation de l information. Ce qui nous oblige à utiliser des formats d images supportés par tous les fureteurs. Les formats GIF et JPEG sont des ancêtres et ne nécessitent qu une petite ligne de HTML toute simple pour les affi cher. Le format PNG est, quant à lui, plus problématique. Bien que standard lui aussi, depuis peu par contre, certains fureteurs ont de la diffi culté à l interpréter. Les autres formats nécessitent des greffons (plug-ins) pour permettre une lecture; c est le cas des formats SVG, Flash et PDF. De plus, les insérer dans une page demande certaines prouesses techniques. 3

4 d. Images matricielles et vectorielles. Une image sur le Web est généralement matricielle, c'est à dire qu elle est en pixels et présente une résolution fi xe. Il existe un second type d image, soit les images vectorielles. Celles-ci sont produites mathématiquement par l utilisation de points sur une grille de coordonnées reliés entre eux par des vecteurs. On ne parlera pas vraiment d elles aujourd hui étant donné que le Web ne supporte que diffi cilement ce type d image et ce, seulement par le biais des formats SVG et Flash qui sont encore jeunes et non standards (malgré l adoption par le W3C du SVG comme standard vectoriel pour le Web). Peu de gens peuvent y avoir accès pour l instant. 2. Le format GIF : a. Bref historique; Le format GIF (Graphic Interchange Format) est un vieux format (1987), si vieux que certains le considèrent obsolète! Malgré tout, c est un format qui a fait ses preuves. Il est en usage depuis longtemps et on peut lui prévoir un certain avenir encore. À titre indicatif, les graphistes le prononcent «guif» et les informaticiens généralement «jif» le «g» dur vient du mot «graphic» Il a été créé par CompuServe et Unisys Corporation et est au cœur d une controverse grandissante au sein de la communauté Web des logiciels libres. En effet, il est depuis 1994, assujetti à une licence obligeant les fabricants de logiciels à payer des montants d utilisation du format, le tout pour l utilisation de l algorithme de compression du GIF, le LZW (Lempel-Zev-Welch) 4

5 b. Le fonctionnement; Le principe derrière le GIF est l utilisation d une palette de couleurs restreintes. Le fi chier est encodé en 8 bits, ce qui fait qu il y a un maximum de 256 couleurs qui sont répertoriées dans une palette qui sera défi nie à la création du fi chier. Le fonctionnement est simple; on a une grille de pixels qui, au lieu de contenir chacun une couleur (par exemple, des codes RGB en hexadécimales), va référer à une couleur précise dans la palette. C est la couleur de la palette qui aura toutes les caractéristiques RGB hexadécimales nécessaires à l affi chage de la bonne couleur. Donc, moins il y a de couleurs dans un GIF, plus la palette est petite et le fi chier est petit. À cela s ajoute la compression LZW, très effi cace, qui réduit encore une fois la taille du fi chier. L étape la plus délicate est la sélection de la palette de couleurs. Il en existe qui sont associées à des systèmes d exploitation comme les palettes Windows et Mac qui correspondent aux 256 couleurs de base des plates-formes, et d autres qui sont relatives aux couleurs de l image donc, les teintes s ajustent. Traditionnellement, pour le Web, on disait d utiliser la palette Web216, celle-ci est le recoupement des couleurs communes Mac et PC. Or, cette habitude peut généralement être mise de côté étant donné que seulement 3% des utilisateurs du Web ne sont qu en 256 couleurs; tous les autres sont en ou plus. 5

6 c. Avantages et inconvénients; Un gros avantage du format est la possibilité de faire de très petits fi chiers avec couleurs restreintes. Par exemple, pour des puces de listes ou des icônes (à peine quelques centaines d octets, moins d un ko par fi chier). Par contre, de cet avantage découle un inconvénient direct : le nombre de couleurs est limité. De plus, le format GIF n est destiné qu à l écran (non, pas pour les documents Word!!) car il est OBLIGATOIREMENT à 72 dpi, limitant considérablement sa qualité d impression. Un petit point en sa faveur est la capacité de faire des animations (GIF animés) et aussi d avoir une transparence limitée, c est-à-dire une couleur qui sera transparente. Finalement, indirectement, le GIF coûte cher. Les logiciels permettant la sauvegarde du format doivent inclure dans le prix de vente le montant alloué aux droits d utilisation du protocole LZW. d. Exemples. 6

7 3. Le format JPEG : a. Bref historique; Le format Joint Photographic Experts Group a été créé par l organisme du même nom à la fi n des années 80. Le format est considéré comme étant destructif, c'est à dire qu il diminue la qualité de l image à mesure qu on augmente le taux de compression. La compression fonctionne sur les lacunes de la vision humaine, on crée des petits défauts dans l image qui ne seront pas nécessairement perçus à petite échelle. On considère qu il est généralement meilleur avec des photographies et n est d aucune utilité avec du texte ou des graphiques. b. Le fonctionnement; Le JPEG fonctionne grosso modo en regroupements de blocs de pixels. Ainsi, il va diviser l image en blocs qui seront mis en relation les uns avec les autres. Chaque bloc aura aussi une «compression» qui lui sera propre. Ainsi, plus on augmente le taux de compression, plus les blocs seront individuellement compressés. Le résultat peut être affreux; on peut commencer à voir se former des zones de compression dans l image. Le principe à suivre est donc le suivant : maximum de compression avec le minimum de dégâts. Malgré tout, il existe des trucs pour obtenir une compression «améliorée». Le JPEG fonctionne très bien avec les images fl oues donc, en créant des imprécisions, des fl ous dans l image, on obtient une compression «zonée». c. Avantages et inconvénients; Le JPEG est un format très répandu, peut-être un peu trop. Il permet d obtenir des images ayant un rendu visuel de qualité à l écran et tolère même des résolutions élevées. Par contre, l effet pervers est que certaines personnes l utilisent à outrance, par exemple, pour faire du stockage d images. Il est même déplorable que la majorité des appareils photographiques numériques offrent les images en JPEG. Certains fabricants ont compris et offrent le TIFF comme option haute qualité (ce qui a l inconvénient de créer de très gros fi chiers). Un JPEG ne devrait en aucun cas être utilisé dans Word, encore une fois, le format TIFF devrait être valorisé, avec une résolution minimale de 100 dpi. Le format offre certains avantages non négligeables pour le Web. On a maintenant droit au JPEG progressif qui s affi che en plusieurs étapes et le JPEG 2000 supporte les profi ls de couleur ICC entre autres. 7

8 d. Exemples. 4. Le format PNG : a. Bref historique; Comme il a été mentionné en début de conférence, il y a une controverse sur le format GIF qui demande aux fabricants de bien vouloir se conformer aux droits d utilisation du protocole de compression LZW. Voilà que certaines personnes ont désapprouvé cette pratique et ont décidé de proposer une option au GIF : le PNG (prononcer «Ping»), pour Portable Network Graphic (ou «PiNG is not GIF»). Ce format était supposé, en 1995, révolutionner l univers et tout remettre en question. On est en 2003 et rares sont les sites qui utilisent ce format! Il a donc été créé dans le but de remplacer l obsolète GIF et même le JPEG. C est un format libre, sans brevets, donc d utilisation gratuite. b. Le fonctionnement; Il existe deux types de PNG; le 8 bits et le 24 bits. Le 8 bits fonctionne de la même façon que le GIF avec une palette de couleurs, sauf qu il n utilise pas l algorithme de compression LZW. Ce qui a pour conséquence que la plupart des fi chiers PNG sont légèrement plus lourds que les fi chiers GIF avec la même palette. 8

9 Le second type de PNG, le 24 bits supporte un plus grand nombre de couleurs (jusqu à 32 bits, mais généralement pas plus de 24) comme le JPEG, sauf que la compression n est pas destructive; on ne peut changer les paramètres. Elle est fi xe. Par contre, son avantage n est pas dans le poids de l image mais plutôt dans la transparence! Effectivement, un PNG est transparent au sens propre du mot. On applique un «Alpha Channel», un masque en 256 niveaux, ce qui permet d avoir une image qui se fondra avec son environnement. Par comparaison, le GIF ne permet que deux niveaux de transparence : opaque ou transparent et le PNG 24 permet 256 variations sur l opacité. c. Avantages et inconvénients; Un des avantages évident du PNG est la transparence. Pour le reste, il ne présente rien de bien nouveau. Par contre, il a une épine, et toute une! Le PNG n est que partiellement supporté par Internet Explorer!! Ce dernier pourra détecter le PNG, mais ne pourra interpréter le Alpha Channel automatiquement. Il faut coder un petit quelque chose dans le fureteur pour permettre d avoir la transparence ce qui nuit grandement au format; 90% des fureteurs ne peuvent en profi ter! 9

10 À quoi bon ce format? Deux choses : il est génial dans Power Point et dans Flash comme image importée! Ce sont ses deux véritables utilités. d. Exemples. 5. Le format PDF : a. Qu est-ce que le PDF? Le Portable Document Format a été développé par Adobe, après la sortie du Post-Script par la même compagnie. Le PDF n est en fait qu une visualisation à l écran d un document Post-Script. Il a été créé dans le but de permettre une visualisation de ce à quoi devrait ressembler un document imprimé, et ce, sans contrainte de plate-forme ou de police de caractère. Un second objectif vient d être atteint depuis peu; celui d offrir la possibilité d utiliser le PDF comme format d impression sur presse plutôt que les formats propriétaires Quark XPress ou Adobe InDesign (ou autres). Le PDF n est pas une image, c est un document qui doit être lu par un logiciel adapté, Acrobat ou Acrobat Reader et il s apparente plus à un document Offi ce (comme Word) qu à une image. Il ne peut être interprété par les navigateurs comme les GIF, JPEG ou PNG sans le logiciel Acrobat. b. Le Post-Script; 10

11 Le Post-Script est un langage de programmation complexe qui permet de positionner les éléments graphiques sur une page bidimensionnelle. Lorsqu une application fait parvenir des données à une imprimante, elle va généralement utiliser le PS pour indiquer à l appareil comment organiser la page, interpréter les fontes Le langage est aussi utilisé pour communiquer d une application à une autre. Le Post-Script est un langage indépendant du matériel (Device Independant) ce qui permet de produire des documents qui pourront être vus à l écran ou imprimés. Les logiciels qui lisent le PS ont des fonctionnalités adaptées au matériel qui utilisera le fi chier (par exemple, pour indiquer d utiliser tel bac de papier pour l impression). Le PDF n est donc rien d autre qu une adaptation du Post-Script pour faciliter le transport et la visualisation d un fi chier. Il supporte un mélange de vectoriel (images et texte) et de matriciel (images). c. Acrobat vs PDF; Acrobat est un logiciel et PDF un format de fi chier. C est aussi simple que ça. Il existe diverses versions d Acrobat qui vont lire certains types de PDF. Nous en sommes à la version 5 de Acrobat qui lit les versions PDF 1.4 et moins. La version 4 lit les 1.3 et moins et ainsi de suite Pour créer des PDF, il existe une multitude d outils comme la suite Acrobat d Adobe mais aussi certains greffons (plug-ins) qui vont pouvoir faire le travail dans certaines applications ou encore, des compagnies comme PDF 995 qui offrent un gratuiciel (freeware) qui permettra de transformer tout document en fi chier PDF. d. Avantages et inconvénients. 11

12 Un PDF n est pas éditable facilement de par sa nature. Les éléments qui s y trouvent sont ni plus ni moins «vissés» en place par le langage PS. De plus, les PDF sont instables. La plate-forme utilisée (Windows NT4 ne supporte pas le PS et crée des erreurs lors de la création de certains PDF), des fontes (la cohabitation de fontes Thrue Type, PS et OpenType dans un même fi chier peut créer des erreurs), des bugs de logiciel (une multitude) ne sont que quelques exemples de problèmes causés par les PDF. Trop souvent j ai dû intervenir auprès de gens qui ne pouvaient soit créer ou lire des PDF. Par contre, lorsqu un fi chier est créé et fonctionne bien, c est une vraie joie. Il sera semblable sur tous les postes de travail et permettra une diffusion facile. Les fi chiers PDF sont gourmands, ils peuvent facilement devenir très gros (inconvénient du PS). Le texte n est pas un problème, ce sont les images, tant vectorielles (surtout les complexes, comme des cartes) que matricielles qui sont lourdes. 6. Conclusion : a. Retour sur les quatre formats; Les GIF et JPG ne sont destinés qu au Web. Étant donné leur niveau de qualité, on ne devrait pas retrouver ces fi chiers dans d autres contextes. Ils ont fait leurs preuves, sont stables et ont encore beaucoup à faire. Ce sont des formats d images parfaits pour une visualisation directe dans une page Web ou sur écran, comme dans Power Point, mais pas pour l impression ou un logiciel bureautique comme Word. 12

13 Les deux formats de PNG ont à gagner en maturité. Leur manque de support par les fureteurs Internet Explorer est leur plus grosse lacune. Par contre, je vous conseille dès maintenant de les utiliser dans vos futures présentations Power Point ou documents Flash. Le PDF devrait idéalement être conservé comme format de publication de fi chiers et non comme format de diffusion sur le Web. Un utilisateur devrait pouvoir visualiser un fi chier, par exemple, HTML et, s il est satisfait, le télécharger en PDF et le conserver. C est un format qui, depuis quelques années, a grandement évolué et a amélioré sa stabilité. b. Ce que réserve le futur; Diffi cile à dire. Beaucoup de formats d images ont tenté de voir le jour et sont demeurés dans l ombre. On peut prédire que le GIF et le JPG ont un bon avenir devant eux et demeureront encore longtemps des piliers du Web. Le PNG se taillera peut-être une place avec la venue d un nouveau IE qui supporterait la transparence. Le PDF est là pour rester aussi. Peut-être va-t-il devenir un standard homologué par le W3C ou une autre instance décisionnelle? Ça reste à voir. Le W3C va peut-être pencher plus vers la version SVG Print 13

14 c. Conclusion. Le domaine de l image sur le Web a subi de multiples bouleversements depuis les 5 dernières années à l image du réseau lui-même Malgré tout, on remarque que ce sont les pionniers qui sont toujours en place. Le Web n est pas un médium d imagerie. Il est limité et diffi cile, avec les normes actuelles, d avoir des images de qualité en respectant tous les standards. Références : Goulet, Thierry, Initiation au traitement d images, 2002, 43 p. 14