When I embed a color profile (ICC data) in a jpg file on my calibrated monitor, I make a statement. I say: This is the way I want the image to look like on screen or in print. It is not necessarily best, there might even exist deviations of it that you like better, but this is how I’ve CHOSEN the image to look like! If you are interested, if you know what you’re doing and if you can afford it you can see my images on your monitor screen exactly as I see them (yes, it costs some money, but nowadays a calibrated monitor can be quite affordable). Better still, if you do all this, I can get to see your images on my screen exactly as you see them on yours. It is called standardization, and it was created and put into effect by the International Color Consortium (ICC).

Obviously, for such a standardization to work, input and output software and devices must talk the same language, and the script is found in the image color profile. Software and devices that can read color profiles (a term often used interchangeably with ICC) are called color managed software and hardware, and the procedure of fine tuning devices’ output to correspond with this standardization is called calibration.

It is quite a disappointment to realize that many if not most of the image viewing and editing programs that arrive with our computers’ operating systems are not color managed. What they do is transferring values of R, G and B (0 to 255) exactly as they are to the monitor or printer, each device with its own biases, and usually in the sRGB color space. Among leading web browsers, only Mozilla Firefox is color managed. Despite years of rumors and promises, as it stands now also the latest Google Chrome version (62.0.3202) is not fully color managed. Down this post I will show you how you can test if your own web browser is color managed, and use my Lortet’s iris photograph to compare among browsers. No matter the quality of your calibrated monitor and the value of your computer, if your web browser is not color managed, then images you see on the web, including yours, are not what they are meant to be. If you do not embed color profiles in your jpg files, you do not give me the chance to really appreciate your photos as you had created them.

ICC and Metadata

When a photograph is saved as a jpg file, all sorts of information are saved with it. Metadata may include detailed information about the camera, the lens, the time of shooting, the location, shooting modes etcetera. Metadata may also include detailed information about the software and the steps that were used during postprocessing. If you choose so, but sometimes as a default, metadata can also include ICC information.

You usually want the color profile to be included. It is no more than 4k load on the file, which nowadays, in most cases, is nothing to sweat about.

Generally, when you ‘Save as’ an image in Photoshop, its metadata will be detailed and in the range of about 20-40K. Unlike the common belief, the advantage of ‘Save for Web’ is not by fitting the image better to the web by cutting the file size at the expense of a minor change in quality. That you can do by adjusting quality settings in the ‘Save as’ protocol, and get files of about the same size and quality. Indeed, despite significant differences in file sizes, you will barely notice on screen any differences in images saved with maximum quality versus images saved with quality reduced to 80 or even less (of 100) in the ‘Save for Web’ protocol, or to 9 or even less (of 12) in the ‘Save as’ protocol.

The main advantage of ‘Save for Web’ protocol over ‘Save as’ is that it gives you the option to strip details in metadata, some or most of which you really don’t want others to know (and then file size may be further reduced by 20-40K). To achieve that during ‘Save for Web’ protocol, all you have to do is select among ‘None’, ‘All’ or ‘All except camera information’, in the Metadata window.  Or, you can create your own metadata file, with your copyright statement and with personal information of your choice. Most relevant for this post is that you can also get to keep the color profile, if  you so choose. This post does not deal with metadata other than the color profile. Nevertheless, if you wish to read all jpg metadata, ICC included, you will find how to do that at the bottom of this post.

So, here’s my main post’s message:

Regardless of whether your  your system is color managed and calibrated or not, by all means, check ‘Embed Color Profile’ when you Save for Web.

(Note that in Photoshop CC the ‘Save for Web’ dialog, with the same options, was moved to the ‘Export as’ protocol)

If your system is color managed, then I can get to see your images exactly as you want me to see them if my system is also color managed, or as close to it as possible, if my system is not.

But, you may rightly ask, what if my system is not color managed? My answer remains the same: You still need to embed a color profile. Here’s the explanation.

My first intuition was that, indeed, if a system is not color managed, then adding a color profile that will most likely represent an operating system’s default, will only add some uncontrollable color adjustments to the image, however slight, which are slightly worse than being redundant. All one needs then is just to make sure that the jpg file will be tagged as sRGB, and this would be simply achieve by using ‘Convert to sRGB’. Right? Wrong!

