Comment sauvegarder une photo pour le web?

Vous arrive-t-il de poster une photo sur le web (ou sur votre blogue) et dont la netteté semble insuffisante? Ou encore que les couleurs sont soudainement fades? Alors que sur votre écran tout paraissait parfait. C’est que d’une part, vous n’avez pas ajouté suffisamment de netteté à votre image et, de l’autre, elle n’est pas enregistrée dans la bonne espace couleur pour le web.  Du Chinois? Heu… Pas de panique,  je vous explique à l’instant!

Adobe RVB est un espace de couleur plus large et nuancé que plusieurs photographes professionnels utilisent. Le web ne supporte pas cette espace de couleur, il faut donc convertir votre image dans l’espace colorimétrique sRVB.  Si vous photographier en JPEG, il a de bonne chance que vos photos soient déjà dans la bonne espace couleur. Sinon, vous devez convertir le profil de votre image dans la bonne source couleur.

Une fois exécuté, vous pouvez passer à l’étape suivante, la netteté.

Pourquoi?

Parce qu’une image, dans sa dimension originale, révèle la finesse des détails.  Lorsqu’elle est réduite (redimensionnée pour le web), les menus détails sont atténués.  Il faut donc accentuer le piqué de l’image.

Les dimensions utilisées sont entre 800px et 1024px qui correspondent à la plupart des résolutions d’affichages sur les écrans d’ordinateurs.

Voici comment je procède (dans photoshop) :

  1. Avant toute chose, je sauvegarde une photo dans sa dimension originale.
  2. Ensuite, dans la résolution de l’image, je réduis à 150ppi
  3. Puis, je rajoute de la netteté une fois ou deux
  4. À ce point-ci, la netteté de l’image va paraître exagérée, n’en tenez pas compte
  5. Je réduis la résolution à 72ppi
  6. Vérifie que la netteté me convient.
  7. Parfois, je rajoute encore de la netteté, d’autre fois, j’en enlève.
  8. Je visionne la photo en taille réelle, si elle est trop grande, je réduis à 800px.
  9. Je sauvegarde une deuxième copie que j’identifie avec le terme WEB
  10. Et le tour est joué!

Bon, j’espère que je n’oublie rien. Évidemment, je fais toutes ces étapes dans photoshop. Si vous avez des questions, vous savez quoi faire.

😉

