Section I Comparaisons Gif/Jpeg

Les Options d'enregistrement. Pour les options de prévisualisation, penser dans les préférences de Photoshop à désactiver Icône, Aperçu et taille réelle, ou au moins vous laisser le choix au moment de l'enregistrement. Icône: associe au fichier une icône de prévisualisation qui est affichée au niveau du bureau . Aperçu: affiche une image de prévisualisation dans la zone de dialogue Ouvrir de Photoshop lorsque l'on sélectionne le fichier.   Les préférences ayant étés définies comme au dessus, la zone de dialogue Enregistrer fait apparaître les options qui peuvent être ajoutées au fichier. A noter le poids en ko que représente l'icone de prévisualisation ainsi que l'aperçu dans l'ensemble du fichier. L'original au format Photoshop, que l'on ne peut pas voir à l'aide d'un navigateur, mais que vous pouvez manipuler (Dég2coul) pèse 83 ko avec Icône et aperçu cochées. Alors que ce même fichier ne pèse plus que 66 ko avec les options décochées. L'icône générée par photoshop étant alors beaucoup plus légère (2 ko).     Ce soucis dans la gestion des fichier est particulièrement importante lorsque l'on veut économiser au maximum l'espace disque. Par contre quelque soient les options sélectionnées au moment de l'enregistrement, seuls les données d'une image intégrée dans une page html transite sur le réseau et pas l'information spécifique du système de gestion des fichiers. Avec Dég2coul, seuls les 64 ko auraient à transiter sur le réseau si l'on pouvait intégrer telle quelle cette image dans une page html.