‘Convert to sRGB’ indeed produce (or maintain) RGB values that correspond with the sRGB color space, as promised, but, to my surprise, without also embedding a color profile, the jpg file is left untagged, i.e., with no color space assigned! In practice, this means that if the viewer’s monitor has a larger gamut (say, Adobe RGB, used by many professionals), the image RGB values will be wrongly assigned to the home color space, and will appear dull.

The same photograph Saved for Web using four different method. A. Originally in sRGB, saved using ‘Embed color profile’ + ‘Convert to sRGB’; B. The same photograph (i.e., the exact same colors) saved as Adobe RGB (i.e., different R,G,B values) on an sRGB monitor if it is not color managed (i.e., either the photo is untagged, or it is tagged but the image viewing software is not color managed); C. Originally in sRGB, using ‘Embed color profile’ only; D. Originally in sRGB, using ‘Convert to sRGB’ only.

Photograph A is a copy of the post’s leading photograph. It should appear on any calibrated color managed system exactly as I have created it, or more or less so on any non color managed sRGB system, unless it is way off calibration. To produce photograph B, which simulates how an Adobe RGB image would look on an sRGB monitor (used by most users), I used (in Photoshop) Edit>Convert to Adobe RGB (retain colors, change R,G,B values), and then Edit>Assign sRGB (retaining the Adobe R,G,B values in the sRGB color space). I then saved the image as sRGB. Web browsers use sRGB and therefore, if your image is not in sRGB, you would want to convert it to sRGB. Then, save it using ‘Embed Color Profile’ (or use ‘Embed’ and ‘Convert’ in a single action during ‘Save for Web’, if you so wish).

Now, here’s a question: Once you have an image already converted to sRGB, and you save it for web with ‘Embed Color Profile’ checked, is it not redundant to also check ‘Convert to sRGB’? Will it do anything?

Apparently, it does. When comparing ICC data, I have noticed a single difference in color profiles if I did or did not add the ‘Convert to sRGB’ option. My default choice on conversion, in the ‘Conversion Options’ window of  Edit>Convert to Profile protocol, is to use Intent as ‘Relative Calorimetric’. In files saved for web with ‘Convert to sRGB’ option checked, intent changed to ‘Perceptual’, instead. The conclusion is that a ‘convert’ action was executed regardless. However, the effect of this operation is usually small, and will or will not have a noticeable effect on the final image, depending on its color content. For most purposes, therefore, it seems logical to uncheck the conversion option. The main reason to leave it checked as a default would be that this is a safe proof procedure in case you forget to convert to sRGB earlier on.

Is my browser colored managed?

Photographs C and D above are both saved for web from the same original image in the sRGB color space. A color profile is embedded in C, which tags it as an sRGB file. Photograph D has the same RGB values, but it was saved ‘untagged’ (i.e., I used ‘Convert to sRGB’, but not ‘Embed Color Profile’). If your browser is color managed, you should see on an sRGB monitor some color differences between photographs C and D. This difference is derived from the difference that exists on my monitor before and after calibration, now embedded in the color profile. This difference would have been smaller still, had I have a better monitor. If your monitor is calibrated, you will see photograph C exactly as I intended it to be. If your monitor approximates Adobe RGB, photograph D should be brighter and more saturated, as it makes the exact opposite of what photograph B did: it assigns values of sRGB to an Adobe RGB color space. If your browser is not color managed, both images will transmit the same uncorrected RGB values to your monitor, the two photographs will be identical and neither will look exactly as I would have wanted you to see them. Note, by the way, that photographs A and C are practically identical (C was save without checking ‘Convert to sRGB’). If you don’t trust your eyes, check RGB values with any color sampler tool (there are many nice free standalone programs or browser add-ons that can do this), or use a snipping tool to copy both images from the screen to any image generating program for a better comparison.

How can I read the ICC profile?

Apparently, this is not as common a tool as one would have expected, yet a very easy one to use online. Most image generating software show very little metadata information. Even powerful programs that are capable of showing more, such as Photoshop or the Gimp’s unstable development version, do not show ICC information in a clear and coherent way. Among the two best web utilities that show ICC information clearly, I have chosen to link you to the one that got least confused by my images’ previous resizing operations. This is Jeffrey’s Image Metadata Viewer. Experiment with it, enjoy and learn.