Glen Charles posted ...

Converting to the Browser Color Space

Login to start new topic
Help topics

Converting to the Browser Color Space

Category: General Discussion

Posted: 03-28-13 10:17 PM - Views: 1205

By: Glen Charles

Back to post list

0

Share this topic with your colleagues

Start of discussion

Most browsers are quite dumb. They have no clue about the colors that are really in your picture. Browsers make assumptions about the data and map that data to their own color space. Safari makes pictures too warm, Chrome makes them too blue etc.
None of the browsers can match your picture in your own image editor. Image viewers are in between - sometimes they map it correctly sometimes they don't.
When you take the shot, the software assigns a color space to the data, whether it is JPEG, TIFF, DNG or RAW. You can sometimes select which color space will be assigned. Leica has sRGB, AdobeRGB1998, and CIERGB (M8.) Most cameras assign "camera RGB" to the data and you can't change it. Camera RGB is similar to sRGB, but not quite.

The fact is that the RGB in the browser is not the same as the camera, and somehow you have to change the data to look right in the browser - and they are different from one another.

This discussion is about how to make those changes.
Back

Replies ...

Reply Nr.4 from Glen Charles on 11-5-13 5:57 AM

Read this post to see what the browsers do to your colors, and how to fix the problem when you save your picture for the WEB.
Reply Nr.3 from Glen Charles on 03-30-13 4:09 AM

Here is a discussion at DP review on the display of images in their forums and with wide gamut monitors. They are saying the same thing as I have said, but with more detail and more specifically the issue of using a wide gamut monitor for viewing browser images.

http://www.dpreview.com/forums/post/50027507
Reply Nr.2 from Glen Charles on 03-28-13 10:18 PM

Color Profiles for the WEB

If the EXIF colorspace is sRGB, it doesn't matter if a profile is attached or not, most software editors go by the EXIF data. All editors allow you to change this habit by selecting a color profile to be used as the source for all images. Viewers do not usually allow this. They read the EXIF data, or the color profile attached if there is no EXIF data from the camera.
All browsers assume the file is meant to be sRGB anyway, because they can't display anything else.

If you APPLY Adobe 1998 to an sRGB file, the file values will change. The data are given new meaning. Reds blues and greens will become more saturated when looked at in a viewer. The EXIF data given by the camera still says sRGB. The color profile - if attached - will still say sRGB. All you have done is lie about the colors that are in the file by assigning new values for the data that is in it. You have told the viewer that what normally would be made into an ordinary red, should be made into a deep red, instead.
Now, if you tell the viewer what you have done to the file, by going to the preferences section of the software and changing the source color to Adobe 1998, the viewer will recognize this setting and will remap the colors to sRGB and you will see the proper colors on the monitor again.

But, there is no way to let the browser know that the source image is in Adobe 1998 color space, there is no pull down menu in the browser preferences that allow you to select the source color profile. The browser will assume that the colors in the file are properly mapped to sRGB and you will see very saturated colors in the image - people will all have red faces etc.

So you must go back to your editor and APPLY one of the sRGB color profiles to the file.
Now, the browser doesn't actually know exactly what colors the sRGB profile you applied to the image should produce. You may have chosen a CIE sRGB, or an Apple sRGB, Generic RGB or an RGB that the camera manufacture attached to the image (often labelled "camera RGB"), the browser ignores all these variations and assigns whatever sRGB profile it is familiar with. Sometimes - as in the case of Safari - it uses the monitor color profile which may be similar to sRGB but with more saturated yellows. The image in the browser will look different than the image in your viewer - it may show redder blues in the sky, and whites a little warmer. Another browser, like Chrome for instance will have a different sRGB color profile and Chrome ignores the monitor color space. Blues will be more blue, whites more blue. If the Chrome browser uses exactly the same sRGB profile as your viewer, the images should match.

You could, if you want, go into the monitor preferences to find out the name of the monitor profile in use, and select this same profile as the source profile for the image. In this case the Safari image would match the viewer image because they would be using the same color profile. But then Chrome would be different because it is using its own sRGB. Internet Explorer works the same way as Chrome.
Firefox is different. If you attach a color profile to the file, Firefox will use that profile to properly map the image to an sRGB that Firefox understands. We call Firefox a "color aware browser."

