Yeah, yeah, yeah – it’s been a while since I’ve posted.  You’ve had fair warning though that my position may have me out of town periodically, and in the interests of retaining quality of content, the quantity of content has had to take a back seat from time to time – hence the reason for the past two days.  (If it’s any consolation, I also missed the deadline for the PhotographyBB magazine for January – my first missed January edition in the last 3 years…blah!)  Today though, I wanted to take some time to share some insights I’ve had on the process of saving images for sharing on the web.

You see, traditional wisdom in saving for web is to follow three steps:

1.  Re-size your images to no larger than 600px on the longest side – this is to make them more presentable in traditional screen resolutions.  Keeping in mind though that as technology has advanced, screen resolutions have increased to include capacities such as 1600×900, I would suggest that if you want people to see your images large (as they are always best viewed), consider changing that to 1000px.

2.  The second step is to adjust the resolution on your images from their default of 240-300 ppi (straight out of camera) to a more web-friendly setting of 72ppi.  I would actually recommend that this practice continue, as it  still is able to retain the detail needed for monitors while reducing the possible risk of having others take images off your website and print them without your permission.

3.  Last but not least, and the point of the post today is that of color space.  Traditionally, the wisdom has said to convert images to sRGB (standard RGB) because most browsers are not color-aware.  Yet recent articles and tutorials I’ve read through several communities have suggested that you can tell shifts in color between sRGB and Adobe RGB.  The test was to output images to both color spaces, and view natively inside a browser (just drag and drop in your own browser without the need to go to any web page).  I did this, but could not tell a difference.  So, the conventional wisdom I am not sure has been entirely eschewed as of yet.  In the interests of gaining some thoughts and perspectives from a wider audience – I have two images that I’ve exported to both sRGB and Adobe RGB below.  I’m not revealing which is which, and would like people to take a look at these on their own monitors?  Which image looks better in each scenario?  Let me know what browser/OS combination you are using and sound off in the comments or in the included poll.  The results will be interesting to read – and I’ll likely follow up later with some more information on color spaces.

Check out the following results:

Scenario One – Hot Air Balloon Ride

Hot Air Balloon in sRGB color space

Hot Air Balloon in Adobe Color Space

Scenario Two:  Botanical Gardens

Botanical Gardens in sRGB Color Space

Botanical Gardens in Adobe RGB Color Space

Can you see a difference?  Can you tell (without cheating on the filenames)?  What are your own thoughts on the sRGB versus Adobe RGB color spaces?  Do you save out to one or the other for web?  What browsers and experiences do you have with these various formats?  For me, the results are in the display, and since I want my images to be displayed with rich and full colors – coming as close as possible to what I remember with my camera eye – I’m starting to choose Adobe RGB for my output format of choice.

Sorry, there are no polls available at the moment.

