Exporting and Saving JPEG images for website use.

by George Mann

Oct. 27 update: If you are using the latest Mac OSX Safari browser you will probably not see much difference in any of the images below. If you switch to another browser the article should make more sense.

I am afraid that today's blog posting is going to end with more questions than answers. Maybe one of the readers of this posting can give me the answers I am looking for. Most of the time I find that Lightroom (Export) actually gives me a fairly decent image for website use, but every once in a while I come across an image that just doesn't look anywhere near as good, after all the resizing and converting, as it did when I was looking at it in the Lightroom application window.

This particular image has a fairly wide range of tones and does not work well if the foreground subject matter is even slightly washed out, losing it's three dimensional appeal.

01a-klaeng-sd.jpg

Screen Shot of the image in the Lightroom window. Processed in PS CS2 - Save for Web, sRGB

01b-klaeng-sd.jpg

Cropped in image of the Screen Shot. Processed in PS CS2 - Save for Web, sRGB

02-klaeng-exp-srgb.jpg

Exported from Lightroom - sRGB - JPEG

03-klaeng-exp-argb1998.jpg

Exported from Lightroom - Adobe RGB (1998) - JPEG (just to show what happens with this setting)

04-klaeng-exp-prophoto.jpg

Exported from Lightroom - Prophoto RGB - JPEG (just to show what happens with this setting)

05-klaeng-exp-cs2.jpg

Exported from Lightroom as TIF (16-bit Prophoto RGB) - Processed in PS CS2 - Converted to 8-bit sRGB and Saved As JPEG

05-klaeng-exp-cs3.jpg

Exported from Lightroom as TIF (16-bit Prophoto RGB) - Processed in PS CS3 - Converted to 8-bit sRGB and Saved As JPEG

So who can help me improve the quality of my Lightroom JPEG Exports? It just doesn't seem right that I can get the best quality from a screen shot.

14 Comments

oja
2007-10-26 09:57:13
The only option in the methods that you describe that is not at all trustworthy from a color point is the screenshot route. Screenshots are in the monitor's colorspace and have to be converted to sRGB for web display through the monitor profile. On a mac, you can do this easily since screenshots are tagged corectly with the monitor profile, but on windows they are not even tagged. Not surprisingly, all the other export routes look almost exactly the same in a color managed browser indicating that they are probably correct. Indeed, looking at the prophotoRGB file's histogram in lightroom gives exactly the same histogram as your screenshot, but it looks like the exported image on my calibrated monitor. The screenshot is way to contrasty for that histogram. My guess is that your monitor profile is incorrect and you need to calibrate it preferably with a hardware profiler.

2007-10-26 10:10:33
Looks like a bug to me. May I suggest checking the "Include ICC Profile" box when saving for web in CS? More and more browsers understand ICC profiles. And for experiments like this when you want people to download the photos it makes things a lot less confusing.


Have you played with the original file in Lightroom? Does it have the same problem? Or is there one operation, or a series of operations, in Lightroom that can be performed with any file to make this happen? These are areas I would start to look at: try to make the problem reproducible or narrow down what could be causing it.

Mark Sirota
2007-10-26 11:26:50
Anonymous, which are these "more and more browsers" which understand profiles? I think the complete list is Safari and alpha versions of Firefox 3. Are there others I'm missing?
Michael H.
2007-10-26 11:32:07
Someone please explain why exporting RAW -> JPG in Lightroom is very slow? On my dual-core quad mac pro it's barely useable and not practical for workflow automation.
Rob M.
2007-10-26 13:46:04
Losing... not loosing.
Rick
2007-10-26 14:05:19
oja's on to something (though this isn't all of the problem) as I looked at the post on my Windows uncalibrated monitors (one analog and the other DVI) and compared to a calibrated (albeit mobile) MacBook Pro screen. the difference between the shots is amazing on the uncalibrated monitors and quite a bit less noticable on even the MacBook Pro. wow
Racer 67
2007-10-26 23:14:19
As someone else has stated here I think you have a monitor calibration issue or some other color management issue. It is hard to determine exactly what is going on without seeing your whole setup, but here are some things to think about.


Currently, I can flip between Photoshop, Lightroom and look at the same images in my browser and they all look almost identical. I say almost because each program will display sRGB files very slightly differently, but nothing like what your experiencing in your examples. This is with a Win XP machine with a fairly cheap Samsung LCD calibrated with a Pantone/Gretagmacbeth Eye One LT.


When you take a screenshot (with windows) you must make a new document in Photoshop with your monitors current color profile. Paste the screen shot into it then convert it to your working space (in this case sRGB) in order for the screenshot to match between Lightroom and Photoshop. Why? The screen shot uses your monitors calibration rather than your managed software working space. If you simply "assign" the screenshot sRGB it will not appear the same in your color managed software. I hope that wasn't too confusing...


