Adjustments made for Saving Images For Web?

[Frank Petronio]

I post large 2048-pixel jpg images to my website, Facebook professional page, and Tumblr, as well as occasionally uploading to Flickr or oddball sites like this one. I also email my images around. Most of my viewers are using decent displays and modern browsers,although the majority probably aren't calibrated. Obviously I want my images to look good compared to everything else online. I figure that since everyone will move to Retina-style higher resolution displays over the next few years that I might as well make 2048-pixel maximum-per-side images my new standard. While I won't watermark, I do add my copyright and contact info into my metadata, although I know that several sites strip or partially strip this. I figure it is a trade off in exchange for marketing benefit, but it sucks.

I also "Save For Web" from Photoshop, converting my Adobe RGB images to sRGB for the web jpgs.

And lately, it just seemed to sneak up on me because I never noticed or worried about this until this past year... I look at the (color) stuff I post and it looks really garish and too magenta. So I lower the saturation about 20 points and move the green-magenta slider 3 to 6 points towards green in Photoshop's Hue/Saturation control. That usually makes the image I'm saving look crappy but then when I upload it, it looks pretty neutral and normal looking, pleasing. Flesh tones are tricking in the green/magenta area though... it seems as though the jpgs can't really do it subtly and it's either green or magenta, one point of difference throws it a big swing either way.

Now I know people are looking at stuff online with all kinds of wacky monitors and settings. I've seen people think setting their monitor's color temp to 9300K is OK, I mean some people are nuts. But compared to the majority of professional quality color jpgs being shown online, I'm feeling like I'm holding my own.

But is this amount of fretting and worry justified? It seems practically impossible to keep up with. And it's maddening, I see a huge difference between the same image posted here, on Flickr, Tumblr, Facebook, and my supposedly unprocessed and filtered website. Or between Chrome and Safari and Firefox. I know they all mess with images somewhat, in the hopes of "improving" them. But it's such bullshit!

What strategies are you using for optimal web display?

Other than doing all B&W? ;-p

[Peter De Smidt]

I don't have a solution, but I agree that it's really frustrating! Facebook's compression, in particular, is nasty.

[Kirk Gittings]

All you can do is optimize how it looks on YOUR display beyond that its a cluster f__k and nothing you can do about it. I don't know how many times clients have told me my images look like crap and I go over to their office only to find that they are using a 10 year old uncalibrated CRT. I tell them what the problem is and I get accused of making excuses for my crummy images. So now when I go I take my calibrated MacBook Pro to show them what it is supposed to look like...........

[Amedeus]

Frank,

Don't "save for web" as you have insufficient control over the compression. Save as JPG, control your size/compression and use "convert to profile" for sRGB. I used to "save for web" with the same complaints ... drab colors ... I now have an action doing it all for me.

[C. D. Keth]

What strategies are you using for optimal web display?


I don't know if you already do this but I appreciate it when websites give you a greyscale and a few words on how to adjust your monitor so that at least the gamma is close. See the bottom of this page (http://www.dpreview.com/lensreviews/canon_100_2p8_is_usm_c16/) for a nice, though overly technical for customers, example. You could even use 3 or 4 colors similar to the "memory color" chips on a macbeth chart. Everybody should be able to see whether a blue color patch is "blue like a clear sky" or if a green patch is "green like healthy grass in spring."

[Frank Petronio]

Frank,

Don't "save for web" as you have insufficient control over the compression. Save as JPG, control your size/compression and use "convert to profile" for sRGB. I used to "save for web" with the same complaints ... drab colors ... I now have an action doing it all for me.

I was getting too wild extreme colors from Save For Web, not too drab! But what you do is edit your AdobeRGB master, resize, then convert to sRGB and edit color to suit your taste? Do you tend to pump up the color or flatten it out when you do this?

[Frank Petronio]

I don't know if you already do this but I appreciate it when websites give you a greyscale and a few words on how to adjust your monitor so that at least the gamma is close. See the bottom of this page (http://www.dpreview.com/lensreviews/canon_100_2p8_is_usm_c16/) for a nice, though overly technical for customers, example. You could even use 3 or 4 colors similar to the "memory color" chips on a macbeth chart. Everybody should be able to see whether a blue color patch is "blue like a clear sky" or if a green patch is "green like healthy grass in spring."

But... I just spent 30 minutes running a monitor calibration routine - I'm not going to mess with the monitor controls for a webpage! (Especially DP Review!)

I like the idea though but realistically only a few people would ever do that.

[Amedeus]

I was getting too wild extreme colors from Save For Web, not too drab! But what you do is edit your AdobeRGB master, resize, then convert to sRGB and edit color to suit your taste? Do you tend to pump up the color or flatten it out when you do this?

I work in Adobe RGB, convert to sRGB, resize, save as jpg compression 6 and that goes to web, iPad and emailing around. No special post treatments for any colors. I check on PC and Mac as I use both to view the web stuff. There are differences between the platforms when it comes to gamma and that will remain a challenge on the www. My home PC laptop is calibrated, my work PC is not and there are differences as my work PC is off (not as lively) ...

[Jody_S]

I'm surprised no one is mentioning contrast, which I've found is the greatest obstacle to using the same file for printing or viewing on a monitor.

[ic-racer]

Nobody (photographer or viewer) is going to be able to figure that all out. That is why cellphone and i-pod images dominate 'internet' and 'social media' culture. :)

[sully75]

export function from lightroom is awesome. That's all I ever use. I have presets for email, web and full res jpegs. Very easy to export jpegs for any use. They usually look pretty much exactly how they look in lightroom. Which is different from how they look in photoshop, but that's a whole nother issue.

[Frank Petronio]

But if my pictures look bad to some joker with a wacky monitor, then every other picture they see also looks bad.

As for the TOC of the social networking sites, for the most part they need to have those clauses simply to function as social, sharing sites. Worse case scenario, say they did attempt to market their users' images, would result in a massive backlash and no legit ad agency or major client would work with them. And, in the end, I value the marketing value of being on those sites more than the risk. YMMV

[Brian C. Miller]

Frank, another factor is whether the browser being used supports color profiles. There was a blog entry on PetaPixel about that, so I'm sure there's more in-depth info through a web search.

[John Rodriguez]

If I'm in a rush I'll use Save for Web, however you have no control of the file after conversion. Usually I convert to sRGB, adjust as necessary, then assign an sRGB profile and save. The bitch of it though, is that 99% of sites you'll upload your images to will either a) resize/compress the image and toss the profile OR 2) resize/compress the image then reassign an sRGB profile, which really isn't much better. All of the portfolio sites do this (viewbook, bigfolio etc) as do the sharing sites like Flickr.

Solutions -

- Only post in situations where you know your file won't be resized/compressed and have the profile honored. This usually means hosting the file on your own box. I'm rebuilding my site in Wordpress so I can have control over the image files while having the benefit of a CMS.
- If you really want to host the images in places like Flickr, it becomes the same exercise as printing: post the image, adjust, re-post...except it takes longer.