Tutoriel : préparer ses photos pour le web

17

Aujourd’hui j’ai reçu par internet un dossier contenant seulement 9 photos pour 36 Mo.

La personne qui m’a transmis ce dossier m’a avoué ne pas savoir préparer ses photos pour une diffusion web.

Je lui ai donc renvoyé ce tutoriel dans lequel je présente comment préparer ses photos avec différents logiciels : Xnview, Lightroom et Photoshop afin de les diffuser sur la toile avec un poids et une taille raisonnable.

Préparer ses photos avec Xnview, Lightroom ou photoshop
Préparer ses photos avec Xnview, Lightroom ou Photoshop

Rappels avant de commencer :

  • Non compressées, les photos pèsent environ 3 à 10 Mo à la sortie de l’appareil photo. Les fichiers RAW pèsent encore plus lourd. L’augmentation de la résolution de nos capteurs laisse à penser que dans l’avenir les photos seront de plus en plus en lourdes.
  • Suivant la sensibilité ISO utilisée, le poids des photos varie. De même, suivant le sujet photographié, le poids peut varier.
  • Non redimensionnées, les photos ont une taille de 2000 x 1500 à 3000 x 2000 pixels (voir plus)
  • La majorité des utilisateurs du web possèdent des écrans aux résolutions voisines 1024 x 768 pixels. Cette résolution permet d’afficher des photos de 800 pixels de côté (au-delà il faut utiliser les « ascenseurs » pour regarder la photo en entier).

Pour ce tutoriel, j’utilise une photo de 1500 x 1000 pixels. Je souhaite lui donner une taille de 800 pixels pour le côté le plus grand.

Comment compresser ses photos avec Xnview

Xnview est un logiciel gratuit disponible sur de nombreux sites de téléchargement.

Redimensionnement avec Xnview : étape 1
Compresser avec Xnview : étape 1

Étape 1 : dans l’onglet « Général »

  1. Choisir les photos à traiter en les sélectionnant dans le logiciel
  2. Dans outils choisir conversions multiples
  3. Définir le dossier de destination
Redimensionnement avec Xnview : étape 3
Compresser avec Xnview : étape 2

Étape 2 : dans l’onglet « transformations »

  1. Sélectionner : « redimensionner » puis cliquez sur « ajouter »
  2. Définir la dimension de la photo (800 x 800), je donne le même format pour la largeur et pour la hauteur afin de garder le même ratio pour les photos en paysage comme en portrait.
  3. Appuyez sur Lancer, pour commencer la préparation des photos.

Il est possible de créer un script pour éviter les manipulations redondantes.

Redimensionnement avec Xnview : étape 4
Redimensionnement avec Xnview : étape 3

Étape 3 :

Diffuser les photos

Préparer ses photos avec Lightroom

Lightroom permet de gérer les flux de productions photographiques de l’importation des données depuis un périphérique jusqu’à la publication. Il remplace ainsi le logiciel Photoshop pour les tâches courantes des photographes. Il est idéal dans le traitement de fichiers raw.

Préparer ses photos avec Lightroom : Etape 1
Préparer ses photos avec Lightroom : Étape 1

Étape 1 : (Après retouches, tri et édition des champs IPTC)

  1. Sélectionner les photos à diffuser sur le web
  2. Cliquez sur « Exporter »
Préparer ses photos avec Lightroom : Etape 2
Préparer ses photos avec Lightroom : Etape 2

Étape 2 :

  1. Définir le dossier de destination
  2. Définir la dimension des photos (800 x 800 pixels)
  3. Choisir la netteté des photos en fonction de l’utilisation des photos, ici une netteté pour les écrans avec un gain élevé
  4. Exporter les photos et les diffuser

Il est possible de réutiliser ces paramètres. Pour cela, il faut les sauvegarder en cliquant sur « Ajouter ». Par la suite il suffit de sélectionner le paramètre enregistré.

Optimiser ses photos avec Photoshop

Avec Photoshop l’opération, si elle est réalisée manuellement, peut se révéler longue et fastidieuse, pour éviter cela je recommande l’utilisation d’un script.

