Saturday, 1 April 2017

Colour Space - Best Practices for Displaying on the Web


Click to Enlarge

I was asked recently why files uploaded to the internet, that were saved in a colour space other than sRGB, might not display properly on the internet.

We have all been there! We have all spent hours perfecting an image only to upload it and find it will not display properly because we saved it in a colour space other than sRGB.

Most web browsers display best in sRGB. ProPhoto, aRGB and CMYK can all present display problems depending which software you use to display them. The most commonly accepted colour space is sRGB - all monitors are RGB. For print files, the colour space is CMYK since all printers print in CMYK. Converting between the two can cause problems. The best way is to open the files in their original format and save them for web use ie. sRGB. Other profiles have a greater colour gamut which is good for editing and printing but not necessarily for displaying on the internet. The problem is the greater range of colours are not displayed in the the sRGB colour space, so images saved in anything other than sRGB look fine in Adobe but appear dull when displayed on the internet.

You might also want to look into what your browser says about displaying images too.

sRGB is the standard for displaying compressed jpeg files on the internet, generally speaking. If the files are saved and uploaded in another colour space they might not display properly. If they are converted to sRGB "in-house", and the gamut of aRGB or ProPhoto is not supported, then the additional colour range is converted to greyscale, hence the slightly dull/dark look when displayed on the web. Even if the files are not converted to sRGB (which is usually the case) and are displayed in the colour space they were uploaded in, most web browsers will not display the colour space properly in true colour, by default.

Image editors like Adobe Photoshop have no problem with colour space but if you are working in aRGB or ProPhoto and you save the file in sRGB there will still be a degradation of colour quality.

It is generally good practice to be working in the colour space you want to save the files in, that way you don't lose anything during conversion, apart from the jpeg compression of course.

Some people prefer a different colour space for different reasons. It all depends what the file is being used for. If you are printing files, the best colour space to work in is CMYK since all printers are CMYK. If you print from any other colour space there will always be a conversion (and that is why printed files do not always look the same as they do on the computer).

And also why sRGB, although the oldest technology and the smallest colour space, is still pretty much the standard for web display. aRGB and ProPhoto were Adobes attempt to move the technology forward but the rest of the internet didn't run with it for some reason.

Just to answer the question. Most web sites 'probably' display the files in the colour space they were uploaded and possibly your browser has changed in the last few years? I don't speak with authority for all image hosts but it is unlikely ProPhoto was even available as a colour space when a lot of them began displaying images on the internet.

Since it would involve either a colour space conversion or to check the exif of every file uploaded on the hosts end, I would say it is the responsibility of the contributor to make sure the files are uploaded in the format they would like them displayed. It is also possible that uploaders view the files with software that CAN display the correct colour space and the file wouldn't even appear differently until it was displayed on the web. Basically, you need to upload in sRGB if you want your files to display in their correct colour space on the internet. Especially important if you want to sell those files and have them look attractive (and not dull) to buyers.

The main reason anyone saves their work in ProPhoto "by mistake" is if they are using Lightroom, as (for reasons best known to Adobe) this is the default colour space for editing jpeg files. You can change this to sRGB in the settings if you want to make sure your files are saved and displayed in the same colour space you are working in. Lightroom also does funny things like convert the file you are working on to a .TIF format in Photoshop, which is huge since it is uncompressed, and then converts it back into your jpeg colour space for working in Lightroom.

Lightroom is also a resource hog! And considering it is only a simple photo editor (compared to Photoshop) for that reason I prefer editing my files in Adobe Camera Raw and Photoshop. Lightroom has its uses. The lens correction profiles and vignetting can be useful. The shadow/highlight and noise reduction algorithms also seems to be more effective than Photoshop. But for me it just seems to slow my computer up and becomes "laggy".

As stated before, it is generally good practice to be working in the colour space you want to save the files in, that way you don't lose anything during conversion, and the files appear more or less as you saved them on your computer (depending on your monitor/calibration).

Personally, I think it would be a good idea if ALL browsers and web hosts recognised and supported ALL colour spaces. Which would be a good goal going forward. That way images would be displayed correctly whichever colour space they were saved in. In the examples above, I saved the same image in four different colour spaces: sRGB, aRGB, ProPhoto and CMYK. As you see, when working with very high resolution jpegs (30Mb for the sRGB and 60Mb for CMYK) the differences are subtle but noticeable.

I hope this helps and have a great day!

Matt Blythe.