Tutoriel : préparer ses photos pour le web

15

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 (parfois plus) à la sortie de l’appareil photo.
  • Non redimensionnées les photos ont une taille de 2000 x 1500 à 3000 x 2000 pixels
  • 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 coté (au delà il faut utiliser les « ascenseurs » pour regarder la photo en entier).
  • 72 DPI sont largement suffisant pour une diffusion web (et plus légers que 300DPI)

Pour ce tutoriel j’utilise une photo de 1500 x 1000 pixels et d’une résolution de 300Dpi. Je souhaite lui donner une taille de 800 pixels pour le coté le plus grand et une résolution de 72 Dpi

 

 

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

Etape 1 :

  1. choisir les photos à traiter
  2. dans outils choisir conversions multiples
  3. définir le dossier de destination
  4. passer à l’étape 2 : onglet transformation
Redimensionnement avec Xnview : étape 3
Compresser avec Xnview : étape 3

  Etape 2 :

  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. Lancer

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

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

Etape 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 : Etape 1

Etape 1 : (Après retouches et édition des champs IPTC)

  1. Sélectionner les photos
  2. Exporter
Préparer ses photos avec Lightroom : Etape 2
Préparer ses photos avec Lightroom : Etape 2

Etape 2 :

  1. Définir le dossier de destination
  2. Définir la dimension des photos (800 x 800 pixels) et lui choisir la résolution (72Dpi)
  3. Choisir la netteté des photos en fonction de  l’utilisation des photos
  4. Exporter les photos et les diffuser

 

 

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

Etape 1 :

  • Définir la résolution (72Dpi)
Optimiser ses photos avec photoshop : étape 1
Optimiser ses photos avec photoshop : étape 2

 Etape 2 :

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

 Etape 3 :

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

 Etape 4 :

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

 Etape 5 :

  • Définir le gain, le rayon, le seuil.
  • Gain : Quantité d’accentuation à appliquer 0% à 500%
  • Rayon : Le nombre de pixels que l’ont veut accentué 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

 

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.

 

15 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