Categories

Feb 24, 2012

How to Make Sure Your Images Look Great on the Web.

Making Your Images Look Great

There are a lot of options to check when you are editing your images. Choosing the right ones will make sure your images will look great no matter where they are viewed.

In this episode we cover 16bit vs 8bit and colorspace. These may sound boring, but they do make a big difference in your final image.

Today’s Episode Timeline

  • 0:30 -Making sure your images look good on the internet
  • 1:00 – 16 bit vs. 8 bit.(Here is a great article)
  • 2:45 – Opening the DNG
  • 3:50 – Changing your color space
  • 5:30- Opening your image from the RAW Dialogue
  • 6:00- editing your image
  • 7:26- Saving Multiple copies of your images
  • 8:00- Saving your images for the internet
  • 9:30- Deciding your quality
  • 10:30- Opening your image on the internet
  • 12:10- Keeping you from getting pissed off!

Starting with a lot of information

Be sure you are shooting in RAW! You want to start off with the most info possible and then work your way down.

Here is a decent workflow ->

  1. Shoot with your camera in RAW mode. If your camera does not have RAW, choose the FINE under the JPG settings.
  2. Import into Lightroom or aperture – these programs will read your RAW files.
  3. Edit your image in Photoshop – 16 bit mode, ProphotoRGB or Adobe RGB 1998
  4. Save a copy of your image as a .PSD file – this will allow you to have layers so you can edit the image further later if you decide to.
  5. Save another copy of your image for the web using FILE-SAVE FOR WEB AND DEVICES from Photoshop. Be sure it embeds the color profile SRGB and is around 80 quality.
  6. Upload to the internet!

26 Comments


user image You
(will not be published)

  • user image
    Alfonso Barona

    Hey aaron!!I had the same problem a few months ago…the colors in flickr where totally horrible….so I upload the finall image yo Lightroom…and then upload to facebook or flickr…from lightroom directly…i didnt knew it was because the SRgb thanks for the info!! So if anyone want to upload like 10 photos maybe its quicker that way…In the Libraty of lightroom…left column…facebook flickr etc…
    Hope it help!

  • user image
    Cindy

    Thank you! Hopefully that is the last time I squint at the screen after uploading and go ‘whaaaaaaat!!!’ Always worked in raw and edited in 16bit but didn’t convert to srgb. *head desk*

  • user image
    Rajesh

    Great episode. I ordered a colour monitor calibrator yesterday and have just used it for the first time. Colour is the name of the game for me this week. Thanks for explaining Prophoto RGB and saving to sRGB for web on final web output.

  • user image
    Jeff

    Don’t forget to sharpen. If your 16 megapixel image is only going to be displayed at say 600X600 pixels but you upload a full resolution file odds are it’ll look a little fuzzy because your browser auto resizes it. Photoshop (or lightroom) can resize it much better (I like the bicubic sharpener, or in lightroom set to high) this combined with exporting to sRGB helps to keep the small photo on the web looking as good as the original did on your screen. At least it has in my experience…

  • user image
    Mark

    I noticed you saved to jpg at full resolution.   I don’t think it’s necessary to publish photos on the internet at full resolution.  I typically make a stamp visible layer to a new file and then re-size and save.  Saves on both bandwidth and file storage.  Another plus is that you don’t receive those annoying PS memory errors with a smaller file.

  • user image
    Mark

    Thanks Aaron – hadn’t really understood what sRGB was all about.

    Totally agree with Mark below though – I always resize before upload. Not only does it save bandwidth and storage space but if you upload to sites that have maximum pixel dimensions (eg. 1000px wide max), and you let them auto resize your image on upload, some of them compress it horribly. I also sharpen (using a high % of the smart sharpen tool set to 0.1px) before saving out. Hope that helps someone a bit 🙂

  • user image
    Tim Piggott

    This was really helpful – but I did a “DNG” search and only got today’s episode!?

  • user image
    Ben Leavitt

    Hey Aaron, how often do you actually edit in 16 Bit mode?

    By the way, if you haven’t seen this yet, I thought you’d get a kick out of it…

  • user image
    Ben Leavitt

    Hey Aaron, how often do you actually edit in 16 Bit mode?

    By the way, if you haven’t seen this yet, I thought you’d get a kick out of it…

  • user image
    Karl Filip Karlsson

    I agree with 16-bit. but thats i hard to use always because alla filter dont work with that. 🙁

    Why ProphotoRGB Aaron? 🙂
    i never use “save for web” to convert or something when i will ad a photo to the webb

    instead i use “Edit > Convert to profile > sRGB (after i us this way i never got the wrong color)
    image > image size (and then make it smaller, 1000pixel width or smaller) > bicubic sharper (because the photo lose sharpness on the web so this will help > OK 
    (because how often will you ad upp full-resolution photo to flickr or deviantart?)

    Hope i can learn something here if you even listen? 🙂

  • user image
    Tyler Hayward

    Not sure if anyone has mentioned it, but also if you do save using the web and devices option, your exif data isn’t recorded in the jpeg D:

  • user image
    Charlotte

    What would you say is a good size to re-size the images to? I agree at not uploading at full res, but I can’t seem to find the perfect size, would love some advice on this 🙂 Thanks

  • user image
    Mike Clark

    I was recently playing around with this method. In my experience, once in the “Save for Web…” dialog you must check “Embed Color Profile” in addition to “Convert to sRGB” otherwise it will simply save the file with it’s original color space. I think that’s why when Aaron goes to check the info on his saved image it still shows an RGB color space.

  • user image
    Mark

    Are there PRO cameras that shoot ProphotoRGB? My EOS 5D can do either AdobeRGB 1998 or sRGB. Remember folks to set this in your camera as well before you even start shooting …

  • user image
    Samuel

    Anyone have tips about uploading to Facebook? I know that they recently allowed high quality photos to be uploaded with a 2048 pixel resolution on the long side. Not sure about color though, I’ve heard it used to be 72, but that may have changed as well.

     I’ve simply exported photos from Photoshop as maximum quality 2048 JPEGs, sometimes with a slight amount of blur, and then uploaded them. The results are ok, but there is a definite difference in viewing them as thumbnails or Timeline posts vs. in the photo viewer.

    • user image
      Chris Almeida

      Have you found your answer? I’d be curious to know too as every single image I export using several different techniques for FB get squished to nothing and look awful.

  • user image
    Jade Madgwick

    Hi Aaron

    Thanks so much for posting this video – like you said this has been pissing me off too…. for ages!!

    I just have another question – what colour space is best to have your mac SCREEN set to? I am unsure whether to leave it in the default state or change it into ProphotoRGB or Adobe RGB 1998 to match the colour space we are working in Photoshop as well?

    Thank you so much!

    Jade

  • user image
    Paul J

    I followed the steps and uploaded my photographs to Facebook, they look fine, but when I sent the files via email for a model to use them, when she uploaded them on Facebook the colors are wonky. Do you know how this could happen?

  • user image
    Jeff D.

    Hello,

    I shoot in RAW 16bit. But every time I edit my images and convert them to jpeg SRGB they look horrible on Facebook. When I have dark landscape images the colors seems to run together and I get wavy color patterns in my photo. But, when I view it on my computer (Not the web) it look fine. What can I do to fix this problem? I even tried saving the image on Facebook in High Quality.

  • Lee Morgan

    I may be wrong, but… What’s the point in editing in a profile that your monitor doesn’t support? (Most standard monitors only display around 97% of the sRGB standard and around 76% of the Adobe RGB standard) if your monitor can’t display the colour then how do you know what colour it is?