Colour Space for Web - Setting Colour Space in Photoshop or Lightroom

Colour Space for Web – Setting Colour Space in Photoshop or Lightroom

by Lee Duguid, January 23, 2013
LANDSCAPE PHOTOGRAPHY | tips | Colour Space for Web – Setting Colour Space in Photoshop or Lightroom

A mistake we all have to learn from is uploading images to the web in the wrong colour space. I was doing this a few years back and couldn’t figure out why there was such a large colour shift between Photoshop and what was viewable on the web (including my website and Flickr). So what was going on? Well the standard colour space supported by all web browsers (Internet Explorer, Safari, Google Chrome, Firefox) is sRGB. Uploading a colour space other than sRGB and colours cannot be guaranteed. This seems to be less of an issue as newer browsers support larger colour spaces however until your visitors update their browsers this will be an ongoing issue. Believe me, look at your websites Analytic’s and you will see that most visitors to your site are using old web browsers. To see exactly how bad the colour shift is I’ve uploaded the same image in three different colour space’s, sRGB, Adobe98 and ProPhoto. If the first row of images are all different in colour you need to upgrade your web browser!! With older browsers if you are viewing images that have not been converted to sRGB you are not getting a true reflection of the colours. In fact they probably look nasty.

I suggest trying Google Chrome. It displays colour space correctly and also renders my website the best…it looks awesome, go see 🙂

colour space for web srgb colour space for web pro photo colour space for web adobe 98
Three Colour spaces as viewed by your current web browser (they should be the same regardless of colour space)

Colour Space Internet Explorer 8
Three Colour spaces as view by Internet Explorer 8 – note the colour shift between all three colour spaces, only sRGB is correct.

So photographers take note, before saving your images and uploading them to the web be sure you are using the correct colour space. Here’s a video on how to change colour space in Adobe Photoshop and Adobe Lightroom.

Write a comment

Comment from Brian Duguid
Time: January 24, 2013, 12:08 am

I’m using IE9 at work and can confirm the first three images all look identical.

Comment from Dan
Time: January 28, 2013, 3:00 pm

You know, I just noticed this the other day on mine, and I did some tutorials on lightroom and found the colour space was not sRGB but still using the default colur space. I have since changed it. So a nice little tip.

Comment from Andrew Losurdo
Time: May 13, 2013, 1:13 pm

I have been pulling out my hair (the little i have left) the last couple of days with sRGB files looking as they should in various viewers (PS, Preview etc etc), however as soon as i upload them to my site and view them in Chrome the tones move quite a lot “flatter”.

I have have looked at the same image in a Firefox browser and it displays as it should.

All files have been converted to sRGB and embedded. It seems to me that Chrome may be using a slightly different version of the sRGB colour space.

Just though i would share this as it has been driving me crazy!

Comment from Lee Duguid
Time: May 13, 2013, 5:28 pm

Thanks Andrew, very observant of you…didn’t realise that so thanks for sharing.

b Facebook
r YouTube
x Instagram

photoshop videos

remote photoshop tuition