7
Anne JOLLY – Clic Clac Club – 8 avril 2008 Préparer ses photos pour le web (galerie photos, forum, email...) I - Préparer, pourquoi ? Taille et poids de l'image : Une photo qui sort d'un réflex numérique à 12 millions de pixels, par exemple, peut peser 72,8 Mo et faire 4368 x 2912 pixels. Un écran d'ordinateur, aujourd'hui, c'est environ 1024 x 768 pixels ou 1280 x 1024 pixels. Une photo qui excéderait ces dimensions et/ou qui ne tiendrait pas compte de la place prise par les différentes barres du navigateur sortirait de l'écran ! La question du poids n'est plus un problème aujourd'hui avec l'ADSL pour créer un site photo (en revanche, sur les forums, il convient de respecter les poids et les tailles imposés). Formats de sortie pour le web : Il n'existe que 3 formats d'image possible sur Internet : GIF (.gif) : adapté aux logos, schémas, croquis, gifs animés Correspond à une compression des couleurs (256 couleurs maximum). Gère les transparences sur une couche. JPEG (.jpg) : adapté aux photos Correspond à une compression des données : perte de petits détails +/- importante selon la compression. PNG-24 (.png) : adapté aux logos, schémas, croquis, images en transparence Alternative intéressante aux deux précédentes, mais non reconnue par tous les navigateurs. Gère les transparences sur plusieurs couches. II - Gérer les enregistrements Pour la préparation d'une photo destinée au Web, on utilise la commande : Fichier > Enregistrer pour le web > JPEG Par rapport à la commande Enregistrer sous > JPEG, elle offre quelques avantages : Qualité d'image variant de 0 à 100 au lieu de 0 à 12. Possibilité de voir l'effet de la compression avant/après (sur 1 ou 3 niveaux de compression) Possibilité d'intégrer le profil ICC pour seulement 3 ko en plus (inutile tant que les navigateurs ne sauront pas le lire) En GIF, la possibilité de voir le panel des couleurs transcrites.

Préparer ses photos pour le web (galerie photos, forum, email)clicclacclub.free.fr/tutoriaux/photosweb.pdf · Préparer ses photos pour le web (galerie photos, forum, email...) I

  • Upload
    others

  • View
    4

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Préparer ses photos pour le web (galerie photos, forum, email)clicclacclub.free.fr/tutoriaux/photosweb.pdf · Préparer ses photos pour le web (galerie photos, forum, email...) I

Anne JOLLY – Clic Clac Club – 8 avril 2008

Préparer ses photos pour le web(galerie photos, forum, email...)

I - Préparer, pourquoi ?

Taille et poids de l'image :

Une photo qui sort d'un réflex numérique à 12 millions de pixels, par exemple, peut peser 72,8 Mo et faire 4368 x 2912 pixels.

Un écran d'ordinateur, aujourd'hui, c'est environ 1024 x 768 pixels ou 1280 x 1024 pixels. Une photo qui excéderait ces dimensions et/ou qui ne tiendrait pas compte de la place prise par les différentes barres du navigateur sortirait de l'écran !

La question du poids n'est plus un problème aujourd'hui avec l'ADSL pour créer un site photo (en revanche, sur les forums, il convient de respecter les poids et les tailles imposés).

Formats de sortie pour le web :

Il n'existe que 3 formats d'image possible sur Internet :

GIF (.gif) : adapté aux logos, schémas, croquis, gifs animés

Correspond à une compression des couleurs (256 couleurs maximum). Gère les transparences sur une couche.

JPEG (.jpg) : adapté aux photos

Correspond à une compression des données : perte de petits détails +/- importante selon la compression.

PNG-24 (.png) : adapté aux logos, schémas, croquis, images en transparence

Alternative intéressante aux deux précédentes, mais non reconnue par tous les navigateurs. Gère les transparences sur plusieurs couches.

II - Gérer les enregistrementsPour la préparation d'une photo destinée au Web, on utilise la commande :

Fichier > Enregistrer pour le web > JPEG

Par rapport à la commande Enregistrer sous > JPEG, elle offre quelques avantages :

• Qualité d'image variant de 0 à 100 au lieu de 0 à 12.

• Possibilité de voir l'effet de la compression avant/après (sur 1 ou 3 niveaux de compression)

• Possibilité d'intégrer le profil ICC pour seulement 3 ko en plus (inutile tant que les navigateurs ne sauront pas le lire)

• En GIF, la possibilité de voir le panel des couleurs transcrites.

Page 2: Préparer ses photos pour le web (galerie photos, forum, email)clicclacclub.free.fr/tutoriaux/photosweb.pdf · Préparer ses photos pour le web (galerie photos, forum, email...) I

Anne JOLLY – Clic Clac Club – 8 avril 2008

III - Les étapes (commandes valables sous Photoshop CS21)

1. Préparer l'image originelle (0.psd)