40 commentaires sur “Comment sauvegarder une photo pour le web?

  1. oneowner dit :

    Fascinating. I enjoyed your description of your technique on re-sizing for the web. It’s quite different from my own. I will definitively give your’s a try.

  2. 1cruzdelsur dit :

    It is always good to know experiences. Thank you … 🙂

  3. Comme toujours ton explication est précise et les deux dernières photos montrent bien ton explication. MERCI ANNE de ce cours. Bises Hervé

  4. kairosf dit :

    Merci pour ce mercredi plein d’enseignements tout en restant récréatif.
    Et puis tu nous récompenses avec tes belles « images », j’adore!
    Bises
    Françoise

  5. ClaudeL dit :

    Je garde mes photos originales en RAW, ensuite, en jpeg en 300ppi et en CJMN au cas où j’aie besoin de les faire imprimer et pour INternet, je choisis plutôt RVB et 100ppi (mais j’avoue que c’est par habitude pour ne pas me mêler avec le 72 que les appareils photos (avant d’avoir un Reflex) nous donnaient automatiquement.
    Mais quand tu dis « netteté » c’est quel terme au juste dans Photoshop, sous quel onglet? Je me contente de l’égalisation automatique, serait-ce mieux la « netteté »?

    • Anne Jutras dit :

      Bonjour Claude, je crois que la façon de conserver les fichiers peut être variée et adaptée selon nos exigences. Pour ma part, je choisi 72ppi parce que c’est la résolution que j’ai adapté pour mes besoins, 100ppi est tout aussi bien.

      En ce qui concerne le terme netteté, tu le trouveras, dans Photoshop, sous l’onglet Filtre -> Renforcement -> Plus net.

      Lorsque je convertie pour le web, j’utilise l’option « Plus net » de une à trois fois, selon la nécessité. Quand je souhaite ajouter de la netteté à des fins d’impressions, je vais dans « Netteté Optimisé ».

      Je ne connais pas l’égalisation automatique, mais j’ai toujours trouvé que pour rendre une photo nette (aux détails précis) la netteté doit être appliquée plus d’une fois.

  6. Inspired and pretty dit :

    Je vais avoir l’air bien ignorante 🙂 ppi veut dire « pixel par image » ? et px « pixel » ? Quelle est la différence entre ces 2 termes ? Mon autre question : Comment je fais pour utiliser l’espace couleur Adobe RVB et sRVB, est-ce un ajustement dans ma caméra ? Tout en écrivant mon commentaire j’ai regardé sur Google et j’ai ma réponse, c’est un changement à faire dans ma caméra 🙂 Arrghhhhh….Il y a tellement de choses à savoir ! Une chance qu’on t’a Anne, j’évolue tellement plus rapidement depuis que je t’ai découverte ! Tes mercredis technos sont très importants pour moi, merci de partager ainsi tes connaissances. Ta photo est tellement belle, quelles belles couleurs !
    Je m’en vais imprimer ce post !

    • Inspired and pretty dit :

      Je ne sais pas si Photoshop est mieux que Corel, mais j’ai remarqué que lorsque j’augmente la netteté pour le web, les zones sombres deviennent trop foncées ce qui « durcit » beaucoup la photo. Je peux augmenter un peu la netteté mais pas trop, pour cette raison, et finalement il n’y a pas une grosse différence.entre les deux.

      • Anne Jutras dit :

        Humm… étrange… Je n’ai jamais éprouvé de problème au niveau des ombres avec l’ajout de la netteté, il peut arrivé qu’une image en ai trop, de petites lignes blanches semblent masquer les détails, à ce moment là, je diminue la netteté.

        Est-ce que ton profil est en sRGB? C’est essentiel pour le web, parce qu’autrement les couleurs n’auront pas la même intensité, elles seront fades et, peut être, que ça peut affecter les ombres de ta photo, peut-être… À voir.

    • Anne Jutras dit :

      LOL Ça me fait plaisir! 😀 😀 😀

      PPi = Pixel Par Pouce donc à 72ppi tu auras 72 pixels par pouce -> http://fr.wikipedia.org/wiki/Point_par_pouce

      Effectivement, tu peux choisir Adobe RVB ou sRVB dans ton appareil, mais si jamais tu l’oublies, c’est pas grave, tu peux le modifier dans photoshop sous l’onglet Edition -> Convertir en profil… -> sRGB IEC61966-2.1 -> clic OK et ceci convertie ta photo dans le bon profil (sRVB). Cool, hein?

      (j’imagine que corol draw a quelque chose de semblable)

      • Inspired and pretty dit :

        Merci pour le lien Anne ! Je vais voir si Corel peut modifier l’espace couleur comme le fait Photoshop, je n’en ai pas la moindre idée puisque je ne savais même pas qu’il y avait 2 différents espaces couleurs !

      • Inspired and pretty dit :

        J’ai vérifié et ma caméra est bien en sRGB. Quand je t’ai écrit ce mot je venais tout juste de mettre plus de netteté qu’à l’accoutumée sur une de mes photos et je croyais que c’était ça le problème mais ensuite je me suis rendue compte que j’avais ajouté de la netteté sur une photo ayant une texture très foncée. C’est sûrement pour ça que les ombres étaient devenues trop foncées.

  7. YumePhotographie dit :

    Très intéressant Anne. Merci pour ces explications.

  8. Good write up and wonderful images.

  9. apprendre avec toi Anne cela semble aussi simple comme de dire bonjour
    alors juste merci de tes conseils si bien avisés !
    gros bisous vers toi
    et toujours d’aussi belles photos à nous présenter…

  10. Encore de bons conseils !!! Merci Anne !

  11. JimR dit :

    Great images Anne

  12. Liberty dit :

    Merci pour tes explications, je vais étudier ça de près.

  13. locadine330 dit :

    Bonjour Anne , une petite balade bien sympa chez vous !
    Cool de donner des renseignements pour améliorer les photos !
    Pour ma part , je n’ai pas de logiciel de retouche , juste picasa qui en rapport avec photoshop n’est rien , d’ou la différence sur d’autres blogs !
    Je reviendrai avec grand plaisir , à bientôt .

    • Anne Jutras dit :

      Bonjour Locadine, bienvenue chez moi, c’est gentil de me rendre visite. 🙂 L’essentiel est d’être satisfait avec les résultats. Lorsque l’on redimensionne pour le web il est important d’ajouter de la netteté, autrement, les photos ont tendance à avoir l’air légèrement floues.

      À bientôt!

  14. michel85 dit :

    Pour elles partent sur mon blog a : je ne regarde jamais les ppi ,mais je crois que c’est du 240 . Mais moi et les traitements !!! A + michel

    • Anne Jutras dit :

      Bah, ce n’est pas si grave, Michel. Si vous êtes à l’aise avec ces chiffres, c’est ce qui compte. J’ai partager ma façon personnelle de poster mes photos sur le web, mais ce n’est pas l’absolue. Seulement une référence. 😉

      Merci de votre visite., j’apprécie! 🙂

  15. Adam Allegro dit :

    Stunning photos!! Very nice work

  16. marlaguette dit :

    De blog en blog, je suis arrivée ici…
    Merci pour cette petite leçon…

  17. Normalement j’ajoute de la netteté dans Photoshop avec Filter > Sharpen > Smart Sharpen (c’est le quatrième choix). Ça me permet de contrôler, d’un seul coup, le degré de netteté ajoutée.

    Steve Schwartzman
    http://portraitsofwildflowers.wordpress.com

  18. Neurobancal dit :

    Très intéressant. J’avoue avoir toutes sortes de techniques pour la netteté de l’original, mais je ne pense pas trop à la perte en conversion web au final. Faudra que je tente le coup. Merci!

Une petit mot d'encouragement? ~ Leave Some Love

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l’aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s