User:Colin/BrowserTest

Nutshell: If you want to ensure your images display with the correct colours for all users then you must save them as sRGB and embed a colour profile.

Images with profiles

sRGB	The image on the left uses the internet standard sRGB colour profile, which is used when images are published online. You should see seven colours: magenta, blue, cyan, green, yellow, orange and red.
AdobeRGB	The image on the left uses the AdobeRGB colour profile, which is often used by professionals when their target publication is printed. In a browser that is not colour managed displayed on a standard-gamut monitor, it appears less saturated than the sRGB profile like the simulated image on the right.	AdobeRGB coloured image, assigned sRGB
ProPhoto RGB	The image on the left uses the ProPhoto RGB colour profile, which is not recommended for JPG, and is used more correctly in a 16-bit TIFF while post-processing in Photoshop. In a browser that is not colour managed, it appears very desaturated and with colour shifts (the red has turned brown and the dark blue turned purple) like the simulated image on the right	ProPhoto RGB coloured image, assigned sRGB
rg-switch sRGB	The image on the left uses a custom profile based on sRGB but with the red and green primaries switched. In a browser that is not colour managed, the colours are all wrong (the middle green pencil is red and the rightmost red pencil is green) like the simulated image on the right.	rg-switch sRGB coloured image, assigned sRGB

On Windows 10, the browsers Firefox 45, Chrome 50, Opera 36, Internet Explorer 11, and Edge 25 are all colour managed with-regard-to the JPG colour profile. So the above images on the left side should appear identical. Firefox, Chrome and Opera also respect the profile of the monitor you are using (if you have installed one) -- though if you have two monitors then only the profile of the primary monitor is used. Internet Explorer and Edge both ignore the monitor profile, which means that if you have a wide-gamut display and have configured it as such, then the above pencils will appear very saturated (like the colours of children's felt-tip pens, rather than adult's colouring pencils).

On Apple OS X the browser Safari is colour managed with-regard-to the JPG colour profile and the monitor profile.

Until 2016, Android or Apple mobile devices were not colour managed at all. However, since iOS 9.3 Apple mobile devices are now colour managed. Some new Apple devices (iPhone 7, 9.7-inch iPad Pro) have wide gamut displays. Android is due to get colour management and support for wide gamut displays in Android O released some time in 2017. Currently Chrome on Android is colour managed wrt the images, at least on a standard gamut phone.

Images without profiles

sRGB no profile	The image on the left is created with the sRGB profile but the ICC Profile has then been removed using exiftool.exe. The EXIF ColorSpace tag is retained and set to sRGB. Many browsers will not colour-manage this image (though possibly Safari does). On a wide gamut display it appears oversaturated, like the simulated image on the right. However, this simulation cannot achieve the super-saturated colours that a wide-gamut monitor can display.	Simulate unmanaged sRGB image on wide-gamut display (sRGB version)
sRGB no profile no tag	The image on the left is created with the sRGB profile but ICC Profile and the EXIF ColorSpace tag have then been removed using exiftool.exe. Most browsers will not colour-manage this image. On a wide gamut display it appears oversaturated, like the simulated image on the right. However, on a standard-gamut monitor, this simulation cannot achieve the super-saturated colours that a wide-gamut monitor can display.	Simulate unmanaged sRGB image on wide-gamut display (AdobeRGB version)

On Windows, with standard settings, only Chrome (version 61 and above) will colour manage images without profiles and assume sRGB (which is what W3C specify should be done). For the others, any DCF EXIF tags that indicate sRGB are ignored and the image's RGB values are sent direct to the monitor without interpretation. If you have a standard-gamut monitor, these two images probably look like the sRGB version. If you have a wide-gamut monitor, then they are over-saturated. Also, if you have a wide-gamut monitor, the AdobeRGB simulation should appear more saturated than the sRGB simulation (particularly the cyan, green and orange pencils).

There is a fix for Firefox:

• Type about:config into the address box and press return
• Accept the dire warning about dragons
• In the Search box that appears, type gfx.color
• Double-click on the item gfx.color_management.mode and change the value from 2 to 1. The values of this field are:

0: Disable colour management

1: Enable colour management for all rendered graphics

2: Enable colour management for tagged graphics only (default)

This forces Firefox to intrepret untagged/unprofiled images (JPG, PNG, TIFF) as well as text and other markup as being in the sRGB colour space and to respect the profile of the monitor.

On OS X and iOS 9.3 and later, the Safari browser will read DCF EXIF tags to correctly choose sRGB or AdobeRGB images even if there is no embedded ICC profile.

Recommendations

If your camera offers a choice of colourspace in its menus, then pick sRGB rather than AdobeRGB. This has no effect on the raw files generated; it only applies when the camera saves JPGs to the card. Even if you normally shoot raw, there are often camera features (HDR, stitched photo, etc) that only output JPG. The main time AdobeRGB is useful is if you are a professional photographer sending AdobeRGB images directly to your print publisher.

Unfortunately, the JPGs created by your camera almost certainly lack an embedded ICC colour profile. The manufacturer does this to save a few kilobytes per image. So although they are correctly tagged sRGB/AdobeRGB all Windows/Android browsers by default ignore this [see above for the partial fix for Firefox]. To ensure your image is displayed correctly on wide-gamut displays, you must embed a colour profile. If you are processing the image with graphics software anyway, then you simply need to ensure you choose the correct options when saving the final image. But if you are simply using the out-of-camera JPG, then you may wish to insert a colour profile without loading/saving the JPG (which can lead to small degradation in image quality). TODO: give instructions on this.

If you process your raw files with Lightroom, Photoshop, GIMP, etc, then make sure you save them with appropriate colourspace tags and embedded profile. You can test your image is correct by uploading it to Jeffrey Friedl's Exif Viewer.

Future

The future of video and cinema is the Rec.2020 colourspace, which is standard for 4K content such as Ultra Blu Ray. This very wide gamut colourspace is being used for some movie content today, but display devices are not widely available. In 2016, some expensive displays (costing many thousands of pounds) will claim to display 90% of Rec.2020 colours. Consumer displays are currently targeting DCI-P3 which is a wider gamut than sRGB but not as wide as Rec.2020. Some new Apple devices also support DCI-P3.

The new movie formats also allow for 10-bit colour depth vs the 8-bit on a JPG. Unfortunately there is no commercial push yet for a still-image format that matches these new moving-image formats in terms of colour or dynamic range. Perhaps once affordable displays become available then a new still-image standard will arise.