19 thoughts on “Save for the Web

  1. Top photo is more saturated.
    Chrome and Firefox on Win7, color managed.

  2. Craig Beyers says:

    I use Firefox–whatever the latest version–and had no problem identifying the sRGB vs. Adobe RGB images. I’m color managed. As I expected, the Adobe RGB versions are just smoother in transitions between colors. The flower, in particular, also looks blocked up a bit in sRGB.

  3. in both cases the top one looks a little richer or warmer, not sure witch is with and i only ever consider colour space when i am outputting for magazine copy who want CMYK out side of that i don’t even know what version of RGB i am outputting although i think i set 1998 when i first started using LR after hearing a Scott Bourne podcast …… i think…..

    My std web output is 1,000px longest side 100ppi although i’m not sure what effect that has if i have limited the image to 1,000 pixels on a monitor that is for example 1,200 pixels across won’t the image be 5/6th of the screen regardless of the ppi?

    anyway good to see you back Jason and i hope you had a good christmas

    1. i forgot to mention i’m viewing on a macbook pro 13″ OS X 10.7.2 running safari,

      Hope that helps

  4. Stuart Mackenzie says:

    Top photo is more saturated – particularly noticable in the red spectrum.

    This is on Firefox.

    But I prefer the Bottom Picture on both

  5. Top photos for each have more pop. Safari on iPad2

  6. Oops, maybe you should turn off the mouseover text on your photos; I assume it’s displaying the file title, but whatever it is it clearly displays the color space. The top photo in both examples (sRGB) is more saturated. Using Chrome, Win7.

    1. Yeah, something happened to the Lightbox plugin for WordPress – sorry ’bout that, looking at fixing it now…

  7. The top image is warmer and more vibrant. IE on a crappy work laptop.

    1. Gotta love IE in a work environment, eh? Non good browser, likely in non-good lighting, and in a non-calibrated space! LOL

    1. Thanks Colin – appreciate the feedback. Are you color-managed?

  8. Chrome browser on Ubuntu 11.10 (Oneiric Ocelot).
    uncalibrated monitor/systems, but capable of ICC profiling, if desired.

    1. Thanks Monica – were you able to tell the differences on Ubuntu? (I’d not been on a Linux distro in a while – should probably start doing that again soon…LOL)

  9. Thanx for the article. But please, PLEASE, delete pont 2!

    It is just utter BS (sorry for the word…)

    “2. The second step is to adjust the resolution on your images from their default of 240-300 dpi (straight out of camera) to a more web-friendly setting of 72dpi.”

    This might make sense if you think that someone wants to print this image on paper and have it in “propper” size there.
    And I dunno, but the cameras I have set the resolution tag to 72dpi. But this is not really a big sample.

    “I would actually recommend that this practice continue, as it makes the overall file size a lot smaller,”

    Did you try that? Did it work? Than, your software is really broken!
    If an image has 600×400 pixels at 300 dpi it will print out at 2″ x 1.3. It will be 240000 pixels in size.
    If an image has 600×400 pixels at 72 dpi it will print out at 8.3″ x 5.5″ (it will look quite pixelated or blurred). And it will have 240000 pixels.

    So the pixel count is still the same, why should the file size be any smaller? I know, there have been others stating similar stuff. But it is just not true and won’t become true.

    “and still is able to retain the detail needed for monitors, which really aren’t capable yet of displaying more than that resolution except at the very high end professional grade.”

    This is true.

    So back to “Resolution” in dpi. It can count. It counts, when you want to define the size of the image in milimeters or inces. THAN you need the know the desired resolution in dpi to calculate how many pixels you will need.

    So if you want your image to be displayed at a size of 9″ by 6″ on the screen. You take a typical resolution of 72dpi (todays tft often have 96dpi btw) you can just multiplay.
    9in * 72dpi = 648pixels
    6in * 72dpi = 432pixels

    dpi is just a “random” number that is stored in the header of the image file. It has no influence on the compression or number of pixels. Most programms that are made to dispay images on screen just completely ignore the value. On the other hand, dtp programs often interpret it and resize the image accordingly. So if you send an image to be included in print, it is good the set the dpi value according to the wishes of the receiver. Just for the convenience.

    And about color spaces: I’d suggest to convert the images to sRGB for the time being. Most monitors can only handle sRGB color space anyway. And sRGB is the biggest common denominator. It is not perfect for everything but it “just works” most of the time. Some browsers and display programs can handle color profiles. Some just ignore it. And displaying an adobe-rgb image as sRGB leads to heavily muted colors.

    1. I’d delete point 2, except for two reasons:

      1. I mis-typed – meant to say ppi not dpi, but thanks for the long post to help me understand the difference. Typos notwithstanding, it’s good to have a second set of eyes on the content to keep things accurate.

      2. The resolution question was not really the main thrust of the post – you make some good points about dpi versus ppi, and you are right, I was writing the post with the 3rd point in mind, so quickly breezed past point 2 in my writing, thus making the inadvertent typo and saying “dpi” rather than “ppi”.

      3. Thirdly, the main reason I recommend adjusting your resolution down from a higher number is to prevent exactly what you are talking about – printing! The whole idea behind adjusting the ppi value down to 72 is to prevent people from saving your images off the web and re-printing the images themselves without your permission…as you indicated, the resulting images would look like crap and be completely unusable – mission accomplished! Web use only! 🙂

      You are correct though on file size – that does not change – thanks for keeping me honest there (I should know better than to write a post at the 11th hour and expect to publish it while retaining the quality standards that I expect of myself – and apparently those you all expect of me! 🙂 )

      For what it’s worth though, you need to do some spell-checking and grammar checking:

      1. It should be “point”, not “pont”
      2. It should be “proper”, not “propper”
      3. Learn the difference between “then” and “than” – you are using it wrong! 😉
      4. Last but not least, I was asking for feedback specifically on the color space question, not the resolution question. Nevertheless, thanks for sharing your thoughts there. Here we can agree that sRGB will likely be the best for the time being unless you are working in a color-managed space, with color-controlled lighting, etc. Otherwise, use sRGB as the differences are too tough to really manage because, as you said, colors can end up being muted.

      1. Oh yeah… my grammar sucks… I can blame this on not natively speaking english 🙂
        And also my spelling sucks. I can only blame this on myself, since it sucks in my native language as well 🙁

        And as for the feedback about the color space question: Sorry, I’ve run out of time after ranting for WAY longer that I had intended. And re reading my post, I have to admit that it sounds REALLY rude. This was not my intent, so sorry for that as well. I really got carried away. I should have worded this differently.

        So, keep on sharing…

        1. Did not know about native language barrier, apologies… 🙂

          That being said, no apologies are necessary, I took your reply in the spirit intended…and am glad you took the time to help spell out the intricacies of dpi versus ppi here – as I said it’s always good to have a second set of eyes to help keep me honest and accurate! 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *