Saving JPG images

[Leif]

I have a question about creating JPG images for viewing in a web browser. Unfortunately the question is a bit long winded, and tedious.

Firstly I should state that I have calibrated my monitor, using a Spyder, and configured the system (Windows XP) to use the generated profile. And I am using Photoshop CS2.

I create a JPG image as follows:

1) Open a TIF file, using the embedded profile which is usually Adobe RGB.
2) Process the image e.g. change levels.
3) Resize the image to 800 pixels wide.
4) Image => Mode => 8 bits.
5) Edit => Convert to profile => sRGB.
6) Save as => JPG (but do not save the profile).

The problem is that when I view the image in Firefox, or the Windows Image and Fax Viewer utility, it does not look like the original image in Photoshop. What's more, if I close and re-open the JPG image from Photoshop, it now looks like the image in Windows Viewer! The difference is subtle, but it is real. The same occurs if instead of steps 5) and 6) I use the "Save for web" option.

I can get round this by changing one step. In step 5), instead of converting to sRGB, I convert to the monitor profile:

5) Edit => Convert to profile => Windows Monitor Profile (the profile I generated).

It looks as if Firefox is using the monitor profile for the display. I always thought it used sRGB. Mmmm. Presumably then in the absence of a generated profile, Windows uses the default monitor profile, if any, and perhaps sRGB if one does not exist? Any profile experts here? Can anyone confirm what is going on?

Thanks, Leif

[robski]

Originally Posted by Leif

What's more, if I close and re-open the JPG image from Photoshop, it now looks like the image in Windows Viewer!

I have noticed this effect with PS - Can be very misleading.

I have a similar problem at work with a customer's CMYK tiff image printing dark in a newspaper when printed as monochrome. We know it is in the realms of profiles, CMYK to mono conversions and under colour removal. It's a case of pin pointing where in their workflow it is getting screwed up.

So it does not help when one minute it looks fine in PS and the next not.

[Tannin]

I get some approximately similar results, Leif. I read up on profiles a bit when I got my Spyder a few months back. As you know, it's an arcane and complicated area. Going on my vague memories, what is happening has to do with the fact that there are two profiles at work when you look at any image:

* the image's own profile (call this the "input profile" because I forget the proper term)

* the profile of the output device (e.g., the monitor profile).

Most (but not all) graphics programs don't use profiles at all. However, if you are using a graphics card that understands profiles, and you have calibrated your monitor with the Spyder utility (or another similar one), then every program that uses the graphics card - i.e., all of them - should be outputting images using the monitor profile.

But most programs don't understand the input profile that is attached to the image by Photoshop (and certain other graphics apps). Firefox and the Windows Image Viewer are, if I've got this right, ignoring the input profile.

But what's going on when you re-open the image in PS, I have no idea!

[Tannin]

BTW, what I see on-screen in Bibble and what I get using other apps is quite different. I haven't had time to figure out why. For the time being, I'm just mentally allowing for what the image will probably look like after saving, and having a guess. If it's too far out, I go back and try again.

I hope this thread runs for a good while, because I have a lot to learn!

[walwyn]

I have the same problem with the editing software and web browser. The software (PhotoImpact) says it is working in sRGB and nowhere have I found out how to change that to something else. Anyway just before I save for the web I +3 contrast and -3 brightness which normally works out fine when previwed in the browser. I've not noticed any difference between IE and firefox in this respect.

[robski]

I've not had a chance to read it all in detail but this looks interesting

http://www.gballard.net/psd/go_live_...profiles.html#

and if you dig deeper your find this

http://www.gballard.net/psd/saveforwebshift.html

Also this

http://www.northlight-images.co.uk/a...anagement.html

I found this Guy very good in the past and gives real world info

http://www.boscarol.com/pages/cms_eng/index.html

[Leif]

Thanks for the replies.

Tannin: Thanks for confirming that Firefox is using the monitor profile. It looks as if my approach makes sense. Phew.

Anyway, a few thoughts follow in case anyone is interested.

I think I know what Tannin means by input and output profile. I suspect most people understand the latter, but I find the former confusing.

As I understand it, an output profile compensates for errors in the output devices display of colours, so that it can display the image accurately. In practice it is a simple look up table used by the display card to map one value to another. Apparently look up tables are usually 8 bit, and in any case Windows XP only sends 8 bits per channel to the display card.

I think by input profile Tannin means the colour space. I have never really understood the underlying reasons for a colour space, although I have been thinking about it this evening, and I think I have figured it out. I suspect that it was introduced for efficiency, and the limitations of input and output devices.

In a bitmap each pixel is described as three numbers, one for each channel i.e. red, green and blue. The value of each number indicates the intensity of a component e.g. red. However representing a colour in this manner is rather wasteful, as many of colours cannot be captured or represented by current devices. Why include colours that we never use. So I suspect that the colour space was introduced as a way to represent colours within a restricted device specific range, or gamut. This has the advantage that colours within the gamut can be represented more accurately for the simple reason that the points corresponding to colour values are crammed together more densely. (That is also one reason why some people claim sRGB is superior to Adobe RGB despite having a smaller gamut.)

I believe that in practice a colour space represents each colour as a linear combination of three vectors. In a perfect world the three vectors would be at right angles, and would correspond to red, green and blue i.e. all colours. In 8 bits each component e.g. red would vary from 0 to 255. In a real world colour space such as sRGB I assume that the vectors are not at right angles.

So if the above is correct, the input and output profiles are quite different beasties. The input profile is just a way of representing colours in a restricted gamut. The output profile is a way of correcting for the deficiencies in a given display device.

So I guess that by converting an image to the monitor profile within PS is simply a way to ensure that you are editing the image as it will be seen when viewed in an application that does not understand input profiles. It is in effect a bodge for the fact that many applications do not understand colour spaces.

Anyway, I suspect I am not alone in being confused by this.

[Leif]

Thanks Rob. I will read those attachments once I get a free minute. Leif

[Tannin]

I'm mega-busy right now and can't really stop to read up on this stuff again (a lot of it went over my head the first time, or didn't soak in).

But I think that Leif and I are working along broadly similar lines. I'm thinking of what I called an "input profile" as essentially the same thing as an output profile but in reverse. Consider, for example, a scanner that has a limited ability to read reds. The "input profile" that the scanner saves with its files describes the gamut that the scanner can deal with - i.e., the limitations of the device that made the image - so that subsequent devices can allow for those limitations and (hopefully) compensate for them.

I've bookmarked this thread and will come back to it, and some proper reading, when I get some free time.

(If I ever get some free time.)

(sigh)

[robski]

A Colour Space is a range of colours (gamut) bounded by a border.

sRGB is a device-independent color space ( think of it as an inter-connection colour Space ) based on "imaginary" primary colors ( think of it as a reference to a set of standard colours).

Input, output and monitor colour spaces are device-dependent (the range of colours that the hardware produces).

The idea of using the inter-connection colour Space is so that source device profiles to be constructed without knowing the actual destination device and destination device profiles to be constructed without knowing the actual source device.