Comment optimiser dans ImageReady?



Documents pareils
Création de maquette web

Chapitre 22 Optimisation pour diffusion à l'écran, pour le web

L espace de travail de Photoshop

Adobe Photoshop. Bonnes pratiques pour une utilisation professionelle CHAPITRE 7

Adobe Illustrator Logiciel de dessin vectoriel et de Cartographie Assistée par Ordinateur

Utiliser le logiciel Photofiltre Sommaire

Leçon N 5 PICASA Généralités

Initiation à linfographie

GESTION DU LOGO. 1. Comment gérer votre logo? Format de l image Dimensions de l image Taille de l image 9

TD : Codage des images

Afin d accéder à votre messagerie personnelle, vous devez vous identifier par votre adresse mail et votre mot de passe :

FICHIERS ET DOSSIERS

Pop-Art façon Roy Liechtenstein

Optimiser les images pour l affichage sur votre site

Cours de numérisation sur Epson Perfection

PR OC E D U RE S D E B A S E

Guide de l utilisateur Mikogo Version Windows

Création et utilisation de formulaire pdf

Tutoriel. Votre site web en 30 minutes

COPY. Picture Style Editor Ver. 1.4 MODE D EMPLOI. Logiciel de création de fichiers de style d image. Contenu de ce mode d emploi

Manuel d utilisation de la messagerie.

Correction des Travaux Pratiques Organiser son espace de travail

Catégories de format d'optimisation

1.1 L EXPLORATEUR WINDOWS

Réalisation d un diaporama en haute définition avec. Adobe Premiere Elements 3.0 ou Adobe Premiere Pro 2.0. Encodage pour Internet

Numérisation. Copieur-imprimante WorkCentre C2424

2013 Pearson France Adobe Illustrator CC Adobe Press

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE

Lightroom. Chambre noire numérique. Organisation. Lightroom Catalog.lrcat. Lightroom Catalog Previews.lrdata 2005, 2006, 2007

Avant-propos FICHES PRATIQUES EXERCICES DE PRISE EN MAIN CAS PRATIQUES

Guide Numériser vers FTP

Découvrez Windows NetMeeting

Choisir entre le détourage plume et le détourage par les couches.

Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation.

Réalisez votre propre carte de vœux Éléctronique

Traitement numérique de l'image. Raphaël Isdant

PHPWEBSITE -Tutoriel image

Sommaire. Images Actives Logiciel libre développé par le CRDP de l académie de Versailles 2 Rue Pierre Bourdan Marly le Roi

Création d une SIGNATURE ANIMÉE avec PHOTOFILTRE 7

SOMMAIRE. 1. Connexion à la messagerie Zimbra Pré-requis Ecran de connexion à la messagerie 4

Swisscom Webmail - mode d emploi

Manuel d utilisation du web mail Zimbra 7.1

Carte encadrement glitter

1. Avoir un fichier InDesign correct :

WORDPRESS : réaliser un site web

Indiquer l'espace libre sur le disque dur

26 Centre de Sécurité et de

cbox VOS FICHIERS DEVIENNENT MOBILES! INTERFACE WEB MANUEL D UTILISATION

Paramètres d accessibilité des systèmes d exploitation Windows et Mac

"CREEZ VOTRE SITE WEB ET VOTRE BLOG AVEC WORDPRESS"

PRISE EN MAIN D ILLUSTRATOR

Présentation du tableau blanc interactif Interwrite

L alternative, c est malin 1. Comment faire plein de choses pour pas cher sur MacIntosh

Manuel d utilisation NETexcom

CAPTURE DES PROFESSIONNELS

Fiche Mémo : Options d accessibilité sous Windows et Internet Explorer 5

Logiciel ArpentGIS-PC Guide de l utilisateur

Mes premiers diaporamas avec Open Office Impress?

NOTICE D UTILISATION

iphoto Premiers contacts Découvrez iphoto et apprenez à importer et organiser vos photos et à créer un diaporama ou un livre.

Création d un document PublishView

GUIDE DE DÉMARRAGE. SitagriPro Infinite FINANCEAGRI. Un service. c o r p o r a t e

Édu-groupe - Version 4.3

imovie 11 Créer un projet Menu / Fichier / Nouveau projet... Choisir le format : Standard (16/9). Importer des «!plans!» 1.

Your Detecting Connection. Manuel de l utilisateur. support@xchange2.net