Généralités et présentation des formats Gif et Jpeg. Une page Web est destinée à l'affichage sur des écrans très variés, à des définitions les plus diverses et dans différents espaces colorimétriques. D'où l'intérêt et l'importance de "prévisualiser" ses oeuvres sur plusieurs plates-formes, avant leur diffusion. Prenons l'exemple de la fidélité des couleurs. La nature hétérogène des systèmes reliés à Internet offre peu de garantie de respect de la colorimétrie. Par ailleurs, la plupart des postes reliés au Net n'affichent que 256 couleurs. Ajoutez à cela le fait que les navigateurs imposent leur propre palette sur les écrans 8 bits(256 couleurs), et vous avez tout compris. Tout au plus pouvez-vous espérer approcher un certain équilibre des couleurs, et ce après de multiples essais. Vous gagnerez ainsi à jouer sur le contraste et la luminosité de vos images, afin d'obtenir une meilleure diffusion sur tous les systèmes en faisant ressortir les informations pertinentes de vos images. La taille des images générées revêt une importance cruciale sur le Web. Tout le monde n'est pas relié à Internet par une ligne spécialisée "haut débit" (comme c'est le cas ici à l'ICES). L'explosion du Net s'explique en grande partie par la proportion toujours grandissante d'utilisateurs dotés d'accès à 14 400 bps et au mieux à 28 800 bps. D'où une règle élémentaire: réduisez au strict minimum la taille de vos fichiers. Pour référence, on estime qu'une image est téléchargée au rythme d'une seconde par kilo octet sur un modem à 14 400 bps. Il faut trouver un compromis raisonnable: Obtenir des images s'affichant correctement sur tous les écrans. Respecter les contraintes de débit inhérentes à Internet. Ne pas trop sacrifier aux critères de qualité.   Les formats d'image les plus répandus sur le Web ont justement été choisis pour leur capacité à tenir compte de ces contraintes. Aujourd'hui, la plupart des navigateurs graphiques intègrent la gestion des formats GlF (Graphics Interchange Format) et JPEG (Joint Photographie Experts Group). Tous deux comportent des algorithmes de compression destinés à accélérer le transfert et l'affichage des images, qui donnent leur spécificité propre à chaque format. Faq sur JPEG:http://www.cis.ohio-state.edu/hypertext/faq/usenet/jpeg-faq/top.html Sur le format PNG: http://www.cdrom.com/pub/png/ Des informations générales (une référence sur internet) sur tous les standard graphiques du Web: http://www.w3.org/Graphics/  Le format GIF: Il ne gère que 256 couleurs au plus. Il applique une compression sans perte. De par la nature de la compression utilisée, il est adapté aux images comportant de larges zones de couleurs similaires ou du dessin au trait. Par ailleurs, du fait que la plupart des systèmes reliés au Net fonctionnent encore en 8 bits, le format GIF est le plus usité. Il existe deux catégories de GIF: le format 87a appelé CompuServe GIF dans Photoshop et le format 89a. Le format 89a intègre un indice de transparence: en pratique, vous pouvez rendre transparente n'importe quelle couleur de l'image. Photoshop le gère à l'aide d'un module externe Export GlF89a. Les formats GlF87a et 89a peuvent tous deux être "entrelacés". L'entrelacement consiste à afficher l'image au fur et à mesure qu'elle se télécharge, par couches successives. La page HTML, dans laquelle se trouve une telle image, arrive à l'écran plus rapidement. Le Netsurfer peut commencer à lire le texte avant que l'image soit totalement affichée.  Le format JPEG: Le format JPEG accepte des images en 24 bits (millions de couleurs). Il opère une compression avec perte d'informations. Il s'avère particulièrement efficace sur les images de type photographique comprenant de subtiles nuances de couleurs ou des tons continus. Par ailleurs, contrairement au GIF, le format JPEG autorise différents niveaux de compression. Plus le niveau de compression est élevé, plus le degré de dégradation l'est aussi, mais plus petite est la taille par rapport au fichier d'origine. Enfin, sur ce type d'image, les ratios de compression JPEG par rapport au GIF peuvent être nettement plus élevés, pour une qualité égale, voire supérieure. Les fichiers JPEG sont compressés au moment où vous les enregistrez, et leur décompression s'effectue, en temps réel, au moment de l'affichage sur l'ordinateur du Netsurfer. Cette phase de décompression s'ajoute au temps de téléchargement du fichier. Conséquence: un fichier JPEG de petite taille mais contenant de nombreuses nuances peut s'avérer plus long à afficher qu'un fichier GIF plus "gros" incluant moins de couleurs. Les nouveaux formats graphiques candidats à l'Universalité. Un nouveau type de format JPEG a vu le jour: Progressive JPEG. Exploité par Netscape (disponible dans Photoshop), un tel fichier s'affiche à l'écran par strates successives, permettant ainsi d'avoir une idée de l'image au fur et à mesure qu'elle est téléchargée. Progressive JPEG est de fait un équivalent du GIF entrelacé. Candidat plus sérieux dans le monde des formats graphiques pour le Web: Portable Network Graphics (PNG). Ce dernier présente tous les avantages du GlF; mais avec un meilleur taux de compression, et surtout il accepte les fichiers 24 bits. Malheureusement, peu de navigateurs le gèrent.