One thing that has bothered me with Lightroom in comparison to Photoshop is that we don't really know what color space Lightroom is simulating by default. One would assume ProRGB since it is the widest space. This is why sometimes I think we see some color inconsistencies when viewing in Lightroom then outputing to say Adobe RGB then viewing in Photoshop. You can notice some very subtle color shifts in very specific circumstances. Converting from one color space to another is not a perfect science especially when converting from a large gamut space to a more specialized space like sRGB which was originally designed to show color accurately on CRT (Cathode Ray Tube) monitors.


Another question that I would pose, does the screenshot in your example look the same in Photoshop as it does in Lightroom when your flip (alt-tab on windows) between them?


I would continue to investigate your monitor profile, check your color settings dialog in Photoshop for consistency in your workflow. As well consider a calibration device if you don't already have one. Calibrating LCD's depending on their quality ie: laptops can really be a challenge. My personal conclusions could be completely wrong, but I sure hope to hear what the solution to your problem is.

George Mann
2007-10-27 00:43:06
I appreciate all the feedback and suggestions. I have to admit that I also get pretty good (and consistent) results with all the image processing methods in one of my browsers (Safari) and some pretty awful (and inconsistent) results with others.


What I am trying to find is a method that will give good (and consistent) results with all browsers. I will try some of the suggestions and report my findings later.

syd
2007-10-27 02:52:16
George, what Export settings are you using for Quality? 100 or something lower?
George Mann
2007-10-27 03:14:08
On TIFF exports I used a quality value of 100 and on direct to size JPEG exports I used a value of 85.
Charlie Emrich
2007-10-29 22:55:39
I have the same problem and the comments above mine look about the same here as they do everywhere on the internet when discussing the source/solution to the problem. That said, I found a few ways to fix it.


The problem is not that you have an incorrectly calibrated monitor or that you're not fully aware of the nature of color profiles, it's that Lightroom makes jpegs with embedded color profiles for web-bound pictures when it shouldn't be (or maybe something's just going wrong with the profile conversion).


What you (and I) want is not the world's most accurate color. What we want is for the picture as it appears on the screen in Lightroom to appear exactly the same way when we view it in a browser, or anyone views it in a browser. The browsers that most people use are not color-profile aware (read: IE and FF) and so when you view Lightroom exported jpegs in browsers, they look sadly desaturated and, to be blunt, bad.


What to do?


1) Bump up the saturation in LR before exporting. Nice for non-color-profile aware browsers, but can be garish in Safari.


2) Use Graphic Converter. There's a buried feature in Graphic Converter's preferences under Open -> Correct & Change -> "Merge color profile into image data". Check it and then you can open LR jpegs and resave them, and voila! problem solved. Well, one problem, at least. You do have to open and resave every single image that you want processed. Not fun, but it's workable.


3) Use PictureSync. This is how I roll now. PictureSync is a cheap utility that, while not explicitly designed for LR, installs itself as a LR plugin. You can then export from LR with the PictureSync plugin, images are output to a temp directory and then pretty simply and elegantly processed for output/upload by PictureSync. There's a box in the preferences of the app, in the Pictures tab, "convert image colour profiles to sRGB" that when checked seems to do the trick. That is, seems to produce images that have consistent browser-to-browser color. As an added bonus, the jpeg resize in PictureSync obeys "longest edge" dimensions, and outputs smart, small jpegs.


I've been using the PictureSync method, as it's much quicker and more elegant than using Graphic Converter. Doesn't work too well with Leopard, yet, but the developer seems proactive with bug fixes.


It took me many, many hours to figure out how to get Lightroom pictures that looked as good on the web as ones I could process in 30 seconds with MS Picture Manger in a Cambodian net cafe. Really, Adobe, it should not be this hard. Just my 2 cents, though.

George Mann
2007-10-29 23:38:35
Charlie - thanks a lot, I think you have given me the answer I was looking for. I have to go on a short trip to the big city (Bangkok) today, but I will download and test the PictureSync application tomorrow and make a full report by the end of the week (my next posting).


George

Esse
2007-11-04 17:14:43
Does anyone know about a method to merge color profiles into image data on Windows? Graphic Converter seems to be a Mac application as is PictureSync. Although the latter seems to have an upcomming windows release.
George Mann
2007-11-04 18:46:27
I am a Mac user but I was also kind of surprised not to find any Windows software available. It definitely would make sense that PictureSync is working on a Windows version.


I have already posted the article on PictureSync.


http://www.oreillynet.com/digitalmedia/blog/2007/11/using_picturesync_with_lightro.html