Support our Sponsors, they keep FADU free:   AG Photographic   The Imaging Warehouse   Process Supplies   RH Designs   Second-hand Darkroom Supplies  

Notices

Go Back   Film and Darkroom User > Articles > Articles

  ***   Click here for the FADU 2015/2014 Yearbooks   ***

Comment
 
Article Tools Search this Article Display Modes
Colour Profiling Images for Web Display
Colour Profiling Images for Web Display
A quick guide to getting consistent web image colour and contrast across the widest range of web browsers and operating systems..
Published by Argentum
4th February 2009
Default Colour Profiling Images for Web Display

What is a Colour Profile?
A colour profile is a little file which contains data defining the colour space by which your image colours are constrained. Colour space is also called colour GAMUT. A large Gamut has a wider range of input or output colours available and a small Gamut has a narrower range of available input or output colours. Grayscale images also have a colour space which is obviously constrained to shades of grey but may also have varying levels of output mapping so that different greyscale profiles may display the same image with different apparent contrast range.
The colour profile file is used by your computer system to control the mapping of numerical pixel values to actual on screen colours. Sounds technical and it is, but fortunately you don't need to know how it actually works but rather just how to use a colour profile and the effect its presence or absence has on the actual screen colours people see in their web browser or other output device.


Why do I need a Colour Profile?
Image output devices including monitors have a physical limit to the hue, saturation and chroma that they can emulate. Colour profiles are used to constrain the image file colours to match the device limitations. In fact the profile does not physically limit the pixel values of the image file. What it actually does is to map the pixel values of the image file to an output colour value which fits within the target output device colour space for which the profile was designed.
What this means, in effect, is that by changing the colour profile that an image is using, the image can be made to fill the colour space of the output device thereby obtaining maximum colour range for that device.
In fact for the web, your output image doesn't need a colour profile attached to it, but it does need to be prepared using the correct colour space for web usage. This apparently contradictory statement will be explained later. (just keeping you in suspense for now. Read on...)


Commonly used Colour Profiles
There are a plethora of different colour profiles which are supplied with monitors, graphics cards and image editing software which use colour management. There are a few which are "standards" and which are widely used. The three which you should really know about are:

sRGB IEC61966-2.1 (or variations of sRGB)

ADOBE RGB (1998) (or variations of )

Gray Gamma 2.2


The above sRGB profile has been and still is the standard for the web. It is also very similar to the default profile used on most PC's (not macs). This profile constrains colour ranges within 24bit images (8bit colour channels) and is the profile we are aiming to use for web images.

The ADOBE RGB profile is the preferred profile (for many people but not all ) for holding and working on images for digital printing. This profile has a much wider GAMUT than sRGB and you could be forgiven for thinking that it is better for your web images. Wrong! It cannot be contained in a 24bit image and jpeg files are 24bit maximum. And most monitors cannot display the full ADOBE RGB Gamut. They are available but they are not the norm (yet).

The "Gray Gamma 2.2" profile equates to the typical gamma on a PC monitor and is useful for greyscale images.


Where do Colour Profiles actually come into play?
Colour profiles are usually controlled from within your image editing application. Now here's the thing. Some image editing applications use colour management and some don't. If your image editor doesn't provide the ability to assign, convert or manipulate images with colour profiles, there is no need to worry about it because there is a very high probability that by default, it will use sRGB or your computer system colour management profile, which will be pretty similar to the default profile used for the web. i.e. what gets output when you save your jpeg file for the web will, in all probability, display reasonably well on the web. The major problems start when you try and get clever with colour profiles in an editor which has control over them but don't realise what effect that will have down the line.

Everyone's system uses colour management to control the screen colours through all of your applications. Your monitor will have a colour profile attached to it which probably came with the graphics card or monitor software. It may have been installed by the manufacturer.
Image editing software which uses colour management control allows you to override your system default colour profile with different colour profiles and will display the image in your editor using those profiles. This is very useful for obtaining optimum image output quality, particularly for printing but we are concerned here with web output.

The question you should be asking yourselves now is "Do browsers use colour management?". Well just to make things difficult the answer is "Yes and No" and it depends which browser and which operating system it's running on. Macs have always used it. Windows has not and IE didn't until recently. What this means is that you have no way of knowing whether your web image will be viewed using colour management or not. It really depends on whose operating system and browser combination it's viewed on. So we need a way of ensuring that our image will look good for everyone.


The Common Denominator
The web standard for images is the sRGB profile. Browsers that DO NOT use colour management, ignore any colour profiles attached to web images. They "Assign" the sRGB profile to the display image or "Assign" the system default profile. This is done on the assumption that your image was created using the sRGB profile. So if your image is greyscale with a "10% dot gain" profile attached to it, then it would have the sRGB profile "Assigned" to it and that would make it look very different than how it looks in your colour managed editor.

At this point it is very useful to understand the difference between "Assigning" a profile to an image and "Converting" an image to a profile.

