Custom Gateway - Customer Support

Welcome to the Custom Gateway Support Portal

Here you can raise support tickets and read articles on common queries using the topic sections and search below



CMYK Vs. RGB (Or how should I save images for the web browser)

"An image is an image, however I save it the browser will display what I intended to everyone viewing it, right?" No!

Without going into complex world of colour spaces, intent and screen/printer calibration, I'll instead provide a practical demonstration. That being said, depending on the browser you are using, you may see very little difference between the images saved out using the 3 different RGB colour spaces. Why is that I can hear you asking? Some browsers are 'aware' of the profiles used, some are not, why should this matter? Because you cannot force a viewer of your site to use a specific browser.

For those that want to dig a little deeper, Canon have a very concise explanation over at:

Onto the demonstration, you may wish to compare different browsers and the way they display the images. My comments beyond this point will be based on Chromium.


Colourspace: CMYK
1. Image saved as CMYK

Looks ok? Yeah not bad, maybe a little over-saturated with maybe too much brightness, definitely not what it looked like in PS

Colourspace: adobeRGB
2. Image saved as AdobeRGB

Depending on the browser, too 'muddy', not a good look

Colourspace: ProPhoto
3. Image saved as ProPhoto RGB

Again, muddy, poor colour, looked great in PS mind.

Colourspace: sRGB
4. Image saved as sRGB

Lastly, the sRGB image, looks like it did in PS. Why? Because this is the way you computer is configured to display colour onto the screen. Calibration may affect the actual display, but give or take, it's very close.


Colourspace: sRGB (Screen Intent)
5. Working image. (Saved as sRGB)

This is the red herring, I could make this match any of the above images with the profile it's saved with.

So, hopefully you have compared these images in a number of browsers, and you should have noticed some big differences between the images as you scroll back and forth. 
Which profile should you use?

sRGB. This is the only profile that should be displayed the same throughout browsers and operating systems, ignoring screen calibration, monitor quality and other external factors.

CMYK, Definitely not, leave this for print output. Why? Certain colours from CMYK don't fit into an RGB shaped digital world. "But I use Illustrator?" Happy to say, Illustrator also works in RGB, Check the document options when you create a new document.

AdobeRGB, ProPhoto RGB, Great for editing and other uses, but if your image is going to be reproduced on the web, then convert it to sRGB before you save your web version.

Hopefully this will help your world look a little more consistent. 

Was this article helpful?
0 out of 0 found this helpful