Didacticiel du Pôle de création
Optimisez vos images pour le Web
Si vous êtes nouveau venu à la création de graphiques Web, la technique d'enregistrement d'une image destinée au Web peut se présenter comme un réel défi. Les éléments dont vous devez tenir compte, tels que le format et la taille de fichier, les couleurs, la transparence, sont tellement nombreux qu'il est souvent difficile de savoir par où commencer. L'application Adobe® Photoshop® 7.0 met à votre disposition la boîte de dialogue Enregistrer pour le Web, à partir de laquelle vous pouvez prévisualiser plusieurs versions d'une image optimisée sans modifier le fichier source. Découvrez dans les étapes suivantes les rudiments de l'optimisation des images pour le Web.
1. Ouvrez la boîte de dialogue Enregistrer pour le Web.
Choisissez Fichier > Enregistrer pour le Web, et sélectionnez une option d'affichage en cliquant sur un onglet.
L'onglet Optimisée affiche l'image avec les paramètres d'optimisation courants, l'onglet 2 vignettes présente l'image originale à côté de l'image optimisée pour faciliter leur comparaison, et l'onglet 4 vignettes représente plusieurs versions de l'image optimisée.
2. Appliquez vos paramètres d'optimisation.
Cliquez sur une version de l'image pour la sélectionner (un cadre noir indique que l'image est sélectionnée), et choisissez un paramètre d'optimisation dans le menu Paramètres. Le but recherché lors du choix d'un paramètre d'optimisation est de conserver la qualité de l'image tout en minimisant la taille de fichier, et par conséquent, le temps de téléchargement. La taille du fichier et le temps de téléchargement, selon le type de la connexion utilisée, s'affichent en dessous de l'image. Vous pouvez choisir une vitesse de connexion différente dans le menu Aperçu, dans le coin supérieur droit du panneau.
Nous avons opté pour le format GIF, qui prend en charge la transparence. Le format JPEG préserve une gamme de couleurs plus étendue que le format GIF et convient le mieux aux images en tons continus, telles que les photographies. Toutefois, ce format ne prend pas en charge la transparence.
3. Verrouillez une couleur.
Sélectionnez l'outil Pipette, et prélevez la couleur que vous voulez conserver. Cliquez sur le bouton Verrouiller les couleurs sélectionnées dans la table des couleurs. Un petit carré blanc s'affiche dans le coin inférieur droit de la couleur verrouillée. Désormais, si vous choisissez un paramètre d'optimisation avec un nombre de couleurs moins élevé, la couleur verrouillée est protégée dans l'image.
Pour chaque version sélectionnée, la table des couleurs sur la droite affiche les couleurs utilisées dans la palette de l'image optimisée. Certaines couleurs sont supprimées de la table au fur et à mesure que vous réduisez le nombre total des couleurs de l'image. Vous pouvez toutefois contrôler le nombre de couleurs à conserver en les verrouillant. Le verrouillage d'une couleur garantit sa présence dans la palette de couleurs, même lorsque vous éliminez les trois quarts des couleurs utilisées dans l'image, comme dans notre exemple.
4. Associez une couleur à une transparence.
Sélectionnez une couleur à l'aide de l'outil Pipette. (Nous avons sélectionné le cadre rouge.) Cliquez sur le bouton Associer/Dissocier la transparence dans la table des couleurs. Vous pouvez utiliser la même méthode pour convertir une couleur : choisissez la couleur à modifier à l'aide de l'outil Pipette, cliquez deux fois sur la nuance dans la table des couleurs, puis choisissez une nouvelle couleur dans le sélecteur de couleur.
Lorsque vous convertissez une couleur ou que vous l'associez à une transparence, la nuance correspondante de la table des couleurs se divise en deux en diagonale. La nouvelle couleur s'affiche dans la partie supérieure, et la couleur d'origine dans la partie inférieure La couleur n'est pas modifiée dans le fichier original, et vous pouvez facilement revenir à la couleur d'origine dans la version optimisée. Pour annuler un déplacement de couleur, cliquez deux fois sur la nuance dans la table des couleurs, puis sur OK dans le sélecteur de couleur. Pour rétablir une couleur après l'avoir associée à une transparence, sélectionnez-la dans la table des couleurs, puis cliquez de nouveau sur le bouton Associer/Dissocier la transparence.