Etude de la taille des fichiers pour une image en dégradé de couleur.    Dégradé à deux couleurs, classement par taille croissante de fichier. L'original au format Photoshop non compressé pèse 64 ko.   Jpeg basse résolution : 6,9 ko  Gif, couleur indexées sur 256 niveaux, palette adaptative sans diffusion : 9,3 ko Jpeg haute résolution : 10,8 ko Gif, couleur indexées sur 256 niveaux, palette système avec motif de diffusion : 13 ko  Gif, couleur indexées sur 256 niveaux, palette adaptative avec diffusion : 17,6 ko Vous pouvez visualiser l'original de l'image du nom de Dég3coul. Dégradé à trois couleurs, classement par taille croissante de fichier. L'original au format Photoshop non compressé pèse 38 ko. Jpeg basse résolution : 5,6 ko Gif, couleur indexées sur 16 niveaux, palette Web, non optimisé : 6,8 ko Gif, couleur indexées sur 16 niveaux, palette adaptative avec diffusion : 9,3 ko Gif, couleur indexées sur 16 niveaux, palette système, optimisé : 9,4 ko Gif, couleur indexées sur 16 niveaux, palette Web, optimisé : 9,4 ko Jpeg haute résolution : 10 ko Gif, couleur indexées sur 216 niveaux, palette Web avec diffusion : 14,2 ko Gif, couleur indexées sur 256 niveaux, palette système avec diffusion : 14,5 ko Gif, couleur indexées sur 256 niveaux, palette adaptative avec diffusion : 20 ko Etude de la taille des fichiers pour une image en aplats de couleur.  Vous pouvez visualiser l'original de l'image (21 ko au format Photoshop) du nom de Aplats. Gif, palette Web, sans diffusion : 11,4 ko vous pouvez tenter de réduire encore la taille.Chercher la démarche de sauvegarde permettant d'avoir la taille la plus faible (au moins sous la barre des 3 ko). Gif, palette Web, avec diffusion : 15,8 ko Malgré une taille de fichier plus importante, l'option diffusion génère un effet de motif dans les aplats. Jpeg, basse résolution : 14,1 ko Avec une taille de fichier encore plus importante, les aplats ont l'air sales. Ce format n'est pas à conseiller pour ce genre d'image. Etude de la taille des fichiers pour une image réaliste.  Vous pouvez visualiser l'original de l'image (qui pèse 180 ko au format Photoshop) du nom de Eléphant. Gif, palette Web, avec diffusion : 24,5 ko vous pouvez tenter de réduire encore la taille.Chercher la démarche de sauvegarde permettant d'avoir la taille la plus faible (au moins sous la barre des 3 ko). Gif, palette Web, sans diffusion : 13,5 ko   Gif, palette adaptative, avec diffusion : 41 ko Gif, palette adaptative, sans diffusion : 37 ko Jpeg, haute définition : 45 ko Jpeg, basse définition : 4,5 ko A titre de conclusion.  Type d'image Mode de couleur Format de compression à priori le mieux adapté. Aplats colorés Couleurs indexées GIF ou Export GIF 89a Tons continus (images réalistes) RVB ou niveaux de gris JPEG Dégradé RVB ou niveaux de gris JPEG Niveaux de gris Niveaux de gris ou couleurs (gris) indexées GIF ou Export GIF 89a Noir et blanc Bitmap après conversion en niveaux de gris GIF ou Export GIF 89a

Section II L'enregistrement Gif/Jpeg