Optimiser ses photos avec photoshop : étape 1
Optimiser ses photos avec Photoshop : étape 1

Étape 1 :

  • Définir la résolution
Optimiser ses photos avec photoshop : étape 1
Optimiser ses photos avec Photoshop : étape 2

 Étape 2 :

  • Fichier -> Automatisation -> Adapter l’image
Optimiser ses photos avec photoshop : étape 2
Optimiser ses photos avec Photoshop : étape 3

Étape 3 :

  • Définir la taille de l’image
Optimiser ses photos avec photoshop : étape 3
Optimiser ses photos avec Photoshop : étape 4

Étape 4 :

  • Filtre -> Renforcement -> Accentuation
Optimiser ses photos avec photoshop : étape 4
Optimiser ses photos avec Photoshop : étape 5

Étape 5 :

  • Définir le gain, le rayon, le seuil.
  • Gain : Quantité d’accentuation à appliquer 0 % à 500 %.
  • Rayon : Le nombre de pixels que l’on veut accentuer au niveau du contour. Je ne dépasse pas 2.5 car au-delà cela peut créer du bruit disgracieux.
  • Seuil : Il détermine la différence de niveau entre 2 pixels proches pour que le filtre considère un contour

Il ne reste alors qu’à diffuser les photos sur le web.

Pour un meilleur résultat, il est conseillé de procéder par étapes successives, en 3 voir 4 passages. L’emploi d’un script est alors obligatoire.

17 COMMENTAIRES

  1. Super :c ‘est ce que je cherchais ;pour envoyer des photos sur le weeb.
    Je continuerais a visiter votre site ;il me semble très intéressant

    Bravo et merci pour ce partage ,tant de gens comme moi sont a la recherche d’idées

    Que du bonheur de rencontrer des gens qui partage leur savoir!!

    Merci Merci

  2. J’adore XnViex que j’utilise depuis longtemps pour préparer mes photos pour le web.

    En plus de pourvoir les redimensionner, XnView dispose d’une fonction bien cachée dans le traitement par lot qui permet d’ajouter du texte, dans le coin de votre choix de l’image, et il est possible de régler la taille et le style de police ainsi que la couleur. Pratique pour faire du watermak en même temps que le redimensionnement.

    Bel article,

    Aymeric

    • Bonjour,
      Article très interessant et pragmatique… merci !

      Une question tout de même : Je suis en train de réaliser un site qui contient beaucoup de photos bien que l’objet du site n’a rien à voir avec la photo en soit…
      Comme les photos sont de qualité assez hétérogènes, je pensais qu’il serait « judicieux » de passer un filtre pour uniformiser le rendu à l’écran de toutes les photos.
      Pensez vous que cette manip est necessaire ?
      Et si oui quel filtre me conseillez vous ?
      Merci

    • @pinpindesmpontagnes

      A chaque photo son traitement selon la sensibilité de son auteur ou les besoin de l’utilisateur.
      Sans voir les photos il est impossible de donner ce type de conseils.

  3. Bonjour,

    je tenais juste à signaler que modifier le nombre de DPI ne sert à rien. Il s’agit juste d’une information dans le fichier, destinée à la chaîne d’impression : que l’on mette 72 ou 300 DPI ne changera en rien le poids de l’image (peut-être 1 octet de plus pour le 300dpi 🙂 ), ça changera simplement sa taille à l’impression, de façon inversement proportionnelle à la valeur indiquée. Ex : une image de 3000×2000 px à 300 dpi sera imprimée sur 10″x6.66″ (3000/300 et 2000/300), soit ~25*17cm. La même image à 72 dpi sera imprimée sur ~105*70 cm. Sauf erreur de calcul.

  4. […] Sur le plan technique la photo ne doit pas excéder 800px pour le plus grand coté et son poids ne doit pas dépasser 200Ko. La compression est l’affaire du photographe, je peux la faire à votre place mais je risque de dénaturer la qualité de votre photo. Je vous laisse donc le soin de préparer votre photo. […]

LAISSER UNE RÉPONSE

S'il vous plaît entrez votre commentaire!
S'il vous plaît entrez votre nom ici

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.