Suppose that you went back to the modified image where the values in the file represented Adobe 1998 colors, and you attached the Adobe 1998 color profile to the image by assigning Adobe 1998 as the source in your editor. When you saved the file, the Adobe 1998 color profile would be attached to the file. When Firefox received the image it would recognize the attached profile and would remap the colors - on the fly - to those of its own sRGB. This is not the case for any other browser which would all show red faces and purple skies (except strangely for IE 5.1 Mac, which is a color aware browser.)
BTW many cameras don't add Adobe 1998 to the EXIF data because it is not a recognized EXIF profile. Usually the profile will be identified as "uncalibrated. " Some software programs will add in the Adobe 1998 tag, but subsequent software may not recognize it, so you have to select that profile as the default source profile for further editing. If the colors look wrong, suspect that this has happened.

So what to do? (read part 2)
Reply Nr.1 from Glen Charles on 03-28-13 10:18 PM

Part 2.
If you left the colors as they were when you shot the picture, the camera would assign its own cameraRGB to the image and the browsers would assume that any image that was sent to it was about the same as its own sRGB, and it would produce an image that looked almost like the original. Of course, we know there are differences, we can see them when comparing the browser image side by side with our viewer image. We accept these variations in our images because we don't know what is causing the difference, and we can't fix it. I was looking at a picture of cherry blossom trees on two computers. One had predominantly pink blossoms, the other predominantly white, and we accept that some computers will do this (hard to calibrate a tablet) but it is a bit disturbing when a single computer shows slight differences in color between browsers.

If you always used one browser, you could adjust your own source sRGB profile to match the browser by trial and error. But this wouldn't be good for any other browser, and if you are showing your pictures on LI, people will be looking at them in all sorts of Browsers, including Pads and phone browsers.

The situation becomes more complicated if you select - on the camera - Adobe 1998 as you source profile. We know that most browsers won't recognize what you have done (the exception being Firefox.) So you will have to convert the image to sRGB at some point - usually after you have finished all editing.
The same must happen if you select a working color space that is not sRGB. Usually the working color space is chosen to be larger than sRGB so that you can do adjustments to brightness, saturation etc. without running into any "headroom" issues. This color space may be Adobe Wide or Pro, or a custom color space light Ektaspace that I often use. After all the edits are done you have to convert from your working color space to sRGB for the browser.

There is a caveat: Firefox will be confused if the EXIF data in the file says Adobe 1998 (because you selected this in the camera), but the color profile of the image has been converted to sRGB. Firefox will take the EXIF data as being correct. I did a RAW conversion of 100 files one day and all the colors were wrong in my editor, because in the conversion process the color space was changed but the EXIF was retained. The files were now sRGB, but the EXIF data from the camera was shown as Adobe 1998. The viewer accepted the sRGB data as Adobe 1998 and all my images were over saturated. I had to go back in and change the EXIF data manually. So, in the conversion from Adobe 1998 to sRGB you must select to allow the EXIF to be changed.

Okay so by now you probably think it is best to stay in sRGB from camera to browser. After all no browser can display any more colors than the browser software will accept (even if you have a monitor that has a wide color gamut, the browser limits the colors to sRGB.)

There is a better way to manage your colors. Instead of attaching a color profile to your images you can have the viewer EMBED the colors into the file, and hide the EXIF data from any browser.
The browser then accepts the data as being already mapped for its own sRGB color space. There will still be slight differences between browsers, but one of them should be an good match for your viewer.

You sometimes see on web sites a warning "Best viewed in Firefox " because the web site designer knows that some people won't embed the color profile and only Firefox is color aware enough to know what to do with a profile attached to any of the images.

On iPads, and Android tablets, the default browser is Safari or Chrome. But Firefox is always a downloadable option. It is good for pictures, not so good for social networks.

When you embed the color profile, you must get rid of the EXIF tag, and not attach any color profiles to the image.
[If you are printing, the printer looks for the attached color profile and ignores the EXIF data. You don't want to both embed the color profile and attach a color profile, you will get strange colors.
You will have to have two versions of you picture - one for the web with embedded sRGB color profile and one for whatever printer/ink/paper will be used [this is a whole other discussion.]

Now you know why so many people stay with B&W photography.
Please login to post or reply

Advertise your company and services on LeicaImages.
Send us an email to support@leicaimages.com

LeicaImages is 100% free to you.
Even a one time donation or subscription can really go a long way in helping to run the site.

Thanks for your support !