Optimisation d`images pour le web

Optimisation
d’images pour le web
Animaux
Photoshopversion 6 exercices
Optimisation des images pour le web
 Animaux
Optimisation et enregistrement d’une image dans Photoshop
1) Vous aller optimiser une image au format Jpeg et Gif. Photoshop sera utilisé pour le Jpeg et ImageReady pour le
Gif. Les deux applications sont capables d’effectuer les compressions.
2) Ouvrez le fichier “14Start1.psd”. Tel quel, le fichier est
trop volumineux pour apparaître sur une page web.
3) Choisissez “Fichier>Enregistrer pour le web”. Cliquez sur
l’onglet “4 vignettes” afin d’afficher 4 versions de l’image.
Vous pouvez désormais, définir 4 versions de l’image.
4) Dans le champs “affichage” dans le coin inférieur gauche
de la boite de dialogue, sélectionnez un agrandissement de
200% ou plus pour voir les détails de l’image.
5) Choisissez l’outil “main” et
faites glisser l’image de manière
à rendre visible le texte “Tropical
Rainforest” au centre de l’image
sur le perroquet vert.
6) Dans le menu déroulant
“Paramètres”, choisissez “Gif 128
tramé”. Remarquez le groupe de pixels sombres autour du texte et sur le bec du perroquet. les deux vignettes du bas vont servir à donner un aperçu de l’image aux formats
“Jpeg” et “Png”.
7) Cliquez sur la version en bas à gauche pour la sélectionner, puis choisissez “Jpeg bas” dans le menu parmètres.
L’image à un aspect un peu trouble, particulièrement dans la zone de texte.
8) Choisissez maintenant “Jpeg haut”, le rendu de l’image est meilleur mais au prix d’un accroissement significatif
de la taille du fichier.
9) Choisissez maintenant “Jpeg moyen”, la qualité de l’image est maintenant acceptable et le fichier est bien moindre que dans les versions “Jpeg haut” ou “Gif 128”.
10) Sélectionnez la version “Jpeg” en bas à gauche. Activez l’option “progressif” et cliquez sur OK. Cette action
permet un chargement en plusieurs étapes.
11) Dans la boite de dialogue “enregistrer une copie optimisée”, conservez le nom par défaut “14Start1.jpg” et
enregistrez la version Jpeg. Fermez le fichier “14Start1.psd” sans enregistrer les modifications.
Optimisation d’une image Gif
1) Cliquez sur le bouton “Passer à Image Ready”. Dans Image Ready, choisissez
“Fichier>Ouvrir” et ouvrez le fichier “14Start2.psd”. Cette image a été créée dans
Illustrator, puis convertie en pixels dans Photoshop.
2) Cliquez sur l’onglet 2 vignettes. La version optimisée est sélectionnée dans la
partie droite de la fenêtre.
3) Dans la palette Optimiser, choisissez GIF 128 Non Tramé dans le menu déroulant puis
“Perception” dans le menu “Algorithme de réduction de couleurs”.
La barre d’état au bas de la fenêtre indique le rapport d’agrandissement et d’autres données sur les versions originale et optimisée de l’image. On peut afficher simultanément
deux séries d’informations sur le fichier.
4) Choisissez “Dimensions de l’image” dans le deuxième menu déroulant de la barre
d’état. Cette option affiche la taille de l’image en pixels,
une information importante lorsqu’il s’agit d’intégrer
l’image dans une page web.
5) Si la palette “Table des couleurs” n’est pas visible,
choisissez “Fenêtre>Afficher Table des couleurs”. Les
losanges blancs indiquent les couleurs web sécurisées.
Cette palette présente les couleurs retenues dans la palette
“Perception” pour l’image de la carte du zoo.
6) Choisissez “Triez par teinte” dans le menu de la palette “Table des couleurs”. Dans le menu
“Algorithme de réduction de couleurs”, choisissez “Web”. Notez les modifications dans la palette des
couleurs puis essayez d’autres règlages.
50
7) Dans la palette “Optimiser”, choisissez l’option “Perception”. Dans la fenêtre de document, règlez l’échelle de l’image sur 200% ou plus de manière à
voir les détails.
8) Sélectionnez la version optimisée, appuyez sur la barre d’espace et tout
en la maintenant enfoncée, déplacez l’image de manière à centrer le texte
“Tropical Rainforest” en bas de la zone d’affichage. Notez la taille en cours
du fichier. Règlez à 32 le nombre des couleurs dans la palette “Optimiser”.
Remarquez la modification sur la taille du fichier.
9) Modifiez le nombre des couleurs de nouveau sur 128 à 100%.
Cette fois vous allez verrouiller certaines couleurs pour vous assurer que celles-ci seront bien présentes dans la
palette réduite.
10) Sélectionnez la “Pipette” et cliquez sur le chameau dans la partie African
Savannah pour prélever sa couleur. Cette nuance sombre de marron, est désormais
sélectionnée dans la palette des couleurs. Cliquez sur l’icone “Verrouillage” pour conserver la couleur. Un petit carré au coin inférieur droit s’affiche. Pour déverrouiller
une couleur cliquez de nouveau sur l’icone.
Répétez l’opération pour verrouiller le bleu sombre de la zone Northern wilderness puis revenez sur 32 couleurs.
Remarquez les changements dans la palette couleurs.
11) Revenez ensuite sur 128 couleurs afin de verrouiller les couleurs de toutes les silhouettes animales et des trois
nuances de bleu de la zone Northern wilderness. La qualité de l’image commence à se dégrader sérieusement en deçà
de 32 couleurs. Faites des essais de nombre de couleurs puis revenez à 32 couleurs.