Enregistrement au format Jpeg.
Le format Jpeg travaille avec des images 24 bits et de manière optimisée avec des images en mode RVB. Le format Jpeg est disponible dans la boite de dialogue enregistrement de photoshop. Après avoir cliqué sur enregistrer, il apparaît les options de compression. Le curseur indique le degrés de compression. Format : choisir de base optimisé. A partir de là il essayer basse moyenne et haute résolution et visualiser le résultats en ré ouvrant les fichiers. En fonction du résultat, on peut affiner le degrés de compression.         Attention le Jpeg progressif n'est pas reconnu par tous les navigateur, par contre le format de base optimisé lui est reconnu par IE et Netscape
L'indexation des couleurs.
On peut être amené à choisir un type de sélecteur de couleur dans Préférences. Par défaut celui-ci est le sélecteur Photoshop. Lorsque l'on choisi le Type Apple, on peut utiliser PANTONE Internet Color System, qui présente un nuancier de 216 couleurs spécialement adaptées au Web. Il n'est pas indispensable d'effectuer cette opération dans photoshop du fait qu'il est possible de charger un nuancier directement au niveau de la palette Nuancier ( voir plus loin ).   Voici comment apparaît le sélecteur PANTONE ICS:
Les principales palette de couleurs (nuanciers ). Vous pouvez charger une palette de couleur en cliquant sur le triangle noir en haut et à droite de la palette. Vous pouvez charger la palette Web qui correspond à l'ensemble des nuances du sélecteur PANTONE ICS. A noter que la palette système du macintosh contient exactement la palette Web plus 10 nuances dégradées de rouge, de vert, de bleu et de gris et il en est ainsi depuis la création du Macintosh !
Le mode Couleurs indexées. Passer en Mode couleurs indexées uniquement au dernier moment, après avoir travaillé votre image en milliers ou millions de couleurs.	Vous avez le choix : Exacte: n'apparaît que si l'image de départ possède au plus 256 couleurs. Toutes les couleurs de l'image sont alors présentent dans la palette. Système: crée une table des couleurs basée sur celle du système utilisé, c'est une palette de 256 couleurs Web: C'est la palette 8 bits multiplateforme par excélence, à utiliser sans modération. Uniforme: n'a que peut d'intérêt pour le propos Adaptative: crée une table des couleurs en fonction de celles de l'image initiale: un bon compromis. A noter que Palette Autre vous permet de charger une palette particulière. Vous pouvez en fonction du choix de palette choisir le nombre de couleur à gérer. La simulation augmente la taille des fichiers, mais améliore le rendu des dégradés et des images réalistes. Attention n'utiliser pas l'option simulation lorsque vous avez des aplats de couleurs, vous risqueriez de les rendre granuleux.
Une fois l'image convertie dans le mode couleurs indexées, vous pouvez visualiser la palette utilisée ou générée(pour palette adaptative) lors de l'indexation et profiter éventuellement de l'occasion pour enregistrer la palette en vue d'une utilisation future. La palette représentée correspond à la palette adaptative générée à partir du dégradé Dég2coul.
L'enregistrement au format GIF. Trois méthodes en partant d'une image en couleur dans le mode RVB: RVB -> Export GIF89a RVB -> Mode Couleurs indexées -> Fichier Enregistrer sous: CompuServe Gif (GIF87a) RVB -> Mode Couleurs indexées -> Export GIF89a.
RVB -> Export GIF89a	L'indexation des couleurs se fait directement à l'exportation, on retrouve les mêmes options que la boite de dialogue Couleurs indexées. L'entrelacement permet à l'image d'être affichée dans son ensemble avant que le fichier soit complètement chargé. Les représentations de l'image apparaissent à des résolutions de plus en plus grande jusqu'à la résolution de l'image réelle.
On peut, en cliquant sur Voir, prévisualiser l'image compressée. La palette des couleurs indexées utilisées est affichée en même temps.
RVB -> Mode Couleurs indexées -> Fichier Enregistrer sous: CompuServe Gif (GIF87a) Il suffit de choisir le format CompuServe GIF et d'indiquer si l'on veut l'image entrelacée ou non.
RVB -> Mode Couleurs indexées -> Export GIF89a.	Après avoir indexé les couleur de l'image Applats, on a réalisé l'export en GIF89a. On peut a l'aide de la pipette (+ ou -) sélectionner les couleurs à rendre transparentes au niveau de l'image, ici on a sélectionné la couleur orange la seule présente dans la palette.
Masque de transparence. Il n'existe que pour le format GIF89a ou PNG.Voici ce que cela donne à partir du fichier Applats.   On a crée une couche alpha a partir d'une sélection, cette couche qui va nous servir de masque au moment de l'exportation en GIF89a est conservé après le passage au mode indexé             On sélectionne la couche N°2 comme masque de transparence ( les zones noires sont masquées, les zones blanches font apparaître l'image). Voici en dessous le résultat après exportation:
Nature du masque de transparence dans Export GIF89a. Un dégradé du noir vers le blanc a été créé à l'intérieur de la zone sélectionnant les aplats de couleur et ceci sur la couche alpha N°2. On a récupéré la sélection correspondant à cette couche N°2 et la zone sélectionnée apparait délimitée par les pointillés. A noter que le contour ne fait apparaître que la zone sélectionnée à au moins 50%, ce qui explique que le dégradé ne soit pas entièrement entouré. Rappel, les zones blanches sont les zones sélectionnées à 100% et les noires sont celles masquées à 100%, un gris de x% correspond à une zone sélectionnée à x%. Avec le format Gif89a et Export GIF89a, le masque qui va servir de transparence pour le fichier gif ne correspond pas exactement à la couche N°2. Ce masque correspond à la zone de l'image sélectionnée à au moins 50 %, c'est donc la zone défini en pointillé lorsque l'on récupère la sélection à partir de la couche N°2. En d'autres termes, le masque qui va servir dans l'exportation en gif est la transcription noir et blanc de la couche N°2 avec seuil à 50%.