This post is about the weird problems that can occur when you try to publish your photos on a website. Everything looks fine in your Photoshop but when you look at the pictures with your web-browser it looks almost completely different. Of course it is still the same picture with the same objects on it but the colors look dull, to dark or even have different tones. People asked me a lot about this because they knew that I was kind of experienced with color-management which is why I decided to write something about it.
It is really not that hard to prepare your pictures for the web. In fact most of the »consumer« cameras already produce pictures which are ready for the web. This is because they are using the sRGB color space which was made for the uncomplicated use of digital images. It is a very small color space but because of that most of the displays and monitors out there are able to produce sRGBs colors. The cameras deliver sRGB pictures which can be viewed on uncalibrated displays and monitors. Consumer printers are also able to reproduce the sRGB color space so you can even print your pictures properly without the need of adjusting any color options and settings. Needless to say that sRGB makes a lot of sense for the world wide web as well since the vast majority of the displays and monitors that are used for looking at websites are not calibrated as well. I recommend reading a more detailed explanation of sRGB here.
Of course a small color space is not suitable for professional or semi-professional use. Most of the more expensive cameras and I think all of the SLR cameras more than just the sRGB color space in which the pictures can be taken. Two of the most common ones are Adobe RGB and ECI-RGB. Compared to the sRGB color space these two are pretty huge. If your camera only does 8 BIT Pictures you can use sRGB with no trouble at all. It will make your life easier but if you take pictures in 16 BIT it is really recommended to use a larger color space because otherwise you would throw away a lot of color information just in the moment you are taking the picture.
I don’t want to get lost in details here so it is important to know that there are smaller and larger color spaces. sRGB is a pretty small color space but is very useful for the uncomplicated exchange and use of images and because of that it is being used in the web as well. It has been endorsed by the W3C, Exif, Intel, Pantone, Corel, and many other industry players. It is also well accepted by Open Source software such as the GIMP, and is used in proprietary and open graphics file formats such as SVG.
Alright then. If you are saving a picture for the web, make sure you converted it to sRGB before saving it. I will show you what happens if you don’t do that. I suggest you open each of those sample pictures in an extra tab of your browser because you can’t really see the differences at that size.
This is what the picture is supposed to look like. I converted it to sRGB before saving it and I tested it on different machines, with different browsers. There is no sRGB profile attached to it. You can attach it if you like but most of the software out there will assume that a picture without an attached profile is in the sRGB color space anyway. This is the big advantage of sRGB.
Image converted to sRGB, no profile attached
The second version of my sample picture was converted to ECI-RGB when I opened it in Photoshop. I always use a large working space profile for manipulating and editing pictures. I saved the picture without converting it to sRGB and without attaching the ECI-RGB profile. The colors look dull and a lot of the saturation is gone too.
Image converted to ECI RGB, no profile attached
The third version is also in the ECI-RGB color space but this time with the ECI-RGB profile attached to it. Your browser might not be able to understand the profile but if you save the picture on your computer and open it with a program which is able to understand color profiles you can see the colors like they were supposed to be. With a profile attached software like Photoshop knows how the colors should be displayed. It is kind of a translation help.
Image converted to ECI RGB with the ECI RGB Profile attached to it
The last version was converted to my displays profile. During my research for this I found some websites claiming that this would be the best way to get your pictures look the same in photoshop and on the web. This nonsense of course because there will be just a few people at best who have the same display with the same profile as you do. But see for yourself.
Image converted to my displays profile, no profile attached
It is a little tricky if you have a calibrated display because if you are converting your pictures to sRGB it is likely to happen that they will look different compared to the original. Many people get confused by this and even I was questioning my senses when I tried to get my pictures to look the same in Photoshop and on the web. I set up these pictures and tried them on different machines and I came to realize that the sRGB version looked best in all the cases even-though it didn’t look exactly like the original on my machine. You really shouldn’t worry about that.
It is even more trickier when you are working on a mac. This is because Mac OS X and most of its programs like Safari, Mail and Preview are color management aware. This means Mac OS X is capable of understanding color profiles and it is one of the many reasons why I love it. For new users this is confusing though. When you’re looking at webpages using Safari it will interpret the profiles which are attached to pictures. If you look at the ECI-RGB version of my sample picture which has the ECI-RGB profile attached to it you will see what I mean. If you looked at the pictures using Safari, NetNewsWire, Vienna, Newsfire etc. look at it again using Firefox and you will see what the rest of the web is seeing. This is because Firefox is not capable of interpreting color profiles.
If you have further questions I’d be pleased to answer them. Just leave a comment.
Annotations:
Technorati Tags:
web, photography, webdesign
Very nice and useful! I have never seen such a short and robust color space explanation with examples which really makes sense.