"Converting" an image from one profile to another actually modifies the pixel values of the image file so that the new profile gives a reasonably close approximation of the colours that the old profile gave. You will see a subtle change in the image when you do this, possibly not noticeable. All depends on your to and from profiles and the colours in the image. Effectively this does the convert and then assigns the new profile.


N.B. If you convert from sRGB to ADOBE RGB and then convert from ADOBE RGB to sRGB, you will not get the same as you started with. This is a very easy mistake to make when experimenting with profiles. The process of converting is not reversible and is the last thing you would do in your workflow before saving for the web.
Use "undo" if you accidentally convert to the wrong profile.

"Assigning" a profile to an image file just replaces the existing profile with the new profile. The effect is that you get the mapping of the new profile and that can make a big difference in how the image looks on screen. The actual pixel values of the image file are not altered, but if the Gamut of the newly assigned profile is smaller than the old profile, then clipping of colours will happen in the output image. Even if the Gamut of the new profile is bigger than the old profile, clipping can still sometimes happen because Gamut shapes are not the same.


And here's the trick
The default "assigning" by browsers, of the sRGB profile is the common denominator. We can use this to our advantage. You remember that I said we do not need a profile attached to a web image, well this is why. When we have an image in our editor it could be using any colour profile. For example ADOBE RGB. Now just before you save as a jpeg for the web, you "Convert" the image to the sRGB profile. This adjusts the image file pixel values so that they display correctly and very similarly as when using ADOBE RGB. Now remember that we said a "convert" does pixel value modification and then assigns the new profile. Well we also said that "assign" does no pixel value modification, so we don't actually need to do the assign or more correctly we don't need to physically attach the sRGB profile to the image because the browser will do it by default when it loads the image.
So the convert to sRGB sets the correct pixel values for sRGB output and we let the browser assign the profile. This saves a few kb on file size, not much as the sRGB profile is very small anyway. If you actually attach the profile to the image that is fine as it won't cause a problem. In fact not all sRGB profiles are quite the same so some may say its worth saving the profile with the file for browsers which are colour managed. I don't usually bother.
Remember, you must do the convert to sRGB because if the viewing browser is not colour managed your image could look awful even if it has a profile attached.

And finally for truly greyscale images I would recommend using the Gray Gamma 2.2 profile. i.e. convert file to "Gray Gamma 2.2" before saving for web (if the file isn't already using it). This seems to work pretty well for me although I rarely use pure greyscale images. How many of your prints are truly neutral through the whole scale?

Now everyone, regardless of browser or operating system, should see the best they can given their screen calibration. The sRGB profile does not provide the ultimate in quality but that is only obtainable by the few who have ADOBE RGB enabled monitors with colour managed browsers and correctly prepared web images usually much too big for the average user to want to download. i.e. Web technology sucks...


For Photoshop users
I use an older version of photoshop on windows. It's not the most intuitive of tools to learn but since I've spent so much time learning it, I'm not about to waste any on other tools unless absolutely necessary. I'm sure there are easier tools for image editing that can do everything you need them too.

The one thing that you should be aware of with photoshop, at least version 8 which I have, is that when you install it on some windows versions, it may install some colour management software called "Adobe Gamma". You will see it in your start/programs/startup application folder or equivalent whichever version of windows you are on.
"Adobe Gamma" is a real pain because it overrides your hardware profiles and usually gets it wrong also skews your profiles in your image editing software. I recommend to switch it off but at your own risk. After that, using colour profiles works much better.
And if you are using a monitor colour profiler, then you will need to switch it off anyway.

When using save for web in photoshop, use the "two up" tab and right click in each window and set the "original window" to "use document profile" and the "jpeg window" to "uncompensated colour". That way you should see what you will see when the image is displayed on the web and the differences that the level of compression that you use will cause.

To assign or convert image profiles use "image/mode/convert profile" or "image/mode/assign profile".

Remember that you don't need to work on the image in sRGB profile. You can scan in 48bit colour and work in ADOBE RGB and save master copy in that high quality profile. When image is ready for web you can copy the master file convert to 24bit and then convert to sRGB before saving for web. That keeps your work file in optimum quality.

Good luck

p.s. and if you haven't glazed over and want more, then visit the ICC
__________________
An old dog learning new tricks
Article Tools

  #1  
By Barry on 6th February 2009, 08:42 AM
Default

Thanks Rob, very useful information.
Reply With Quote
Comment
Support our Sponsors, they keep FADU free:   AG Photographic   The Imaging Warehouse   Process Supplies   RH Designs   Second-hand Darkroom Supplies  

Article Tools Search this Article
Search this Article:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Article Article Starter Category Comments Last Post
Some great images. Daud Photography in general 7 11th March 2009 01:40 PM
Posting Images Dave miller Help! 0 9th February 2009 12:08 PM
Preparing Images for the web Argentum Feedback and forum matters 3 3rd February 2009 03:17 PM


All times are GMT. The time now is 10:24 AM.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2024, vBulletin Solutions Inc.

Article powered by GARS 2.1.9 ©2005-2006