Optimiser les images avec Photoshop et ImageReady

1
Ce support est composé en grande partie à partir du chapitre 3 de
l'ouvrage de Benjamin Ripert,
Métier Webmaster, éditions Dunod (janvier 2004)
Les fichiers d’exemples sont à télécharger sur le site
www.metierwebmaster.net
Optimiser les images
avec Photoshop et ImageReady
La création graphique n'est pas au coeur des activités du webmaster, ni a fortiori du
développeur, et le mélange des genres est à proscrire autant que possible. Je ne
recommanderais pas à un jeune professionnel, sans formation graphique préalable, de
s'improviser webdesigner, graphiste 3D, illustrateur, voire directeur artistique sur le site
web d'un client. C'est néanmoins souvent le cas, et dans les CV, Painter, Bryce ou 3D
Studio Max côtoient allègrement Dreamweaver et JavaScript. Sauf exceptions,
l'expérience montre que les résultats de cette alchimie sont peu probants ! Savoir manier
des effets grâce à des logiciels ne constitue pas en soi un bagage suffisant, ni la marque
d'une sensibilité artistique. Le webdesign suppose une culture visuelle riche, un
apprentissage initial des règles de mise en page (équilibre des masses, alignements,
etc.), de typographie, d'harmonisation des couleurs et, plus généralement, un véritable
travail pour harmoniser le fond et la forme. Un webmaster, s'il est persuadé de posséder
des talents de graphiste, sera bien inspiré, en tout cas, de se faire la main sur des sites
personnels, plutôt que sur le dos d'un client !
Plutôt que de créer des images ex nihilo, le webmaster s'appliquera donc à mettre en
valeur les images existantes, qu'il s'agisse de photos, d'illustrations ou d'éléments
d'interface (logos, rubriques, boutons, etc.), éventuellement par le biais de montages, et
enfin à les adapter aux contraintes du support Internet.
3.1 Retouches et montages photo avec Photoshop
Dans une équipe de production web, Photoshop fait partie de ces rares outils
transversaux, dont chacun, graphiste, infographiste, webmaster mais aussi chef de projet
et même développeur, est censé maîtriser les fonctionnalités de base. L'éventail des
utilisations possibles est vaste : retouche photographique, photomontages, création
bitmap, conception des écrans types, réalisation des maquettes de pages, etc. Dans le cas
2
des webmasters, il s'applique en priorité à la retouche et à l'optimisation de photos ou
d'éléments d'interface.
3.1.1 Préalables
La configuration initiale de Photoshop, telle qu'elle s'affiche lors du premier
lancement, est adaptée à un usage standard du logiciel, c'est-à-dire pour une sortie
papier. Pour faciliter l'usage de ce logiciel, quelques réglages sont nécessaires :
• Commencez par régler, une fois pour toutes, l'unité de mesure en pixels, plutôt
qu'en centimètres : menu Édition / Préférences / Unités et règles, puis choisissez
Pixels pour Règles et Textes. Désormais, vous n'aurez plus besoin, à chaque
création d'une nouvelle image, de transposer en pixels !
• Personnalisez l'espace de travail, en ne laissant visibles que les palettes les plus
utiles, par exemple : Outils, Calques, Historique, Infos, Scripts et Explorateur
de fichiers. Notez que vous pouvez réunir plusieurs palettes en les cliquantdéposant (drag and drop) l'une sur l'autre et, par ailleurs, que depuis la version 7
un conteneur de palettes, en haut à droite de l'interface, permet de stocker des
palettes, notamment les plus volumineuses ou celles que vous n'utilisez que
ponctuellement. Dans mon cas, j'y place Explorateur de fichiers et Scripts. La
figure 3.1 montre une configuration possible des palettes : à gauche, la palette
d'outils, à droite les palettes, dont les 3 principales (Calques, Historique, Infos)
sont réunies dans un même bloc, et les 2 autres (Explorateur de fichiers,
Scripts), d'un usage plus ponctuel, dans le conteneur de palettes. A vous de voir
à l'usage quelle configuration correspond le mieux à vos habitudes. Une fois que
vous avez trouvé la bonne formule, faites-la enregistrer par le logiciel : menu
Fenêtre / Espace de travail / Enregistrer l'espace de travail. Vous pourrez ainsi,
à tout moment, revenir à la configuration type : menu Fenêtre / Espace de
travail, le nom que vous avez choisi apparaît en fin de liste. Si votre ordinateur
est utilisé par plusieurs personnes, vous aurez ainsi tout loisir de revenir à votre
espace de travail en un seul clic.
3
Figure 3.1 Configuration des palettes pour un usage web
Par ailleurs, avant de traiter une image, il faut commencer par s'assurer que la façon
dont ses couleurs sont traitées est adaptée à une utilisation sur écran, opération préalable
qui vous évitera des surprises désagréables par la suite. Pour vérifier ce point, passez
par le menu Image / Mode : c'est le mode RVB (Rouge Vert Bleu, RGB en anglais pour
Red Green Blue) qui convient pour une image destinée à l'Internet (CMJN pour une
image destinée à l'impression). Dans le cas d'une image enregistrée au format GIF, si
vous ne transposez pas du mode Couleurs indexées au mode RVB, vous ne pourrez pas
profiter de couleurs autres que celles déjà présentes dans l'image, ce qui s'avèrerait
rapidement très gênant.
Enfin, assurez-vous que l'image que vous avez ouverte est d'une qualité
suffisamment bonne, en particulier qu'elle n'est pas encore compressée. Dans le cas
d'une image non compressée, on parle d'image brute. Une photo numérique qui vient
d'être récupérée sur ordinateur est quasiment non compressée (en réalité elle l'est
souvent un peu, pour gagner de la place en stockage), une image scannée n'est pas
compressée. Comme le client final n'est pas censé reconnaître du premier coup d'oeil
une image brute ou compressée, assurez-vous lors de la sélection des éléments remis
que ceux-ci sont exploitables, au besoin en vous déplaçant ! Mieux vaut récupérer un
logo directement auprès de l'illustrateur, ou un catalogue produits auprès de
l'imprimeur, plutôt que d'en attendre les versions scannées, compressées. Vous éviterez
ainsi bien des pertes de temps et autant de motifs d'énervement, pour vous mais aussi
pour votre client qui a d'autres préoccupations.
L'erreur la plus courante consiste à vouloir recompresser une image déjà compressée
en JPEG. Ce format étant destructif (à l'exception de la version JPEG 2000, encore peu
diffusée), vous perdrez légèrement en qualité sans gain notable dans le poids du fichier.
C'est pour cette raison qu'il faut, autant que faire se peut, partir de l'original le moins
compressé possible. A défaut, un nombre de pixels important peut compenser le déficit
de qualité : si l'image dont vous partez est compressée, mais suffisamment grande, la
réduire contribuera à la décompresser en partie.1
Conséquence importante pour l'organisation de la production web : conservez
toujours sur votre disque dur les fichiers d'origine. Même s'ils n'ont pas vocation à être
envoyés sur le serveur distant, ils peuvent s'avérer très utiles pour des modifications
ultérieures. Si vous ne les enregistrez pas dans un dossier prévu pour (dossier Brut par
exemple), vous vous en mordrez rapidement les doigts, car il sera nécessaire de scanner
à nouveau certaines images, par exemple. Lors des premiers projets, cette erreur est très
courante : pressé par le temps, on oublie des tâches qui auraient pourtant permis
d'économiser du temps par la suite. N'oubliez pas non plus, lors d'une sauvegarde du
projet final sur cédérom, d'inclure les fichiers bruts. Pour différencier du premier coup
d'oeil les fichiers compressés des fichiers bruts, j'ai pris l'habitude, comme certains, de
nommer les seconds en majuscules, et les premiers en minuscules. Cette habitude
simplifie beaucoup les choses, surtout quand on est distrait ! Selon cette logique, un
fichier dont le nom complet est en majuscules n'a donc rien à faire sur un serveur web.
La résolution de l'image
1
Inversement, agrandir une image est à proscrire: les pixels ajoutés par le logiciel brouillent l'image
originale, la perte de qualité qui en résulte est rapidement visible à l'oeil nu.
4
La résolution, ou nombre de points contenus dans une unité
d'espace (par exemple, 300 dpi, ou 300 points répartis sur 1 pouce,
soit environ 118 points sur 1 centimètre), ne prend son sens que pour
l'acquisition ou l'impression. Régler son utilitaire de scan pour que
l'image récupérée contienne plus ou moins de pixels a un sens; régler
les paramètres de l'impression pour que la page imprimée propose le
meilleur compromis entre l'espace imprimé et la qualité de cette
impression aussi.
En revanche, sur écran, la notion de résolution est biaisée, puisque
la taille des pixels n'a pas de taille physique fixe. Seul importe en
réalité le nombre de pixels contenus dans une image. Une image de
480 pixels sur 320, par exemple, est exactement la même sur écran,
quelle soit en 72 dpi ou en 300 dpi. Les différences seront visibles
uniquement si vous décidez d'imprimer cette image : en 72 dpi elle
occupera une grande surface sur la page, avec une qualité d'impression
médiocre. Inversement, en 300 dpi, elle occupera une surface
moindre, mais avec une qualité d'impression supérieure.
Dans Photoshop, la résolution d'une image se règle via le menu
Image / Taille de l'image. Attention, si vous devez changer la
résolution en cours de route, vous devrez, dans la fenêtre qui s'affiche,
rétablir immédiatement le nombre de pixels initial (qu'il faut donc
mémoriser mentalement), sinon Photoshop ajoutera ou supprimera des
pixels et vous vous retrouverez avec une image floue ou simplifiée.
Si, selon toute vraisemblance, votre image est destinée au web, sa
résolution importe peu. Sachez toutefois que la résolution standard
d'une image destinée à l'écran est 72 dpi, par convention. Mais ne
vous en préoccupez pas trop car lorsque, dans Photoshop 7, vous
choisissez une résolution différente de 72 dpi, puis que vous
enregistrez l'image pour le web, au format GIF ou JPEG, le logiciel
transposera automatiquement l'image en 72 dpi, comme vous pourrez
le constater après ouverture du fichier obtenu, si vous retournez dans
le menu Image / Taille de l'image.
3.1.2 Retouches
Pour gagner en précision, les retouches doivent être faites le plus tôt possible sur
l'image l'originale, avant de la redimensionner. De cette façon, en réduisant la taille de
l'image par la suite, les éventuels défauts de retouche en seront moins visibles.
Réglages de l'image
Quelle que soit l'origine de l'image et la façon dont elle a été numérisée (scan, photo
numérique, acquisition vidéo), il est souvent nécessaire de commencer par régler sa
luminosité et son contraste. Le plus simple au début est de faire confiance à Photoshop,
en choisissant un des réglages paramétrés, adaptés à la grande majorité des photos : la
fonction Niveaux automatiques, accessible via le menu Image / Réglages. Cette simple
5
opération permet bien souvent de gagner considérablement en qualité d'affichage,
comme le montre la figure 3.2.
Parfois, c'est notamment le cas de photos prises dans des conditions de lumière
difficiles (photos d'intérieur sans flash, par exemple), le résultat de l'opération
précédente sera encore pire que l'original, avec des couleurs irréelles ! Annulez la
dernière opération (menu Édition / Annuler ou Ctrl-Z) et essayez de régler vous-même
les niveaux, la luminosité, le contraste ou encore les niveaux de couleurs (délicat à
paramétrer), accessibles via le même chemin : menu Image / Réglages. Mais, plutôt que
de vous perdre dans les sous-menus de Photoshop (avec l'éventail d'options offertes
dans Photoshop, les combinaisons sont infinies), essayez de privilégier des séquences
simples que vous pouvez reproduire sur des catégories d'images. Sinon, vous risqueriez
de perdre beaucoup de temps à tâtonner sur chaque image, avec des résultats peu
visibles à l'oeil nu.
Figure 3.2 Réglage de la luminosité et du contraste
Pour améliorer les réglages, vous constaterez rapidement que le fait de pouvoir agir
sur une partie de l'image, plutôt que sur sa totalité, s'avère rapidement utile. Si, au
moment d'agir sur les réglages, une partie de l'image est sélectionnée, c'est le contenu de
cette sélection, et non l'image toute entière, qui sera affectée.
Une séquence tout simple vous montrera l'intérêt de recourir aux sélections
(indispensables pour les montages) :
• ouvrez une image en couleurs, repérez un objet ou un élément qui pourrait être
mis en valeur dans cette image, sélectionnez-le avec l'outil Lasso (2 ème rangée à
gauche dans la palette d'outils de Photoshop, pour l'utiliser enfoncez le bouton
de la souris avant de déplacer celle-ci, puis relâchez le bouton);
• inversez la sélection via le menu Sélection / Intervertir, puis choisissez
Désaturation dans le menu Image / Réglages;
Vous obtenez alors une images en niveaux de gris, dans laquelle votre sélection
initiale s'affiche toujours en couleurs : un procédé classique en communication ou en
publicité pour mettre en valeur une idée ou un produit - et qui a le mérite, pour le coup,
d'être à la portée de tout webmaster !
Le tampon duplicateur
Lors de la prise de vue, il y a souvent des poussières sur l'objectif, visibles en zoomant
sur le ciel, par exemple. Il arrive aussi que des éléments indésirables soient présents
dans le cadre : fils électriques, logo intempestif sur un vêtement, imperfection de la
peau, visage hilare au second plan, etc. Bref, il faut être capable de masquer de petits
6
éléments, sans pour autant trahir le sens général de la photographie. Pour ce faire, l'outil
Tampon duplicateur, une fois bien en main, s'avère redoutable d'efficacité, notamment
quand l'élément indésirable se trouve devant un fond quasiment uni, dégradé, ou encore
composé de motifs (bref, toute surface que l'on peut reproduire sans que l'oeil ne
remarque le procédé).
Commençons par un exemple simple, tel que le montre la figure 3.3. Il s'agit de
masquer un cheveu présent sur l'objectif lors de la prise de vue, visible sur la zone de
ciel. Notez que le ciel est très rarement uni, mais présente souvent un léger dégradé,
comme ici. L'application de l'outil duplicateur se fait en trois étapes :
• Paramétrage de l'outil - Sélectionnez l'outil Tampon duplicateur, 5ème rangée à
gauche dans la palette d'outils. Les options de cet outil apparaissent dans la
fenêtre Options, normalement présente sous la barre des menus. Paramétrez la
taille de l'outil, à droite de la mention Forme. Le nombre de pixels que vous
définissez doit être adapté à l'épaisseur du cheveuà masquer. Si vous choisissez
une taille trop petite, vous devrez vous y reprendre à plusieurs fois. Si au
contraire vous choisissez une taille trop importante, alors la surface que vous
recouverte sera beaucoup trop grande : vous allez faire un paté ! Le mieux au
début est de déplacer l'outil sur l'image, sans cliquer : la forme de l'outil
s'affiche, vous pouvez comparer avec l'épaisseur du cheveu, et ajuster en
conséquence la taille de la forme dans les options.
• Définition d'une zone de référence - Tant qu'une zone de référence n'a pas été
définie, rien ne sert d'essayer de recouvrir le cheveu. Placez le curseur de l'outil
à droite du cheveu, aligné sur son extrémité supérieure, en laissant suffisamment
d'espace pour ne pas toucher le cheveu. Enfoncez la touche Alt (le curseur se
transforme en viseur) et cliquez une fois : le point de départ de la zone de
référence est mémorisé.
• Application du tampon - Cliquez maintenant (sans touche Alt enfoncée) sur
l'extrémité supérieure du cheveu et, sans lâcher le bouton de la souris, suivez le
cheveu jusqu'en bas. Le résultat que vous devez obtenir est comparable à celui
de la figure 3.3 : plus aucune trace du cheveu.
Figure 3.3 Retouche simple avec le tampon duplicateur
Notez que si nous avons choisi de positionner le curseur à droite du cheveu pour
définir la zone de référence, c'est parce que le dégradé est dans le sens vertical. S'il avait
été dans le sens horizontal, il aurait fallu choisir une zone au-dessus (ou au sessous) du
cheveu, sur une même ligne verticale. Répétez l'opération en définissant un point
7
différent, et vous constaterez que le résultat est loin d'être crédible : on remarque du
premier coup d'oeil qu'il y a eu une retouche.
Autre erreur courante : définir une zone de référence trop proche de la zone que
vous voulez masquer. Du coup, vous en masquez une partie, mais vous en dupliquez
une nouvelle. Annulez rapidement pour redéfinir, avec la touche Alt enfoncée, une
nouvelle zone, sinon vous allez bientôt étendre les dégâts à l'ensemble de l'image...
Avec un peu de pratique, vous obtiendrez des résultats satisfaisants aussi bien sur
des fonds dégradés que sur des fonds plus complexes, comme le montre la figure 3.4 :
sur cette carte de la poste, les trous qui délimitent le timbre, ainsi que les inscriptions,
peuvent être escamotés en une dizaine de minutes avec de l'entraînement. Cela dit,
quelle que soit votre dextérité, le procédé doit être réservé à des petites zones de
l'image.
Figure 3.4 Retouches complexes
3.1.3 Montages
Dans la presse quotidienne, les photos sont le témoignage d'une actualité, on y use
rarement de procédés qui dénaturent la réalité. Dans les magazines en revanche, et plus
encore dans les domaines de la publicité et de la communication d'entreprise, il est
courant de recourir à des photomontages pour améliorer l'impact, la force de persuasion
des images.
Pour faire des montages sous Photoshop, il faut apprendre à détourer. En fonction du
fond sur lequel se trouve l'élément à détourer, plusieurs techniques existent. Nous en
verrons deux : détourage simple avec la Baguette magique, et détourage plus complexe
avec le Mode masque. Nous verrons ensuite des montages liés à l'application de
Masques de fusion sur des calques.
Détourage simple
Si le fond de votre image initiale est quasiment uni, comme sur la figure 3.5, le
détourage consiste à sélectionner les pixels qui constituent le fond, à partir d'une gamme
de couleurs assez proche. La Baguette magique (deuxième rangée à droite dans la
palette d'outils) permet, en effet, de sélectionner un ensemble de pixels de couleur
voisine. Le tout est, comme pour n'importe quel outil, de bien le paramétrer. Ici, le
réglage déterminant est le seuil de tolérance, fixé par défaut sur 32. Plus ce chiffre est
bas, plus votre sélection sera réduite, et inversement. Il faut souvent tâtonner pour
trouver le bon compromis, qui va permettre d'isoler une silhouette ou un objet. En
cliquant dans le fond avec une tolérance 0 (Lissé et Pixels contigus étant décochés),
8
vous constaterez que peu de pixels voisins ont exactement la même couleur. Si vous
cochez Pixels contigus vous verrez qu'il y en a ailleurs dans l'image, mais guère plus. Il
s'agit donc d'augmenter la tolérance pour regrouper des pixels contenus dans la gamme
de couleurs du pixel sur lequel vous avez cliqué. Mieux vaut décocher à nouveau
l'option Pixels contigus, car s'il existe à l'intérieur de la silhouette des couleurs proches
de celles contenues dans le fond, il faudra les retrancher. Essayez une tolérance 10, et
ainsi de suite, avant de cliquer au même endroit, et vous comprendrez mieux la logique
de cet outil.
Il s'agit, là encore, de trouver le bon compromis entre une tolérance faible, qui
impliquera de cliquer de nombreuses fois pour obtenir la zone de sélection adéquate, et
une tolérance élevée, qui risque de sélectionner le fond mais aussi une partie de la
silhouette, et ne répond évidemment pas à l'objectif recherché. Pour arriver à vos fins,
n'essayez pas de choisir une tolérance qui vous permette de détourer la silhouette d'un
seul clic. Sachez que quelques clics bien placés vous permettront de réunir
progressivement, avec une précision plus grande, une zone donnée : pour cela, il suffit
avant chaque nouveau clic d'enfoncer la touche Majuscule (Shift). Dès lors, chaque
nouvelle gamme de couleurs sélectionnées vient s'ajouter à la sélection en cours. Si
vous avez besoin de revenir en arrière, pensez à la palette Historique que nous avons
laissée dans l'interface, et qui conserve en mémoire les 20 opérations précédentes
(chiffre par défaut, paramétrable via le menu Édition / Préférences / Général). Enfin,
pour retrancher une partie de la sélection, donc le contraire de la touche Majuscule,
enfoncez la touche Alt avant de sélectionner la zone à retrancher, avec n'importe quel
outil : la Baguette magique, le Lasso, ou encore le Rectangle de sélection (1ère rangée, à
gauche, dans la palette d'outils).
Dans l'exemple de la figure 3.5, après les réglages d'usage pour mieux faire ressortir
le chapeau et le visage, nous avons choisi une tolérance 15, pas trop élevée pour ne pas
empiéter sur la silhouette. En cliquant successivement à trois endroits différents du
fond, avec la touche Majuscule enfoncée pour combiner les sélections, nous avons pu
séparer silhouette et fond. Ensuite, nous avons ajouté à ce fond, donc toujours avec la
touche Majuscule enfoncée, les ombres de la silhouette sur le mur, tantôt avec la
baguette magique, tantôt avec le lasso. Si en voulant faire la même chose, vous perdez
votre sélection en cours, ce qui arrive fréquemment, n'hésitez pas à annuler la dernière
opération (menu Édition / Annuler) pour la retrouver.
Il devient dès lors possible d'extraire la silhouette pour l'utiliser ailleurs. Puisque
nous avons sélectionné le fond, plus facile à isoler que la silhouette grâce à une plage de
couleurs assez homogène, il convient maintenant d'inverser la sélection : menu
Sélection / Intervertir la sélection. Cette sélection peut alors être copiée en mémoire
avec Ctrl-C (sous Mac OS, remplacez Ctrl par Pomme). Vous pouvez ensuite créer une
nouvelle image (menu Fichier / Nouvelle image ou Ctrl-N). Dans la fenêtre qui s'ouvre,
laissez telles quelles les tailles qui vous sont proposées, car elles correspondent
précisément à celles de la sélection mémorisée. En bas de la fenêtre, cochez
Transparent, validez puis collez la sélection mise en mémoire. Comme sur la figure 3.5,
la silhouette se retrouve sur un fond en damier, caractéristique sous Photoshop de la
transparence.
9
Figure 3.5 Réglages, détourage et montage
Si vous ne connaissez pas bien le principe des calques Photoshop, jetez donc un oeil
sur la palette du même nom. Vous y trouverez deux calques : le premier en partant du
bas correspond au fond initial de l'image, ici transparent. Le second, donc le plus haut
dans la liste, correspond à la sélection qui a été collée. Autrement dit, et le principe vaut
ailleurs, coller la sélection à l'intérieur du nouveau document a automatiquement créé
un nouveau calque. Pour déplacer ce calque, il suffit de choisir le bon outil : outil
déplacement, première rangée, à droite dans la palette d'outils, avec lequel vous pouvez
glisser-déposer un calque, à condition de l'avoir sélectionné dans la palette des calques.
Vous pouvez très bien décider de conserver ce fichier pour réutiliser plus tard la
même silhouette, par exemple pour la placer devant tel ou tel paysage. Pour conserver
les deux calques bien séparés l'un de l'autre, et non fusionnés, vous devrez enregistrer le
document dans le format PSD propre au logiciel Photoshop. Dans un autre format (sauf
exceptions : PICT, TIFF...), l'image serait "aplatie" sur un seul calque.
Pour finaliser le montage, il ne reste plus qu'à ouvrir une image sur laquelle vous
voulez coller cette silhouette (ici un paysage avec une yourte au loin), puis de
sélectionner le document où se trouve la silhouette, avant de glisser-déposer le calque à
partir de la palette vers l'image ouverte à l'instant. Vous obtenez le même résultat que
dans la figure 3.5.
En y regardant de plus près, moyennant quelques clics successifs sur l'outil loupe
(11ème rangée à droite dans la palette d'outils, pour dézoomer enfoncez la touche Alt
avant de cliquer, ou double-cliquez directement sur l'outil pour revenir à 100%), vous
apercevrez peut-être un fin halo autour de la silhouette. Ce halo, dont la couleur rappelle
le fond de l'image initiale, constitue le lissage de la silhouette, et se compose de
couleurs intermédiaires entre le premier plan et l'arrière-plan.
Le lissage
La notion de lissage est omniprésente dans Photoshop, en
particulier quand on doit détourer des éléments. Sans lissage, les
contours d'un élément ne sont pas réussis, on parle de contours en
escaliers. Pour bien comprendre son importance, reproduisez les
opérations suivantes :
- créez un nouveau document (menu Fichier / Nouveau) de 400 sur
400 pixels;
- sélectionnez l'outil Ellipse de sélection, accessible en laissant le
bouton de votre souris enfoncé sur l'outil Rectangle de sélection (1ère
rangée à gauche dans la palette d'outils);
10
- cliquez près du coin supérieur gauche du document, laissez le
bouton de la souris enfoncé, puis déplacez le curseur jusqu'à proximité
du coin inférieur droit, appuyez sur la touche Majuscule pour obtenir
un cercle plutôt qu'une ellipse, et relâchez le bouton de la souris;
- définissez la couleur de premier plan en cliquant sur le premier
des deux grands carrés colorés situés vers le bas de la palette d'outils
et, dans le sélecteur de couleurs qui s'affiche, choisissez un rouge
foncé en actionnant les deux curseurs disponibles : au centre, le
triangle agit sur la couleur de base, à gauche le rond agit sur la teinte
(plus ou moins de luminosité, plus ou moins de saturation);
- remplissez la sélection en cours par la couleur de premier plan :
menu Édition / Remplir / avec Couleur de premier plan, Mode :
Normal, Opacité : 100 %;
A votre avis, combien de couleurs sont présentes dans l'image
obtenue ? Deux couleurs, le rouge et le blanc ? Non, beaucoup plus
(plus de 100), car Photoshop a créé des couleurs intermédiaires pour
un meilleur rendu du cercle. Zoomez sur le pourtour extérieur,
jusqu'au maximum, et vous verrez les nuances apparaître, comme le
montre la figure 3.6. Il s'agit de couleurs intermédiaires entre la
couleur de premier plan et la couleur d'arrière-plan, donc en
l'occurence entre le rouge et le blanc. Si on essayait de supprimer ce
lissage, ou si on le supprimait à la suite d'une erreur de manipulation,
la qualité d'affichage du cercle serait beaucoup moins probante.
Figure 3.6 Gros plan sur le lissage
Détourage en mode masque
Dans l'exemple de la figure 3.5, la présence d'un fond presque uni facilitait le
détourage, dans des conditions qui tendaient à reproduire celles d'un studio. Bien
entendu, cela n'est pas toujours possible. Avec la figure 3.7, vous avez un exemple de
silhouette immergée sur un fond en plein air, particulièrement difficile à isoler à cause
de la diversité des couleurs présentes. La baguette magique ne serait d'aucun secours
11
dans le cas présent. Mais il existe un mode de détourage plus subtil et qui, de surcroît,
gère parfaitement les zones de lissage : le Mode masque. Voici la procédure pas à pas
pour réaliser un détourage en mode masque :
• sélectionnez l'outil Lasso, ou sa variante Lasso polygonal (2ème rangée, à gauche,
dans la palette d'outils; laissez le bouton de la souris enfoncé pour afficher toutes
les variantes de l'outil);
• entourez sommairement la silhouette à détourer, sans passer trop près des bords
à ce stade - attention, le Lasso s'utilise avec le bouton de la souris enfoncé, alors
que le Lasso polygonal s'utilise en cliquant-relâchant point par point, et en
reliant le dernier point au premier, ou encore en double-cliquant pour terminer la
sélection;
• réinitialisez les couleurs de premier et d'arrière-plan en cliquant sur la petite
icône présente en bas à gauche des deux carrés de couleur, dans la palette
d'outils; vou devez obtenir le noir au premier plan, le blanc au second plan;
• activez le Mode masque en cliquant sur l'icône de droite en bas de la palette
d'outils, juste en dessous des deux carrés de couleurs (avant de cliquer, vous
pouvez laisser le pointeur sur une icône pour voir s'afficher la mention de l'outil,
ici Mode masque) : autour de votre sélection apparaît un filtre rouge, comme le
montre sommairement, faute de couleurs, la deuxième étape dans la figure 3.7;
Figure 3.7 Détourage en mode masque
•
•
•
•
sélectionnez l'outil Pinceau (4ème rangée, à droite, dans la palette d'outils; si
l'icône ressemble à un crayon, laissez quelques instants le bouton de la souris
enfoncé pour accéder au pinceau) et, dans la barre d'options en haut à gauche de
l'écran, choisissez une forme d'épaisseur large, par exemple 24 pixels;
toujours avec la couleur de premier plan fixée sur le noir, affinez la forme rouge
à l'aide du Pinceau, pour qu'elle se rapproche le plus possible de la silhouette à
détourer, sans n'empiéter dessus (si c'est le cas, annulez la dernière opération via
le menu Édition / Annuler, ou effacez avec l'outil Gomme, 6 ème rangée, à gauche
dans la palette d'outils, avec Opacité :100% en option, ou, dernière possibilité,
repassez le pinceau avec la couleur blanche, qui annule la transparence); comme
vous pouvez le constater, la couleur noire, en mode masque, s'affiche en rouge,
et définit en fait les zones transparentes (oui, je sais, cela peut paraître bizarre au
premier abord), et la couleur blanche, inversement, efface la transparence;
recommencez l'opération avec un pinceau d'épaisseur plus fine, par exemple 8
pixels, pour accéder dans les recoins, et à nouveau avec une épaisseur de 3
pixels pour finaliser le détourage; vous devriez obtenir l'équivalent de la
troisième étape, dans la figure 3.7;
désactivez le Mode masque en cliquant sur l'icône de gauche (Mode standard)
en bas de la palette d'outils, juste en dessous des deux carrés de couleurs; le
12
•
pourtour de votre détourage s'affiche en pointillés clignotants, comme n'importe
quelle sélection - cet affichage est trompeur, car votre sélection est plus subtile
que si vous aviez utilisé le simple lasso, elle inclut un lissage lié à la forme de
l'outil pinceau;
copiez le contenu de la sélection (Ctrl-C), créez un nouveau document (Ctrl-N)
en laissant les dimensions proposées, et en cochant Transparent en bas de la
fenêtre, puis collez dans le nouveau document qui s'affiche le contenu de votre
sélection (ctrl-V) : vous obtenez l'équivalent de l'étape 4 dans la figure 3.7; pour
tester la qualité de votre détourage, rien ne vaut le test suivant : collez
successivement la sélection sur un fond noir, puis sur un fond blanc et, le cas
échéant, supprimez à l'aide de la gomme l'éventuel halo qui entoure la
silhouette; une fois le test réussi, la silhouette détourée peut être placée sur
n'importe quel fond, comme le montre la figure 3.8;
Figure 3.8 Réutilisation d'une forme détourée
Le procédé du Mode masque, assez laborieux à mettre en oeuvre la première fois,
permet d'obtenir des résultats très satisfaisants avec un peu de pratique. La procédure
décrite précédemment donne un petit aperçu des possibilités, mais sachez que l'on peut
agir davantage sur les options du pinceau (bords plus ou moins "humides"), et même
recourir aux autres outils pour affiner encore le détourage. Une fois que vous maîtrisez
bien les techniques de détourage, vous pouvez vous confectionner une collection de
silhouettes détourées, prêtes à l'emploi. C'est précisément ce que proposent certains
éditeurs de banques d'images sur cédérom, tel Photodisc. En vous concentrant sur les
photos fournies par les clients des sites web, et en complétant avec des images standard
proposées par ces éditeurs, vous pouvez constituer une photothèque de qualité pour
chacun des clients, et faciliter en amont les mises à jour. Par exemple, on peut imaginer
une page d'accueil graphique pour un site multilingue, avec une image dont le fond
change chaque semaine, et une silhouette au premier plan mise à jour au quotidien. Si
vous avez préparé des silhouettes détourées, la confection d'un photomontage quotidien
ne devrait pas vous prendre plus de quelques minutes.
Masques de fusion
En abordant les détourages simples via l'outil baguette magique, nous avons entrevu le
fonctionnement des calques. Il est possible d'exploiter les interactions entre plusieurs
calques. Par exemple, en copiant-collant deux paysages différents dans un même
document, vous obtenez deux calques, dont seul celui placé en tête de liste est visible.
Pour mélanger les deux paysages, vous pouvez déjà agir, dans la palette calques, sur
13
l'opacité, exprimée en pourcentage, du calque supérieur. Plus cette opacité est faible,
plus le calque sélectionné devient transparent, et inversement.
Si vous voulez obtenir des montages un peu plus complexes, par exemple créer un
dégradé de transparence pour mélanger progressivement les deux paysages, il faut vous
tourner vers les masques de fusion.
Voici un exemple simple de procédure, qui devrait vous familiariser avec la logique
des masque de fusion :
• ouvrez une image, sélectionnez son contenu (Ctrl-A pour Sélectionner tout) et
copiez-le (Ctrl-C);
• créez un nouveau document (Ctrl-N), en laissant les dimesions par défaut et en
cochant Blanc en bas de la fenêtre, puis collez la sélection mémorisée : vérifiez
dans la palette calques que vous obtenez bien deux calques;
• sélectionnez le calque du haut dans la palette des calques, et cliquez sur la
seconde icône dans la liste des six icônes proposées au bas de la palette (Ajouter
un masque de fusion) : le calque supérieur apparaît maintenant scindé en deux
dans la palette, vérifiez que la partie droite du calque supérieur, représentant le
masque de fusion, est bien sélectionnée (au besoin, sélectionnez-le);
• choisissez l'outil rectangle de sélection (1ère rangée, à gauche dans la palette
d'outils), et définissez un rectangle de sélection sur la moitié inférieure du
document;
• réinitialisez les couleurs de premier et d'arrière-plan via la petite icône en bas à
gauche des carrés de couleurs, dans la palette d'outils : le premier plan doit être
noir, et l'arrière-plan blanc;
• remplissez ce rectangle de sélection avec un dégradé : choisissez l'outil du
même nom (6ème rangée, à droite dans la palette d'outils), vérifiez que ses
options en haut à gauche de l'écran sont fixées sur les valeurs initiales (Premier
plan - Arrière plan, Dégradé linéaire, Mode normal, Opacité 100%, avec
Simuler et Transparence cochés), et appliquez-le en cliquant-relâchant une fois
sur l'extrémité basse de la sélection, puis, avec la touche Majuscule enfoncée,
une nouvelle fois sur l'extrémité haute de la sélection; le fond blanc apparaît
progressivement, de haut en bas;
Le résultat obtenu constitue un effet courant dans les domaines de la publicité et de
la communication : le dégradé de transparence sur un fond uni permet de rompre avec la
monotonie des photos rectangulaires. Procédé efficace sur un site Internet, à condition
de ne pas en abuser.
Maintenant que vous êtes familiarisé avec la manipulation des masques de fusion,
vous pouvez essayer de l'appliquer à des images plus complexes, composées de
sélections détourées par exemple. La figure 3.9 donne un petit aperçu des possibilités.
Le calque le plus bas est un fond blanc. Une partie de l'image, sur le premier calque, a
été détourée puis collée sur un troisième calque. On a ensuite ajouté un masque de
fusion sur le deuxième calque, avec une transprence vers le haut. La luminosité
ascendante du deuxième met en valeur le premier plan, comme le montre l'étape 2 de la
figure 3.9. Enfin, dans l'étape 3, on a réuni les deux calques supérieurs (sélection du
calque supérieur, et, via la flèche en haut à droite de la palette, Fusionner avec le calque
inférieur), et ajouté sur le calque obtenu un nouveau masque de fusion, cette fois avec
un dégradé sur la partie inférieure, qui dévoile progressivement le fond blanc. Une
façon possible, parmi beaucoup d'autres, de mettre en valeur un visuel destiné au web.
14
Figure 3.9 Application de masques de fusion
3.2 Compression avec Image Ready ou Fireworks
Compresser une image, avec Image Ready d'Adobe (intégré à Photoshop) ou son
équivalent Fireworks chez Macromedia, prend une dizaine de secondes pour un résultat
très satisfaisant, à condition bien entendu de savoir ce que l'on veut obtenir. Pourtant,
les webmasters qui débutent en entreprise commettent des erreurs, tantôt sur l'estimation
du temps de chargement, tantôt sur le choix du format de compression, tantôt encore
parce qu'ils n'ont pas bien saisi l'intérêt de découper une image en plusieurs, sur une
page d'accueil graphique par exemple.
Toutes ces approximations sont faciles à corriger. Voici un tour d'horizon des
procédures de compression, à commencer par un rappel sur l'équivalence entre les kilooctets et les kilo-bits, peut-être la plus grande source de confusion en production web.
3.2.1 Poids des fichiers et temps de chargement
Ne confondez surtout pas les kilo-octets, utilisés pour exprimer le poids des fichiers, et
les kilo-bits, utilisés pour exprimer le débit d'une connexion Internet : il y a un rapport
de 1 à 8 entre les deux !
Le poids des fichiers, sur n'importe quel disque dur, est exprimé en kilo-octets. Un
octet, composé de 8 bits (une séquence de 8 chiffres binaires : 0 ou 1), représente en
informatique un caractère de texte. 1 kilo-octet, c'est l'équivalent de 1024 octets, mais
on arrondit souvent à 1000 pour simplifier les calculs. Typiquement, les pages HTML
que vous créez pèsent quelques kilo-octets. Si le code d'une page HTML contient 10000
signes, le fichier final pèsera environ 10 kilo-octets. La page d'accueil du Monde, qui
contient environ 60000 signes, pèse plus de 60 kilo-octets, sans compter les images...
Voilà pour le code proprement dit.
Pour évaluer le temps de chargement complet d'une page, il faut évidemment
comptabiliser ce qui pèse le plus lourd, c'est-à-dire les médias qui s'y trouvent : images
fixes ou animées, animations Flash, sons, vidéos... Là encore, on exprime leur poids en
kilo-octets. Le poids d'une image dépend de plusieurs facteurs : le nombre de pixels
contenus dans l'image, la complexité de l'image et le nombre de couleurs référencées, et
le type de compression adopté.
A ce rythme, on atteint rapidement des sommets. Si vous voulez connaître le poids
total d'une de vos pages, suivez les opérations indiquées :
• faites une copie de tous les fichiers concernés : page HTML et médias associés;
15
•
•
réunissez les copies obtenues dans un dossier à part;
faites un clic droit sur le dossier et sélectionnez Propriétés dans la liste
contextuelle qui s'affiche (sous Mac Os, sélection du dossier puis Pomme-I);
• deux tailles exprimées en kilo-octets s'affichent : la première désigne la taille
réelle du dossier, celle qui nous intéresse; la seconde désigne la taille occupée
sur le disque dur2; attention, sous Mac OS, c'est l'inverse !
Admettons que vous obteniez un total de 70 kilo-octets, pour une page qui s'adresse
au grand public. 70 kilo-octets, cela vous paraît peu ? Eh ! bien, savez-vous qu'avec une
ligne téléphonique classique, il faudra attendre environ 20 secondes pour que le contenu
de la page s'affiche dans son intégralité ? Le raisonnement est le suivant :
Une ligne téléphonique classique (sans ADSL) permet un débit théorique de 56 kilobits par seconde (et non 56 kilo-octets par seconde, comme on serait tenté de le
croire !). En pratique, ce débit tombe en moyenne autour de 28 kilo-bits par seconde,
sauf si deux conditions sont réunies : votre page est hébergée directement chez le
fournisseur d'accès de vos internautes (quelle chance !), et un seul internaute y accède à
tour de rôle (prévoyez donc un distributeur de tickets).
28 kilo-bits par seconde, donc, équivalent à 3,5 kilo-octets par seconde, puisque,
rappelons-le, 1 kilo-octet est égal à 8 kilo-bits. Par conséquent, si votre page tout
compris pèse 70 kilo-octets, il faut attendre environ 20 secondes avec un débit moyen
de 3,5 kilo-octets par seconde.
Les internautes concernés, à 56 kbps ou moins, minoritaires ? Pas vraiment,
puisqu'ils représentent encore la moitié des connectés, comme le montrent les chiffres
clés disponibles en annexe.
Autrement dit, si votre site s'adresse au grand public, et que les pages principales
dépassent régulièrement 50 à 60 kilo-octets, on peut en déduire que vous perdez la
moitié des nouveaux visiteurs du seul fait du poids des fichiers. La plupart des
internautes quittent en effet les pages sans attendre leur chargement si celui-ci dure plus
d'une quinzaine de secondes. Ne pensez pas que les mieux équipés ne soient pas
concernés : habitués à des chargements rapides, ils manquent singulièrement de
patience sur les sites anormalement lents.
On ne peut pas non plus généraliser cette règle. Si vous proposez sur votre site de
télécharger un fichier volumineux, il est clair que les internautes qui franchissent le pas
sont prêts à attendre un peu plus. Idem pour les animations Flash, à condition de ne pas
les placer trop souvent au premier niveau de lecture, et de proposer une version
alternative. Tant que vous n'imposerez pas des médias surdimensionnés que l'internaute
n'a pas expressément sollicités, vous conserverez la plus grande partie de vos visiteurs
potentiels.
Définissez le parcours de base d'un utilisateur lambda sur le site dont vous avez la
charge, puis les chemins de traverse qui s'offrent à lui, en fonction de son profil et de
son matériel. Idéalement, les pages qui constituent le parcours de base ne devraient pas
dépasser 50 à 60 kilo-octets (sauf à posséder la notoriété du quotidien Le Monde !). Si
le total dépasse ce chiffre, ce qui est très courant, vous pouvez toujours programmer en
JavaScript un code qui charge les médias secondaires (sons, vidéo, animations Flash),
une fois que les contenus les plus importants sont affichés. La fonction
2
La taille occupée par un fichier ou un dossier sur le disque dur diffère de la taille réelle. En effet, le
disque dur est composé de tiroirs (clusters) dont la taille est fixée lors du formatage. Comme le poids d'un
fichier est rarement un multiple de cette taille minimale, un des tiroirs occupés par ce fichier reste souvent
en partie inoccupé.
16
ou la propriété element.innerHtml3 sont susceptibles d'ajouter de
nouveaux éléments après le chargement de la page. Ainsi, le chargement de médias
secondaires ne rique pas d'interférer avec l'affichage des principaux éléments,
notamment pour les internautes pressés de prendre connaissance des informations
essentielles avant de passer à autre chose.
document.write()
3.2.2 GIF, JPEG, PNG : le choix du format
Les formats GIF et JPEG représentent deux compressions opposées. Le format PNG
constituerait un compromis intéressant, mais sa diffusion reste très limitée du fait d'un
poids encore élevé par rapport aux connexions disponibles. Ceux qui annonçaient, vers
1997, qu'il allait détrôner les autres formats misaient aussi, probablement, sur une
généralisation rapide du très haut débit, ce qui est toujours loin d'être le cas. Un format
d'avenir, donc, mais qui tarde à s'imposer - si tant est qu'il s'impose un jour.
Pour simplifier, on peut dire que le format JPEG est adapté aux photographies et, par
extension, à toutes les images qui possèdent une gamme de couleurs étendue, ou avec
des nuances subtiles (les dégradés, notamment). Le format GIF, lui, est adapaté aux
images créées sur écran : icônes, boutons, menus de navigation, titres sur fond uni,
logos, schémas, illustrations (à l'exception des dégradés), c'est-à-dire toute image
composée d'aplats de couleurs et de contours nets, avec une palette de couleurs réduite.
Le tableau 3.1 récapitule leurs principales caractéristiques.
GIF
JPEG
Graphic Interchange
Format
Joint Photographic
Experts Group
.gif
.jpg .jpe .jpeg
8 bits : 256 couleurs
24 bits : + de 16,7
millions
Mode des couleurs
Couleurs indexées
RVB
Gestion de la transparence
Oui : sur 1 niveau
Non
Oui
Non
Oui : "GIF entrelacé"
Oui : "JPEG progressif"
Palette de couleurs réduite
Perte de qualité
Nom complet
Extensions possibles
Nombre de couleurs maximum
Gestion des animations
Gestion de l'affichage progressif
Résultat de la compression
Tableau 3.1 Principales caractéristiques des formats GIF et JPEG
Comme le format JPEG s'applique à la grande majorité des photos prises dans des
conditions normales, on peut être tenté de généraliser son usage. On trouve sur Internet
des pages (voire des sites entiers...) dont toutes les images sans exception, menus de
navigation, titres et photos, sont compressées en un seul format. Parfois même, on
entend de jeunes webmasters soutenir mordicus que le format JPEG est supérieur au
format GIF, ou l'inverse. Bien entendu, tout dépend de l'image d'origine, et il vaut
mieux saisir rapidement les particularités des deux formats pour utiliser chacun à bon
escient.. Pour mieux appréhender le format GIF, l'image reproduite figure 3.11 en
3
Consultez la section Interactions complexes dans la référence JavaScript qui clôt le chapitre 6.
17
présente toutes les caractéristiques : illustration réalisée sur ordinateur (il s'agit du
fichier d'origine, et non du résultat d'un scan, ce qui a son importance), peu de couleurs
(surtout quand on le reproduit en noir et blanc !), titres sur fond uni, pas de dégradé,
contours nets (en particulier, lignes d'un pixel d'épaisseur, noires sur fond blanc).
Figure 3.10 Image parfaitement adaptée à la compression GIF
3.2.3 La compression
Les logiciels Macromedia Fireworks et Adobe Image Ready proposent des
fonctionnalités identiques depuis leur première version (1998), avec une présentation
légèrement différente, et quelques gadgets supplémentaires dans le premier. En
entreprise, vous trouverez l'un ou l'autre, ou même les deux.
Si vous n'utilisez ces logiciels que pour compresser vos images, un seul écran
s'avère vraiment utile : celui dans lequel on peut comparer, avec un aperçu en temps
réel, plusieurs formats ou plusieurs types de compression. Photoshop fait alors l'affaire,
sans devoir lancer Image Ready séparément, puisque le module d'enregistrement pour le
web y est inclus4. Avec Photoshop donc, ouvrez une image et passez par le menu
Fichier / Enregistrer pour le web, puis cliquez sur l'onglet 4 vignettes. Avec Fireworks,
sélectionnez directement l'onglet 4 en 1. La figure 3.10 vous montre les écrans obtenus,
respectivement avec Photoshop (à gauche) et Fireworks (à droite). Pour les procédures
qui suivent, nous garderons les termes tels qu'ils sont traduits sous Photoshop / Image
Ready (version 7), mais les transposer sous Fireworks ne devrait pas vous poser de
difficultés.
4
De façon générale, on assiste à une convergence accélérée entre Photoshop et Image Ready,
particulièrement manifeste dans la version 7.
18
Figure 3.11 Principal écran de compression, dans Fireworks et Photoshop
L'affichage en quatre vignettes est idéal pour comparer les compressions GIF et
JPEG et tester des compressions différentes, grâce à un aperçu du résultat et la mention
du poids final en kilo-octets. Par défaut, la vignette en haut à gauche représente le
fichier brut, non compressé.
Si, pour une image, vous hésitez entre GIF et JPEG, suivez la procédure suivante :
• sélectionnez la vignette en haut à droite et, dans la fenêtre tout à droite de
l'écran, paramétrez une compression JPEG avec les options par défaut
("Optimisé" et "Progressif" décochés, "Flou" à 0). Réglez la "Qualité"
(inversement proportionnelle au taux de compression) sur 60%;
• sélectionnez ensuite la vignette en haut à droite et paramétrez une compression
GIF; le nombre de couleurs n'a pas d'importance à ce stade;
• sous chacune des vignettes figure le poids du fichier, exprimé en kilo-octets;
repérez le poids associé à la vignette en haut à droite (par exemple, "32 K"), et
mémorisez-le pour la suite;
• sélectionnez la vignette en bas à droite et, dans les paramètres de compression à
droite de l'écran, cliquez sur la flèche : dans le menu déroulant, sélectionnez
"Optimiser pour la taille du fichier" ("Optimiser la taille" sous Fireworks,
accessible également via une flèche);
• dans le champ d'invite qui s'affiche au premier plan, répercutez le même poids,
en kilo-octets, que pour la vignette du haut, et validez;
• le logiciel détermine lui-même le nombre de couleurs qui, en GIF, permettra
d'atteindre le poids équivalent à la compression JPEG; si le poids obtenu, qui
s'affiche en bas de la vignette, diffère trop de celui du haut (plus de 2 kilooctets), prenez la valeur du bas comme référence, et faites l'opération décrite,
mais cette fois dans la vignette du haut, jusqu'à obtenir deux valeurs proches;
Maintenant que le poids des deux types de compression est équivalent, il est temps
de comparer la qualité d'affichage des deux vignettes. Pour ce faire, n'hésitez pas à
zoomer (outil zoom disponible à gauche de l'écran, sous la forme d'une loupe), puis à
vous déplacer sur toute la surface de l'image (outil main). Vous devriez pouvoir vous
19
faire une opinion, à de rares exceptions près. Par exemple, pour l'image reproduite
figure 3.10, le résultat avec GIF 32 couleurs est assez proche de l'original, tandis qu'en
JPEG des pixels viennent brouiller les contours des bords. Inversement, dans le cas
d'une photographie prise dans des conditions normales, donc présentant de nombreuses
nuances de couleurs, la vignette de compression GIF tend à simplifier l'image et,
partant, à supprimer le réalisme de l'original. Des points apparaissent alors à l'oeil nu,
qui tentent de reproduire, plus ou moins grossièrement, une couleur non référencée en
associant deux autres couleurs.
Une fois le format de fichier défini, il s'agit de paramétrer au mieux le niveau de
compression, soit dans une qualité exprimée en pourcentage (JPEG), soit en un nombre
de couleurs présentes dans la palette de couleurs (GIF). Optimiser la compression d'une
image, c'est choisir le meilleur compromis entre sa qualité d'affichage et son temps de
chargement. Fiez-vous à votre oeil plutôt qu'à la théorie : il n'existe pas de règle
appliquable à toutes les images, et vos objectifs en temps de chargement peuvent
différer d'une page à l'autre. Néanmoins, une qualité oscillant entre 60 et 80% permet de
répondre à la plupart des photos compressées en JPEG. A titre d'exemple, une image de
120 pixels de large sur 120 pixels de haut, en compression JPEG qualité 60%, ne
devrait pas excéder 4 à 6 kilo-octets, mais ce n'est là qu'une approximation.
En GIF, il est rare de devoir dépasser 64 couleurs : si vous le faites, ce doit être pour
des raisons valables : par exemple, vous avez besoin de gérer la transparence, ou vous
tenez absolument à ce que le résultat soit le plus net possible. Si tel n'est pas le cas,
choisir autant de couleurs réduit beaucoup l'intérêt du format GIF, et il est alors
probable que le format JPEG serait plus approprié. Les compressions GIF les plus
courantes oscillent entre 4 et 32 couleurs. Pour un titre sur fond uni, sans ombre portée
ou autre effet particulier, choisissez 8 couleurs : elles suffisent pour un lissage tout à fait
satisfaisant à l'oeil nu.
On peut également agir sur de nombreuses options de compression, mais très peu
sont vraiment utiles, à tel point que les concepteurs de Fireworks ont décidé, depuis la
version 6, de les reléguer dans un menu déroulant : juste retour des choses, car elles
n'ont pas de réelle utilité en entreprise, et ceux qui découvrent le logiciel avaient
tendance à se perdre dans les options proposées. Néanmoins, pour les plus curieux
d'entre vous, nous avons réuni dans les tableaux 3.2 et 3.3 une sélection commentée des
principales options de compression, en GIF puis en JPEG.
Option
Description et commentaires
Usage
Perte
Adapte l'image pour la rendre plus conforme à l'algorithme de Occasionnel
compression. Il s'agit d'une simplification, qui affecte le lissage
des formes.
Gain de compression conséquent, mais le procédé est surtout
utile pour des GIF avec peu de zones franches, ce qui est rare.
Ne pas dépasser 30 %, sauf exceptions.
Diffusion
En agençant des couleurs de base, le logiciel créée l'illusion de Restreint
nouvelles teintes. Ce procédé réduit donc le nombre de couleurs.
Utile surtout pour un public équipé de cartes graphiques
désuettes, incapables d'afficher des millions de couleurs.
Entrelacé
Affiche des versions simplifiées de l'image pendant son
chargement, pour faire patienter les internautes. Équivalent du
JPEG "progressif".
L'intérêt n'est pas évident pour des images au format GIF, et le
Déconseillé
20
résultat est peu esthétique.
Web snap
Transforme des couleurs de l'image en "couleurs web sécurisées" Occasionnel
("web safe colors"), dans une proportion plus ou moins grande.
Il est utile de vérifier que les couleurs de base d'un site font
partie des 216 couleurs, pour un affichage quasi identique sur
tous les ordinateurs. Mais il est plus logique de s'en préoccuper
lors de la charte graphique.
Tableau 3.2 Principales options de compression GIF avec Photoshop / Image Ready
Option
Description et commentaires
Usage
Optimisé
Permet de gagner légèrement en temps de chargement, pour une Restreint
qualité identique.
Environ 5% de gain au final. Les fichiers obtenus sont lus par la
grande majorité des navigateurs, pas par tous.
Progressif Délivre un affichage progressif, par couches, côté internaute,
Déconseillé
pour le faire patienter pendant le chargement. Equivalent du GIF
"entrelacé".
Au final, le temps de chargement total est quasi identique, mais
utilise plus de ressources mémoire.
Flou
Applique l'équivalent du filtre Photoshop "Flou gaussien". Cet Occasionnel
effet permet notamment d'adoucir les zones de transition franche
(exemple : objet qui se découpe sur le ciel).
Ce traitement convient parfaitement au mode de compression
JPEG, avec donc un gain de temps au chargement. Mais mieux
vaut y recourir via les filtres Photoshop, pour traiter séparément
une zone.
Tableau 3.3 Principales options de compression JPEG avec Photoshop / Image Ready
Les formats GIF et JPEG, par ailleurs, ne sont pas figés : leurs algorithmes de
compression continuent à évoluer. Comme pour les logiciels, avec un rythme moins
soutenu tout de même, de nouvelles versions voient régulièrement le jour. Le format
JPEG 2000, par exemple, même s'il est encore peu diffusé sur le réseau, constitue une
avancée notoire puisqu'il s'affranchit du principal défaut du JPEG, à savoir qu'il
3.2.4 Les tranches, ou découpes
Toutes les images, cependant, ne sont pas homogènes. Il arrive qu'une partie de l'image,
isolée dans une photographie par exemple, présente toutes les caractéristiques d'une
compression GIF. C'est le cas avec la figure 3.12. La photo proprement dite, détourée et
appliquée sur un fond blanc, doit être compressée en JPEG, car en GIF elle aurait,
même en 256 couleurs, une qualité moindre, et ce pour un poids supérieur. Le logo, en
revanche, correspond parfaitement aux caractéristiques du GIF. En JPEG il serait, à
poids égal, de qualité médiocre, et moins net5. Plutôt que de choisir le même format
pour toute l'image, et se résoudre à en sacrifier la qualité sur une partie, ayez recours
aux tranches Photoshop / Image Ready, dont les équivalents sous Fireworks sont les
5
La compression JPEG rend l'image un peu plus floue, notamment les contours.
21
découpes6. En découpant l'image en plusieurs, il devient possible de choisir des formats
de fichiers différents. On peut même paramétrer au mieux chaque zone. Ainsi, dans le
cas présent, non seulement le logo est isolé de la silhouette de la jeune fille, mais il est
également isolé du fond blanc uni. Car le fond blanc, s'il est lui aussi parfaitement
adapté au format GIF, ne nécessite pas autant de couleurs que le logo. Le logo nécessite
au moins huit couleurs pour s'afficher correctement (voir l'encadré lissage au début du
présent chapitre), le fond lui peut se contenter d'une couleur7. Donc, quitte à découper
l'image en zones, autant en profiter pour optimiser au mieux le rapport entre la qualité
de l'affichage et le temps de chargement, puisque c'est bien cela dont il s'agit. Mieux
vaut au final une collection de fichiers parfaitement optimisés, plutôt qu'une grande
image mal optimisée.
Figure 3.12 Délimitation de zones de découpes (image extraite du site lancome.com)
Pour délimiter les zones de découpe, commencez par sélectionner l'outil tranches
dans Photoshop / Image Ready, ou l'outil découpes dans Fireworks, puis délimitez les
zones que vous souhaitez compresser différemment. Attention, vous n'y arriverez pas en
cliquant point par point : il faut cliquer une fois et, sans relâcher le bouton, déplacer la
souris pour former un cadre. Relâchez quand le cadre correspond à peu près à la zone
souhaitée. Je dis à peu près, car vous pouvez ensuite zoomer pour affiner la sélection,
via le sous-outil Sélection de tranche de Photoshop / Image Ready ou l'outil Pointeur de
Fireworks : les manettes sur les bords vous permettent d'ajuster au mieux la tranche.
Prenez bien garde de ne pas superposer plusieurs zones, ce qui risque d'arriver si vous
ne zoomez pas au moins à 200%. Avec l'exemple de la figure 3.12, on obtient 5 zones
distinctes.
Une fois le découpage terminé, sélectionnez les découpes tour à tour pour leur
attribuer des paramètres de compression. Pour appliquer les mêmes paramètres à
plusieurs zones, définissez une sélection multiple avec la touche Majuscule enfoncée.
6
Dans les versions anglophones des deux logiciels, un seul terme : slices. Les traducteurs respectifs
d'Image Ready et Fireworks en langue française ont dû oublié de se consulter...
7
Ce qui, techniquement, revient à l'équivalent de deux couleurs, pour des raison liées au système binaire.
Dans une image codée sur 1 bit, un pixel peut prendre deux couleurs, codées respectivement en 0 et 1,
diode allumée, ou diode éteinte. Même s'il une seule couleur est présentedans l'image, il n'existe rien endessous de l'unité binaire.
22
Dans l'exemple en cours, par exemple, il est conseillé de conserver les mêmes
paramètres pour la découpe qui encadre le portrait de la jeune fille et pour celle qui
délimite son épaule et les produits mis en avant, sinon la différence de qualité de part et
d'autre de la délimitation risque d'être perceptible.
Avant 1998, donc avant que les logiciels Fireworks et Image Ready ne voient le
jour, ces opérations se faisaient à la main, dans Photoshop : on sélectionnait une zone
rectangulaire, on la collait dans une nouvelle image, on l'enregistrait séparément en GIF
ou en JPEG, et ainsi de suite. De ce point de vue, le gain de temps engendré par
Fireworks ou Image Ready est appréciable.
Créer des découpes revient à diviser une seule image en plusieurs, donc à produire
au final des fichiers distincts, même si vous gardez l'impression, tant que vous êtes dans
Image Ready ou Fireworks, d'avoir affaire à un seul document. Il faut donc assembler à
nouveau les images dans la page web finale. En code HTML, cela passe par la création
d'un tableau, de 3 colonnes sur 3 lignes dans l'exemple en cours - certaines images
occupant plusieurs cellules : voir à ce sujet les attributs colspan et rowspan de la balise
<td>, dans la référence HTML disponible chapitre 4.
A ce stade, deux possibilités s'offrent à vous :
• compresser séparément les découpes, pour vous occuper vous-même de leur
intégration dans un tableau HTML, au besoin à l'aide d'un éditeur comme
Dreamweaver;
• déléguer à Image Ready (ou Fireworks) l'assemblage des images dans un
tableau HTML : le logiciel crée alors une page HTML et les fichiers images
associés;
Dans le premier cas, lancez Image Ready à partir de Photoshop (icône tout en bas de
la palette d'outils), passez directement par le menu Fichier / Enregistrer une copie
optimisée sous... (menu Fichier / Exporter... avec Fireworks) et, dans la liste déroulante
en face de Type, sélectionnez l'option Images. Dans le second cas, suivez la même
procédure jusqu'au menu déroulant, dans lequel, cette fois, vous opterez pour HTML et
images.
Même si vous choisissez de déléguer au logiciel de compression l'intégration
HTML de vos images, sachez que vous ne pourrez guère vous contenter de la page
obtenue. Ni Image Ready ni Fireworks ne peuvent prétendre remplir complètement le
rôle d'un éditeur HTML. Il faudra de toute façon passer derrière avec un éditeur comme
Dreamweaver pour nettoyer les codes bavards, supprimer les images inutiles, centrer
des contenus dans la page, assembler plusieurs tableaux, ajouter d'autres contenus, gérer
les contenus extensibles 8, ajouter des balises <meta> pour référencer la page, etc. Image
Ready et Fireworks, pas plus que d'autres logiciels, ne peuvent prétendre remplacer la
palette d'outils du webmaster. Cela dit, au-delà de la compression, ils s'avèrent utiles
pour les images animées ainsi que pour les images transparentes.
3.2.5 Les animations GIF
Les animations GIF sont en net recul sur les sites Internet au profit des animations
Flash, notamment depuis la banalisation du format SWF9 pour les publicités en ligne,
8
Voir à ce propos le chapitre 4, qui aborde la technique des espaceurs (spacers).
SWF est une abbréviation de Shockwave, le plug-in permettant de lire une animation Flash. C'est
l'extension par défaut d'une animation Flash optimisée pour le Web (menu Fichier / Exporter).
9
23
ces deux dernières années. La raison en est assez simple : le format GIF importe de
fortes contraintes à l'animation, en termes de poids, mais aussi du point de vue des
possibilités interactives. Une animation GIF est nécessairement linéaire, on ne peut
régler que sa vitesse et la répétition du cycle, à la différence du Flash qui, lui, peut
solliciter une intervention de l'utilisateur et réagir en conséquence. Pour de petites
animations, petites par la surface et par la durée, et exploitant une palette de couleurs
réduite, le GIF peut tout de même rendre service aux webmasters. Il existe des utilitaires
en shareware dédiés au GIF animé, mais le plus simple est encore de créer ces GIF
animés avec Image Ready ou Fireworks. Les procédures de création d'un GIF animé
diffèrent sensiblement entre Image Ready et Fireworks. Nous les détaillons donc
séparément.
Avec Image Ready, la création d'une animation repose sur les calques :
• répartissez chacune des images de votre animation dans un calque séparé;
• si vous êtes toujours dans Photoshop, passez dans Image Ready via l'icône située
en bas de la palette d'outils;
• affichez la palette dédiée aux animations : menu Fenêtre / Animations;
• à droite de la palette, cliquez sur la flèche, et sélectionnez la commande Créer
des images à partir de calques;
• pour ajouter des effets entre deux images (transition, déplacement, etc.),
sélectionnez la première et cliquez sur l'icône Trajectoire des images animées
située au bas de la palette : vous pourrez ainsi créer des images intermédiaires
avec un des effets disponibles;
• en bas de la palette, un bouton de lecture vous donne un premier aperçu de
l'animation;
• en bas à gauche, réglez la fréquence de l'animation : jouée en boucle, ou jouée n
fois;
• sous chaque vignette, définissez le délai pendant lequel l'image doit rester
affichée; si vous voulez appliquer le même délai à toutes les images, faites des
sélections multiples avec les touches Ctrl ou Majuscule;
• dans la palette Optimiser, sélectionnez le format GIF, puisque lui seul est
capable de gérer les animations bitmap sur le web;
• pour obtenir le fichier final, passez par le menu Fichier / Enregistrer une copie
optimisée sous...
Avec Fireworks, la logique est similaire, mais la présentation un peu différente : les
images ne sont pas gérées directement dans les calques, mais dans la palette séparée
images :
• ouvrez la palette Images; pour créer de nouvelles images, une icône est
disponible en bas à droite de la palette, juste avant l'icône représentant une
poubelle;
• répartissez chacune des images de votre animation sur une ligne de la palette
Images, par copier-coller par exemple;
• en bas du document preprement dit, un bouton de lecture vous donne un premier
aperçu de l'animation;
• en bas de la palette, cliquer sur la seconde icône Régler la fréquence de
l'animation : jouée en boucle, ou jouée n fois;
• à droite de chaque image de la palette, définissez le délai (en centièmes de
secnode) pendant lequel elle doit rester affichée; si vous voulez appliquer le
24
même délai à toutes les images, faites des sélections multiples avec les touches
Ctrl ou Majuscule;
• dans la palette Optimiser, sélectionnez le format GIF animé;
• pour obtenir le fichier final, passez par le menu Fichier / Exporter...
La palette Images de Fireworks joue d'ailleurs un rôle central, puisque c'est
également là que l'on gère les différents états d'une image survolée (rollover).
Pour ces raisons, il peut s'avérer utile de transformer les calques d'un fichier
Photoshop en autant d'états de la palette Images dans Fireworks. Voici la marche à
suivre. Une fois que vous avez ouvert sous Fireworks le fichier PSD contenant les
calques, allez dans la palette Calques, affichez les calques que vous voulez récupérer
(icône en forme d'oeil, comme dans Photoshop), sélectionnez-les tous avec Ctrl-A;
ensuite allez dans la palette Images, cliquez sur la flèche en haut à droite, et
sélectionnez la commande Répartir dans les images. Les images obtenues sont
exploitables pour créer aussi bien des animations que des survols d'images.
3.2.6 La transparence
Si votre intention est de créer une image détourée sur fond transparent, pour ensuite
être à même de l'appliquer à n'importe quel fond de page web (ou fond de cellule de
tableau), dites-vous que le résultat ne sera valable que si les fonds en question
présentent un niveau de luminosité proche du fond d'origine.
En effet, quand vous créez une image avec Photoshop, il y a très souvent des zones
de lissage ajoutées au fur et à mesure des opérations par le logiciel (voir encadré
consacré au lissage, dans la première partie du présent chapitre). Ce lissage est adapté
au fond de l'image, par exemple le blanc. Si vous créez un cercle rouge sur fond blanc,
le lissage va consister en un éventail de nuances comprises entre le rouge et le blanc.
Même si vous ajoutez par la suite un fond transparent derrière le cercle, vous ne pourrez
pas insérer le fichier GIF dans une page web dont le fond serait sombre. Car le lissage,
toujours présent, formerait un halo particulièrement laid autour de l'image.
Autrement dit, vous pouvez insérer une même image avec transparence sur des
pages de couleurs différentes, pourvu que la luminosité des couleurs concernées reste
homogène. On pourrait dès lors être tenté de supprimer le lissage, mais cela reviendrait
à détériorer la qualité des contours, avec une perte visible à l'oeil nu. Si, lors de
l'enregistrement en GIF transparent, vous connaissez le niveau de luminosité des pages
sur lesquelles l'image sera présente, le problème est résolu.
Une autre difficulté liée à la transparence doit être prise en compte. Imaginons un
bouton lissé sur un fond blanc, destiné à une page claire. Si au moment du détourage
vous sélectionnez le blanc autour de l'image, tout pixel contenu dans le bouton
deviendrait alors transparent, ce qui bien entendu n'est pas souhaitable.
Voici une façon efficace de gérer la transparence avec Photoshop (Image Ready
n'apporte rien de plus), un peu longue mais qui évite les deux écueils exposés ci-dessus :
• préparez votre image avec un fond en niveau de gris (donc entre blanc et noir),
dont la luminosité se rapproche de celle de la page finale;
• dupliquez le document en cours : menu Image / Dupliquer;
• dans le document obtenu, fusionnez les calques (Ctrl-E);
25
•
sélectionnez l'outil Baguette magique (2ème rangée, à droite dans la palette
d'outils), réglez la tolérance à 0 dans les options de l'outil, décochez Lissé,
cochez pixels contigus;
• toujours avec l'outil Baguette magique, cliquez dans la zone qui doit devenir
transparente;
• cliquez sur le premier des deux carrés en bas de la palette d'outils (Couleur de
premier plan) : dans le sélecteur qui s'affiche, choisissez une couleur dont vous
êtes sûr qu'elle n'est pas présente dans l'image, par exemple un vert ou un bleu
bien fluos10;
• remplissez la sélection en cours avec la couleur de premier plan : menu Édition
/ Remplir / Couleur premier plan, ou le raccourci clavier Alt-Suppr;
• lancez la fenêtre d'enregistrement pour le web : menu Fichier / Enregistrer pour
le web;
• dans les paramètres d'enregistrement situés à droite de la fenêtre, choisissez le
format GIF (le format JPEG ne gère pas la transparence), fixez le nombre de
couleurs souhaitées, cochez Transparence et optez pour Lissage Sans;
• avec l'outil Pipette présente à gauche de la fenêtre d'enregistrement pour le web,
sélectionnez la couleur fluo qui délimite la transparence souhaitée;
• à droite, sous la Table des couleurs, cliquez sur la première des cinq icônes
présentes (Associer la transparence aux couleurs sélectionnées);
• validez en cliquant sur le bouton Enregistrer;
Avec Fireworks, la procédure est similaire, mais avec une présentation différente :
• préparez votre image avec un fond en niveau de gris (donc entre blanc et noir),
dont la luminosité se rapproche de celle de la page finale;
• fusionnez les calques (Ctrl-E);
• sélectionnez l'outil Baguette magique (4ème rangée, à gauche dans la palette
d'outils), réglez la Tolérance à 0 dans la fenêtre Propriétés, optez pour Bord Net;
• toujours avec l'outil Baguette magique, cliquez dans la zone qui doit devenir
transparente;
• cliquez sur le second des deux carrés en bas de la palette d'outils (Couleur de
remplissage) : dans la liste qui s'affiche, choisissez une couleur dont vous êtes
sûr qu'elle n'est pas présente dans l'image, par exemple un vert ou un bleu bien
fluos;
• remplissez la sélection en cours avec la couleur de remplissage : avec l'outil Pot
de peinture (7ème rangée, à droite dans la palette d'outils), ou le raccourci
clavier Alt-Suppr);
• lancez la fenêtre d'enregistrement pour le web : menu Fichier / Aperçu avant
exportation;
• dans les paramètres d'enregistrement situés à gauche de la fenêtre, choisissez le
format GIF (le format JPEG ne gère pas la transparence), fixez le nombre de
couleurs souhaitées;
• cliquez sur la première des trois pipettes présentes en bas à gauche de la fenêtre
(Sélectionner la couleur de transparence), et sélectionnez la couleur fluo qui
délimite la transparence souhaitée;
10
Le bleu fluo est privilégié pour les images détourées en studio, notamment pour le cinéma, car c'est la
couleur la moins présente dans la pigmentation de la peau : donc idéale pour détourer des personnages.
26
• validez en cliquant sur le bouton Exporter;
Outre la réutilisation d'images de page en page, il existe d'autres applications
possibles des images transparentes.
En ajoutant de la transparence dans un GIF animé, d'abord, vous pouvez dissocier
les objets animés du décor de fond. Récupérez le fond dans une image enregistrée
séparément, et qui sera incluse au final dans le fond d'une cellule de tableau HTML
(<td background="fond.jpg"> par exemple), enregistrez votre animation au format
GIF, animation qui sera alors placée au premier plan de la même cellule. Ainsi vous
évitez la répétition des images de fond, et créez des animations plus aisées à réutiliser.
D'autres possibilités exploitant des calques DHTML sont également envisageables. Les
calques DHTML, qui sont géré par Dreamweaver MX dans la palette du même nom,
peuvent être empilés les uns sur les autres, et déplacés dans la page par les internautes
eux-mêmes, par simple glisser-déposer (Déplacement de calque dans la palette
Copportements de Dreamweaver). Dès lors, si vous placez une grande image au premier
plan, en guise de masque, puis que vous créez une ouverture à l'intérieur, vous pourrez
en le déplaçant dévoiler des contenus présents au second plan, le tout en HTML 4, sans
recours à la technologie Flash.