Guide de correction et d optimisation des images en vue de leur publication sous Marcomedia Contribute. Logiciel utilisé : Adobe PhotoShop 7

Dans l Unité 3, nous avons parlé de la

COURS BARDON - EXCEL 2010

Button Manager V2 Guide de l utilisateur

Photoshop Séquence 4 - Créer une image de taille personnalisée taille


Gestion des documents avec ALFRESCO

Logiciel SuiviProspect Version Utilisateur

FORMATION EXCEL 2010 Groupe LUCAS LOGICIA

Prendre en main le logiciel ActivInspire 1.4

Connecteur Zimbra pour Outlook 2007 et 2010 (ZCO) w

L ORDINATEUR FACILE D ACCÈS!

Silhouette Studio Leçon N 2

Générer un PDF avec polices incorporées

:...2 I.6. :... 2 I.7. :... 2 I.8. :...3 I.9. :... 3 I.10. :... 3 II. 4 II.1.

La Clé informatique. Formation Excel XP Aide-mémoire

Premiers pas avec NetSupport SCHOOL

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE

WINDOWS 8. Windows 8 se distingue par la présence de 2 interfaces complémentaires :

Numbers sur ipad. Atelier Formation Numbers sur ipad. [Notes extraitres de l'aide en ligne]

Tutoriel de FastStone Image Viewer

GUIDE Excel (version débutante) Version 2013

Access 2007 FF Access FR FR Base

LES NOUVEAUTÉS DE ARCON 15 PRO

INTRODUCTION AU CMS MODX

Les calques : techniques avancées

Utilisation du client de messagerie Thunderbird

Création d un fichier html depuis PowerPoint dimanche 11 mai 2008

Contenu Microsoft Windows 8.1

Comment utiliser le logiciel Interwrite Workspace?

Internet Marketing Manager

Création WEB avec DreamweaverMX

J'installe FastStone Image Viewer. Installer le logiciel Découvrir Paramétrer

TP SIN Traitement d image

Open-Sankoré. Mise en route. Guide utilisateur Février 2013 NTICE (E. S.)

Transcription:

L optimisation des éléments graphiques et la création de la page Web 243 Comment optimiser dans ImageReady? Avec ImageReady, l optimisation d un fichier pour le Web est plus performante qu avec Photoshop. Elle comporte plusieurs phases (dont certaines sont communes aux deux programmes) : 1. Choisir un affichage. 2. Spécifier à qui s adresse l optimisation : à l image entière ; à une ou plusieurs tranches ; à un état de transformation par souris sélectionné dans la palette Transformation 3. Définir l optimisation : choisir un format d image ; spécifier des critères d optimisation de l image ; comparer le rapport poids/qualité à l aide de plusieurs prévisualisations. 4. Lancer l enregistrement du fichier (menu Fichier/Enregistrer une copie optimisée). L affichage de l image optimisée La prévisualisation s effectue directement dans la fenêtre du document. Vous pouvez spécifier un affichage de deux ou de quatre vignettes ou encore n afficher que le document optimisé en cliquant sur l onglet correspondant en tapant une ou plusieurs fois apple Y [Ctrl Y], vous passez d un onglet au suivant. Le document original seul. Avec plusieurs vignettes, il est possible de comparer plusieurs formats ou les mêmes mais avec des paramètres différents.

L optimisation des éléments graphiques et la création de la page Web L optimisation des éléments graphiques et la création de la page Web Comment optimiser un fichier? L optimisation s effectue différemment dans Photoshop et ImageReady. Cependant, dans les deux cas, les critères d optimisation sont identiques. Dans ImageReady, l optimisation se règle dans une palette séparée (Optimiser) ; dans Photoshop, c est directement dans la fenêtre d enregistrement qu elle se paramètre. Comment optimiser dans Photoshop? L optimisation s effectue par la commande Enregistrer pour le Web du menu Fichier. Le haut de la fenêtre comporte quatre onglets qui permettent de visualiser respectivement l original seul, le document optimisé seul ou plusieurs vignettes (original et optimisés). Ces dernières options permettent de mieux contrôler le changement d aspect du document. À sa gauche, la fenêtre comporte un outil de sélection de tranche pour effectuer une optimisation localisée qui se paramètre dans la partie droite. Enfin, le bas de la fenêtre indique (s il y a plusieurs vignettes) différents renseignements dont le poids du fichier et son temps de téléchargement. Un clic sur l icône permet de visualiser dans un navigateur avant de valider l optimisation. On peut optimiser par tranche. La fenêtre d enregistrement pour le Web. En affichant plusieurs vignettes, on peut comparer (aspect et poids).

244 Design Web avec Photoshop 6 Choisissez le type du modem. Si vous avez choisi la prévisualisation multiple, le bas de chaque vignette vous indiquera le temps de téléchargement (pour le modem désigné dans le menu local ( ) du bas de la fenêtre du document). L image peut également être prévisualisée telle qu elle apparaîtra sur différentes plates-formes, et cela, compte tenu du tramage (Dither) du navigateur (c est-à-dire s il fonctionne sur un écran 8 bits). Ces différents types d affichage s obtiennent soit directement sur l image, avec le menu contextuel affiché par Ctrl clic [clic droit], soit par le sous-menu Aperçu du menu Affichage, soit encore au clavier en tapant une ou plusieurs fois apple Y [Ctrl Alt Y] (et apple Y [ Ctrl Y] pour le tramage du navigateur). On choisit la plate-forme du navigateur sans ou avec le tramage du navigateur. Le poids de la tranche. Remarque : dans ImageReady, quand vous travaillez le document pour créer une animation, par exemple, il est conseillé de n afficher que la fenêtre de l original. Sinon, chaque modification du document entraînera une régénération de la version optimisée, ce qui risque de ralentir le travail ; cependant, elle peut être interrompue en décochant l option Régénération auto du menu de la palette Optimiser l icône le signalera. L affectation de l optimisation Si vous souhaitez régler l optimisation globalement avant de la personnaliser pour certaines tranches, vous devez soit désélectionner les tranches, soit toutes les sélectionner cette opération s effectue au clavier en tapant respectivement apple D [Ctrl D] ou apple A [Ctrl A], à condition que l outil Tranche soit actif.

L optimisation des éléments graphiques et la création de la page Web 245 En revanche, si une tranche est sélectionnée, l optimisation ne s applique qu à cette tranche (et à celles auxquelles elle est liée). Le poids indiqué en bas de la fenêtre du document correspond alors uniquement au poids de cette tranche. On retrouve cette indication dans la palette Tranche (à condition que l onglet Optimisé ou 2 vignettes soit actif). Ces indications ne concernent que cette tranche Si l optimisation ne doit concerner qu un état particulier d une tranche (Par-dessus, par exemple), vous devez l activer dans la palette Transformation par souris. on les retrouve ici. Remarque : dans la fenêtre Optimisé, si vous testez la page (en ayant cliqué sur l icône ), chaque fois que vous passez sur une tranche possédant une transformation par souris, la fenêtre du document affiche le contour de cette tranche et indique en bas de la fenêtre son poids (pour l état Par-dessus). Quand on passe sur une tranche avec rollover, elle s active et le poids de l état Par-dessus s affiche. Où s effectuent les réglages d optimisation? L optimisation se prépare dans la palette Optimiser (et dans la palette Table des couleurs pour le format GIF). Des paramètres devront être spécifiés, tels que le format : GIF, avec différents échantillonnages de couleurs ; JPEG, avec différents taux de compression ; ou encore, PNG-8 et PNG-24 avec différentes caractéristiques d optimisation. Les deux aspects de la palette Optimiser.

246 Design Web avec Photoshop 6 On enregistre une optimisation par ce menu. La liste des paramètres d optimisation. Remarque : les formats PNG ne sont pas reconnus par tous les navigateurs Internet car ils nécessitent un plug-in. La partie haute de la palette comporte une zone de paramètres prédéfinis ; vous pouvez y choisir celui qui vous convient en pressant sur le bouton [Sans nom] (une liste s affichera) ou effectuer votre propre réglage puis l enregistrer à l aide du menu local de la palette pour le faire figurer dans la liste précédente et pouvoir le réutiliser plus tard. Quels sont les critères pour l optimisation? Pour les images destinées à être publiées dans une page Web, il faut trouver un compromis entre qualité de l image, quantité de couleurs affichées et poids du fichier afin d assurer une bonne rapidité d apparition de l image. Pour obtenir un fichier léger, il doit y avoir une compression; celle-ci peut se faire de deux façons. La compression des couleurs (GIF) Elle garde tous les détails de l image. En plus d une compression LZW, le document est converti au mode Couleurs indexées et prend donc un échantillonnage des couleurs de 8 bits (256 couleurs au maximum). L image est enregistrée au format GIF. La compression des données (JPEG) Cette compression conserve toutes les couleurs de l image, qui reste donc dans le mode RVB avec un codage des couleurs sur 24 bits. En revanche, il y a une compression des données qui provoque une détérioration de l image (perte des petits détails). L image est enregistrée au format JPEG. Le format PNG constitue une alternative performante aux solutions précédentes mais il n est pas reconnu par tous les navigateurs et nécessite pour l instant un plug-in ; en revanche, il pourra être utilisé dans des productions de type Flash. Comment choisir le format du fichier? La première étape du réglage consiste à choisir le format d enregistrement GIF ou JPEG. La page suivante vous indique quelques avantages de chacun de ces formats. Cependant, en dehors de quelques impératifs, il vous suffit de choisir dans l un des aperçus du document affiché avec plusieurs vignettes le meilleur compromis entre l aspect et le poids du fichier.

L optimisation des éléments graphiques et la création de la page Web 247 Quels sont les atouts du format GIF? Il s adresse à certains types d images, telles que : les images comportant peu de couleurs ; les images avec de grandes zones d aplat de couleur ; les images ayant des détails (tels les logos, du texte) qui risqueraient de disparaître avec une compression JPEG ; les images dans lesquelles des zones transparentes doivent être définies quel que soit l arrière-plan ; les images qui seront utilisées pour créer une animation GIF ; et bien sûr toutes les images dont l aspect n est pas satisfaisant avec le format JPEG. Quels sont les atouts du format JPEG? Il s adresse à certains types d images, telles que : les images comportant beaucoup de couleurs (avec des dégradés ou des effets d ombre portée étendue) ; les images de type photographique (image à tons continus) ; toutes les images dont le poids devient trop important en GIF. La seconde étape consiste, selon le format sélectionné, à définir la compression des couleurs (format GIF) ou la compression des données (format JPEG). Nous allons étudier chacun des cas. Comment paramétrer l optimisation GIF? L enregistrement d un document avec le format GIF s accompagne toujours d une compression des couleurs sauf si le document était initialement dans un des modes ayant un échantillonnage de 8 bits ou moins, tels que : Bitmap, Niveaux de gris, Bichromie ou Couleurs indexées. Un document RVB peut posséder jusqu à 16 millions de couleurs mais, dans le document GIF, ce nombre doit être réduit à 256 au maximum (échantillonnage de 8 bits). Les couleurs sont alors indexées dans une table des couleurs (ou palette) que vous pourrez éventuellement enregistrer pour la réutiliser ultérieurement avec d autres images. Quelle table des couleurs choisir? Photoshop et ImageReady mettent à votre disposition des algorithmes de réduction des couleurs (ils sont au nombre de huit). Chacun d eux sélectionne les couleurs à conserver en fonction d un critère particulier pour générer une table des couleurs. La fenêtre de paramétrage pour le format GIF. Les algorithmes de constitution de la table des couleurs.

248 Design Web avec Photoshop 6 Tables dynamiques. Tables fixes. Les tables dynamiques et les tables fixes Avec les trois premiers algorithmes de la liste (Perception, Sélective et Adaptative), les couleurs sont prises dans la gamme RVB (16 millions de couleurs). Elles varient de façon dynamique en fonction de l image : on parle ici de tables dynamiques. Les autres tables (Web, Mac OS ) ne renferment que des couleurs fixes; c est-à-dire que la gamme des couleurs disponibles est limitée et constante. La table générée par l algorithme ne contiendra que les couleurs de l image appartenant à cette gamme fixe. Il s agit, dans ce cas, de tables fixes. Pour chacune d elles, le menu Couleur possède une option, Auto, qui dénombre, dans les couleurs de l image, celles qui appartiennent à la gamme et supprime les autres. La table Perception Les couleurs conservées dans la table sont celles auxquelles l œil est le plus sensible. La table Sélective C est l option par défaut. La table des couleurs obtenue est voisine de celle de l option précédente, mais, ici, on privilégie les larges zones de couleurs et les couleurs Web. Cette table des couleurs produit habituellement des images dont les couleurs sont fidèlement restituées. La table Adaptative La table des couleurs est créée à partir d une combinaison des couleurs de l image les plus couramment utilisées. Les couleurs Web sont marquées d un point blanc. La table Web La table ne contient que les 216 couleurs communes aux palettes 8 bits de Windows et Mac OS. Ce type de palette vous assure un affichage identique sur les différentes plates-formes sans tramage sur un écran 8 bits. Remarque : l utilisation de la table Web peut créer des fichiers plus volumineux mais elle permet d éviter le tramage sur les navigateurs. Les tables système : Mac OS et Windows Elles utilisent les 256 couleurs des systèmes d exploitation. Si l image renferme moins de 256 couleurs, les nuances inutilisées sont supprimées.

L optimisation des éléments graphiques et la création de la page Web 249 La table Niveaux de gris L image résultante est convertie en niveaux de gris. La palette ne comporte que des nuances de gris présentes dans l image. La table Noir et blanc L image résultante est convertie au mode bitmap. Les pixels sont blancs ou noirs. L image a un échantillonnage de 1 bit. Par la suite, il sera possible de remplacer le noir et le blanc par d autres couleurs à partir de la palette Table des couleurs. De gauche à droite : Mac OS, Windows, Niveaux de gris et Noir et blanc. Comment pondérer la table des couleurs? Par défaut, la table des couleurs est créée à partir de tous les pixels présents sur l image. Dans la version 6 de Photoshop et par conséquent la version 3 d ImageReady, vous pouvez privilégier une zone particulière de l image de manière que la table des couleurs renferme davantage de couleurs de cette zone. Pour cela, vous devez soit faire la sélection de la zone contenant les pixels que vous jugez les plus importants, soit créer une couche alpha à partir de cette sélection (cette couche pourra être générée lors de l optimisation directement dans la palette Optimiser). C est en cliquant sur l icône à droite du nom de l algorithme que vous pourrez sélectionner la couche alpha (ou la créer) et obtenir ainsi une table des couleurs définie sur les pixels les plus importants. Fichier : photo_1.psd dans 08_optimisation Une fois optimisée, la table des couleurs contient des nuances des deux objets (citron et bouteille). Ce document a été enregistré dans Photoshop avec deux couches alpha.

250 Design Web avec Photoshop 6 Pour pondérer la table, on clique ici et on choisit la couche (ou une sélection s il n y a pas de couche) la table et l image sont modifiées et comportent davantage de couleurs de la zone privilégiée par la couche. En cliquant à nouveau, on peut choisir une autre couche la table et l image sont modifiées en conséquence avec les nouvelles couleurs prises sur la zone désignée (le citron). Comment gérer les couleurs dans la table GIF? Une fois le type de table des couleurs spécifié, vous pouvez modifier leur nombre et leur composition. Comment modifier le nombre de couleurs? Lorsque vous sélectionnez une table dynamique (Perception, Sélective, Adaptative), c est à vous de spécifier le nombre de couleurs retenu. Plus il est élevé, mieux les couleurs sont restituées, mais plus le fichier est lourd; aussi ne faut-il pas hésiter à le réduire.

L optimisation des éléments graphiques et la création de la page Web 251 Avec les tables des couleurs fixes (Web, Système, Niveaux de gris et Noir et blanc), le nombre des couleurs s adapte automatiquement ; en effet, seules sont conservées les couleurs de l image présentes dans la palette désignée. L option Auto est activée dans la rubrique Couleurs et le nombre de couleurs retenu est indiqué en bas de la palette Couleurs. Avec une table fixe, le nombre de couleurs est déterminé automatiquement. Quelle que soit la table choisie, le réglage peut être affiné en saisissant le nombre voulu compris entre 2 et 256 ou en agissant sur les petites flèches (avec, les valeurs s incrémentent de 10). Si le nombre de couleurs devient trop faible, des bandes colorées peuvent apparaître sur l image ; pour les atténuer, vous pouvez simuler les couleurs disparues par un tramage des couleurs de la table (voir plus loin : le tramage). Les couleurs peuvent subir un certain nombre de manipulations : verrouillage, alignement sur le Web, changement de composition Ces manipulations se réalisent dans la palette Table des couleurs. Avant de les manipuler, vous pouvez utiliser le menu local pour trier les couleurs de manière à, par exemple, mieux identifier celles qui sont les plus utilisées dans l image (option Popularité). On peut réduire le nombre de couleurs. Comment verrouiller certaines couleurs? Avant de réduire le nombre de couleurs, vous pouvez en verrouiller certaines dans la table afin qu elles ne disparaissent pas suite à une réduction et éviter ainsi leur simulation par d autres.

252 Design Web avec Photoshop 6 Pour verrouiller des couleurs, commencez par les sélectionner soit dans la palette Table des couleurs en cliquant dessus (avec si elles sont consécutives et apple [Ctrl] dans le cas contraire), soit directement sur l image optimisée avec la pipette (la touche permet de sélectionner une plage de couleurs) éventuellement, vous pouvez aussi les sélectionner ou les trier par le menu local. Cliquez ensuite sur l icône en bas de la palette Table des couleurs. On sélectionne les couleurs. On verrouille : elles apparaissent marquées. Comment obtenir des couleurs Web sécurisées? La table Web n utilise que des couleurs Web. Avec les autres tables, vous pouvez convertir certaines couleurs en couleurs Web. Cette opération s effectue soit en spécifiant le pourcentage de couleurs à convertir dans le menu local Aligner sur Web de la palette Optimiser, soit en sélectionnant la couleur à convertir dans la table et en cliquant sur l option dans la table, toutes les couleurs Web sécurisées sont marquées d un point blanc. Remarque : le nombre total de couleurs peut se trouver réduit si plusieurs nuances s alignent sur une même couleur Web. Ici, la conversion a été programmée ; certaines couleurs disparaissent. Comment changer la composition des couleurs? Vous pouvez aussi changer la composition d une couleur par un double-clic sur sa case d échantillon dans la table : cela fait apparaître le sélecteur des couleurs La couleur redéfinie apparaîtra verrouillée et marquée d un point noir. Remarque : cette possibilité peut être utile pour créer un effet particulier en remplaçant le noir et le blanc d une image 1 bit.

L optimisation des éléments graphiques et la création de la page Web 253 Avec cette table, on a converti cette image en 1 bit. On a remplacé le noir et le blanc de l image. Comment atténuer la disparition de certaines couleurs? C est par l option Tramage de la palette Optimiser (d Image- Ready) ou de la fenêtre d Enregistrer pour le Web (de Photoshop) que l on peut pallier la disparition de certaines couleurs. En effet, ce tramage permet de simuler les couleurs de l image absentes de la table des couleurs. Quatre options sont possibles : Aucun tramage n effectue aucune simulation. Diffusion utilise un motif aléatoire. Les effets de tramage sont diffusés sur les pixels adjacents. Ce type de tramage peut être pondéré par l utilisation d une couche alpha (voir plus loin). Motif simule les couleurs en appliquant un motif géométrique qui convient particulièrement bien aux palettes Web et système (Mac OS et Windows). Ce tramage ainsi que le tramage Bruit produisent des fichiers plus lourds. Bruit applique également un motif aléatoire mais sans diffuser le motif sur les pixels adjacents. L image apparaît granuleuse. Photoshop le recommande dans le cas d utilisation de tranches; il permet d assurer une meilleure continuité entre les différentes tranches. Les types de tramage. Remarque : dans le cas d un tramage par diffusion, il est possible de définir un pourcentage de tramage, ce qui permet de réduire le poids du fichier.

254 Design Web avec Photoshop 6 8,947 Ko 9,889 Ko L image originale. Aucun tramage (16 couleurs). Tramage Diffusion. 10,54 Ko 10,78 Ko 9,889 Ko Tramage Motif. Tramage Bruit. Tramage Diffusion à 80 %. Comment réduire davantage la taille du fichier GIF? L option Perte de qualité permet également de réduire la taille du fichier grâce à une compression qui supprime des pixels de l image (compression avec perte). Avec la plupart des illustrations, vous pouvez appliquer une valeur de 5 à 10 % (voire dans certains cas, jusqu à 50 %), sans que l image soit trop dégradée. La taille du fichier peut être réduite de 5 à 40 % grâce à cette option. 9,889 Ko 9,37 Ko 8,515 Ko Diffusion à 80 %, Perte 0. Perte 15. Perte 35.

L optimisation des éléments graphiques et la création de la page Web 255 Remarque : vous ne pouvez pas utiliser l option Perte de qualité si vous avez coché l option Entrelacé, ni avec les tramages Bruit ou Motif. Comment pondérer l optimisation du fichier GIF? Pour les deux options, Tramage (de type Diffusion) et Perte de qualité, vous pouvez, en cliquant sur l icône, définir différemment les réglages pour une zone précise de l image délimitée par une couche alpha que vous aurez préalablement créée ou par une sélection affichée sur l image. Les zones blanches de la couche correspondent aux valeurs les plus élevées de tramage et les zones noires aux valeurs les moins élevées ; pour la perte de qualité, c est l inverse (les curseurs l indiquent). 8,623 Ko Avant pondération : Tramage = 90 % et Perte de qualité =40. 8,173 Ko 8 Ko On a réglé le tramage à 90 % sur les zones blanches et à 25 % sur les zones noires de la couche. En plus des paramètres précédents, on a réglé la perte à 38 % sur les zones blanches et à 90 % sur les zones noires. Au total, le fichier est passé de 9,9 Ko à 8 Ko. Quelles sont les options d affichage de l image GIF? Trois options, Entrelacé, Transparence et Détourage, permettent de choisir la façon dont l image va s afficher dans le navigateur Web.

256 Design Web avec Photoshop 6 Le détourage réel ou simulé Si vous cochez l option Transparence, tous les pixels transparents que comporte l image laisseront voir l arrière-plan de la page Web ou du navigateur : l image est donc réellement détourée. 1. La couleur de la case Détourage est utilisée comme couleur d arrière-plan de la page HTML. Si l option Transparence n est pas cochée, les pixels transparents deviennent blancs ou prennent la couleur spécifiée dans la case Détourage1. Un menu local permet d en choisir une autre parmi le blanc, le noir ou une couleur à désigner soit par prélèvement sur l image avec la pipette, soit à l aide de la palette locale. L image possède un détourage simulé qui est lié à une couleur d arrière-plan. Remarque : l option Sans de la case Détourage s utilise conjointement à l option Transparence. Elle permet d obtenir un détourage lissé en rendant complètement transparents tous les pixels d opacité inférieure à 50 % et opaques tous les pixels d opacité supérieure à 50 %. Transparence désactivée. Transparence avec Détourage blanc et Détourage Sans. Si un objet détouré possède une ombre portée, l option Sans ne convient pas. Il est préférable dans ce cas de trouver une couleur de détourage voisine de celle de la page sur laquelle l objet sera placé. Transparence avec Détourage de couleur voisine de celle du fond de page.

L optimisation des éléments graphiques et la création de la page Web 257 L entrelacement des images GIF L option Entrelacé permet d obtenir un affichage progressif de l image au fur et à mesure qu elle est téléchargée par le navigateur. Ceci est particulièrement utile si l image est de grande taille : le temps de téléchargement paraît plus court. L entrelacement alourdit le fichier, d autant plus qu aucune perte de qualité ne peut être paramétrée. Comment optimiser une animation GIF? Quand vous réalisez une animation GIF, il est souvent indispensable de cocher l option Transparence, même si aucun effet de détourage n est nécessaire dans les images de l animation. Cette option permet juste d assurer une meilleure optimisation de l animation. Comment paramétrer l optimisation JPEG? Les options de ce format sont moins nombreuses : on distingue principalement le taux de compression, l atténuation, le détourage et diverses options d affichage. Quelle compression choisir? Un menu local contient les différents taux exprimés en niveau de qualité du fichier (Bas, Moyen, Haut, Maximum). La case Qualité permet d affiner le réglage en entrant une valeur comprise entre 0 (très basse qualité) et 100 (qualité maximale). En général, selon l image, des valeurs entre 10 et 30 donnent un fichier de taille modérée pour une qualité satisfaisante. Dans notre exemple, le poids du fichier, comparativement au format GIF utilisé précédemment, est plus faible mais la transparence a disparu. Les paramètres d optimisation pour le format JPEG. Les quatre niveaux de qualité. 8,688 Ko 7,036 Ko 5,177 Ko Qualité : 40 (Moyen). Qualité : 30 (Moyen). Qualité : 10 (Bas).

258 Design Web avec Photoshop 6 On peut parfois pallier ce problème en plaçant un calque contenant le même arrière-plan que la page Web selon les cas, les raccords sont parfois délicats. avant : 8,008 Ko après : 8,313 Ko! Comment pondérer la qualité avec une couche alpha? Si vous avez fait une sélection ou créé une couche alpha correspondant à des zones privilégiées, vous pouvez moduler la qualité en utilisant cette sélection ou cette couche. Pour cela, cliquez sur l icône à droite de la case Qualité. Une fenêtre vous permettra de définir la qualité (valeur Maximum) appliquée aux pixels correspondant aux zones blanches de la couche ainsi que celle affectée aux zones noires (valeur Minimum). Par défaut, la qualité 0 est attribuée aux zones noires de la couche (ici, le citron). Remarque : le gain en poids engendré par l utilisation de la couche alpha est moins important qu avec les paramètres du format GIF. Dans certains cas, il peut même y avoir une augmentation! Comment réduire le poids du fichier JPEG? L option Estomper (Atténuation dans Photoshop) permet de réduire le poids du fichier en créant un flou sur l image. Des valeurs de 0,1 à 0,4 sont recommandées ; au-delà, l image risque de devenir trop floue. 5,314 Ko 5,08 Ko 4,3 Ko Qualité : 15, Estomper : 0. Qualité : 15, Estomper : 0,2. Qualité : 15, Estomper : 0,4.

L optimisation des éléments graphiques et la création de la page Web 259 Comment simuler un détourage JPEG? Une image au format JPEG ne peut pas avoir de transparence comme le format GIF. Cependant, vous pouvez définir la couleur d arrière-plan qui, par défaut, est le blanc. Ce choix s effectue par un menu local Détourage1 qui propose le blanc, le noir ou une couleur à désigner soit par prélèvement sur l image avec la pipette, soit à l aide du nuancier de couleurs Web. 1. La couleur de la case Détourage est utilisée comme couleur d arrière-plan de la page HTML. Quelles sont les options d affichage de l image JPEG? En cochant l option Progressif, vous pouvez créer une image JPEG progressif, qui permet d afficher une version basse résolution de l image dans le navigateur tandis que l image complète est téléchargée. Selon les options définies dans les réglages des couleurs (menu Édition/Couleur de Photoshop), vous pouvez imbriquer un profil ICC dans l image JPEG de manière à obtenir des couleurs plus fidèles sur tous les ordinateurs qui utilisent des navigateurs avec un système de gestion des couleurs (tels qu Internet Explorer 5) ; cependant, le poids du fichier augmentera de quelques kilo-octets. Quels sont les autres formats d enregistrement? Le format PNG Ce format d enregistrement s applique aussi bien aux images RVB (24 bits) qu aux images à couleurs indexées. Pour les premières choisissez le format PNG-24; pour les secondes, le format PNG-8 (il reprend les options du format GIF). Le PNG (Portable Network Graphic) est un format qui constitue une alternative au format GIF et au format JPEG. Il sera exporté en conservant ses zones transparentes. Le PNG utilise une compression sans perte de qualité de la photo (cependant, les fichiers sont beaucoup plus lourds qu en JPEG). Dans Photoshop, vous pouvez enregistrer un document au format PNG soit à partir de la commande Enregistrer pour le Web, soit à partir de la commande Enregistrer sous. Dans ImageReady, c est à partir de la palette Optimiser que se choisit ce format. Les autres formats Dans ImageReady, on accède à d autres formats à partir de la commande Exporter l original du menu Fichier. En dehors de la possibilité de créer un fichier QuickTime à partir d une animation, les autres formats correspondent à des images fixes et sont d une utilisation peu courante. Vous pouvez également basculer dans Photoshop pour accéder à ses formats d enregistrement.

260 Design Web avec Photoshop 6 Comment mémoriser les réglages d optimisation? L enregistrement des paramètres Si vous avez réalisé un réglage et voulez en tester d autres, vous pouvez demander à ImageReady de le mémoriser; pour cela, utilisez le menu local et la commande Enregistrer les paramètres. Saisissez un nom explicatif commençant par une espace pour le retrouver en tête de liste. Par la suite, le réglage apparaîtra dans la liste des paramètres avec le nom spécifié lors de l enregistrement. Les deux premiers paramètres ont été enregistrés. Remarque : Photoshop place les fichiers de paramètres dans le dossier Paramètres optimisés (sous-dossier de l application). Vous pouvez les copier pour les utiliser sur un autre ordinateur si vous les glissez dans le dossier correspondant. Pour les transférer de Mac sous Windows, ajoutez-leur l extension.irs. Comment appliquer un réglage à une tranche? Si le document comporte plusieurs tranches qui n ont pas encore été optimisées, vous pouvez définir leurs paramètres d optimisation, alors qu elles ne sont pas sélectionnées, en glissant l icône de droplet de la palette Optimiser sur la tranche à régler (si cette tranche est liée à d autres, l ensemble prendra la même optimisation).