Recadrer si nécessaire

Retirer les pétouilles

Faire les niveaux

Etc.

Enregistrer une copie avec les calques (1.psd), pour pouvoir y revenir facilement

Aplatir l'image

Calque > Aplatir l'image

et non : Calque > Fusionner les calques visibles, qui risque de laisser une bordure semi-transparente et inesthétique sur la photo.

2. Redimensionner pour le web

Image > Taille de l'image

Cocher la case rééchantillonnage et entrer en largeur ou en hauteur le nombre de pixels désiré, sans toucher à la résolution et en respectant les proportions.

3. Accentuer

Se mettre en Taille réelle des pixels pour appliquer une accentuation adaptée à la taille de l'image. Plus une image est grande, plus l'accentuation doit être importante.

Filtre > Renforcement > Accentuation

4. Passer en 8 bits (éventuellement)

Image > Mode > 8 bits

5. Convertir en profil sRGB

La conversion en sRGB permet d'obtenir des couleurs plus fidèles sur tous les ordinateurs des différents internautes.

Edition > Convertir en profil > Espace de destination > Profil sRGB

et non :

Edition > Attribuer un profil > Espace de destination > Profil sRGB

(Note : Attribuer un profil s'utilise, par exemple, pour une photo faite avec un Compact numérique dont le profil n'est pas nécessairement intégré à l'image lorsque celle-ci est ouverte sous Photoshop. Après lui avoir attribué un profil sRGB, il convient de la convertir en Adobe RVB pour la travailler.)

1 Sous Photoshop Element, les commandes existent mais n'ont pas nécessairement les mêmes noms et ne sont pas toujours rangées aux mêmes endroits.

Page 3: Préparer ses photos pour le web (galerie photos, forum, email)clicclacclub.free.fr/tutoriaux/photosweb.pdf · Préparer ses photos pour le web (galerie photos, forum, email...) I

Anne JOLLY – Clic Clac Club – 8 avril 2008

Avec les options de conversion suivantes :

• Moteur : Adobe (ACE) - Détermine le logiciel faisant la conversion.

• Mode : Perceptive – Les écarts entre les couleurs sont conservés ce qui rend mieux compte du contraste (En colorimétrie relative, toutes les valeurs hautes sont écrétées vers le même espace couleur supérieur du sRGB).

• Compensation du point noir – Crée la correspondance entre la couleur source la plus fonçée et la couleur cible la plus fonçée, et non avec le noir.

6. Enregistrer pour le Web :

Commande créant automatiquement une copie du fichier en 72 ppp.

4 options sont disponibles :

La qualité (compression) : option la plus importante !

Réduit le poid en ôtant du détail. On détermine la qualité sur une échelle continue (de 0 à 100) ou discontinue (Faible, Elevée, Moyenne, Maximale).

Pour chaque degré de qualité, le poid du fichier final s'affiche sous les images cibles.

Une qualité de 100 ne sert à rien. A partir de 80, en général, on ne perçoit plus de différence avec l'original.

Pour un site photo, on peut aisément monter à une qualité de 80. Pour un forum, il faut se conformer au poids maximal indiqué et faire varier la qualité en conséquence.

Le flou

Réduit le poid en créant un flou : Ne pas dépasser des valeurs de 0,1 à 0,4, mais le mieux est de ne pas utiliser cette option. Elle est devenue caduque avec l'évolution d'Internet.

Le détourage simulé

Permet d'appliquer une couleur de fond à la transparence d'une image PSD que l'on souhaite enregistrer pour le web en jpeg.

Les options d'affichage

La fonction Progressif permet d'augmenter progressivement la qualité de l'image vue par l'internaute pour le faire patienter. Là encore, cette fonction n'a plus guère d'intérêt.

Page 4: Préparer ses photos pour le web (galerie photos, forum, email)clicclacclub.free.fr/tutoriaux/photosweb.pdf · Préparer ses photos pour le web (galerie photos, forum, email...) I

Anne JOLLY – Clic Clac Club – 8 avril 2008

Page 5: Préparer ses photos pour le web (galerie photos, forum, email)clicclacclub.free.fr/tutoriaux/photosweb.pdf · Préparer ses photos pour le web (galerie photos, forum, email...) I

Anne JOLLY – Clic Clac Club – 8 avril 2008

Page 6: Préparer ses photos pour le web (galerie photos, forum, email)clicclacclub.free.fr/tutoriaux/photosweb.pdf · Préparer ses photos pour le web (galerie photos, forum, email...) I

Anne JOLLY – Clic Clac Club – 8 avril 2008

Page 7: Préparer ses photos pour le web (galerie photos, forum, email)clicclacclub.free.fr/tutoriaux/photosweb.pdf · Préparer ses photos pour le web (galerie photos, forum, email...) I

Anne JOLLY – Clic Clac Club – 8 avril 2008