4

If we have an RGB image, most browsers and, in fact, monitors only support sRGB space. I am trying to understand something important. Does the monitor/web then convert each of the pixels in the image to sRGB and then display it? Meaning we are actually seeing the sRGB version of the image.

Also, if that is the case, which formula can we use to do the conversion, and if we did the conversion ourself, I assume we would get an image that 'looks' exactly the same as the original?

petezurich
  • 9,280
  • 9
  • 43
  • 57

3 Answers3

3

The pixel values in an image file are just numbers. If the image is "in" a space larger than sRGB (such as ProPhoto), the pixel values will only be "converted" to sRGB if you have color management enabled, OR you perform the conversion yourself.

A browser or device will only convert tagged images of a non-sRGB colorspace TO sRGB IF there is a color management engine.

With no color management, and a standard sRGB monitor, all images will displays "as if" they were sRGB, regardless of their colorspace. I.e. they may display incorrectly.

Even with color management, if the image is untagged, it will be displayed as whatever default (usually sRGB) the system is set to use.

As for formulas: the conversion is known generally as "gamut mapping" — you are literally mapping the chromaticity components from one space to another. There are multiple techniques and methods which I will discuss below with links.

If you want to do you own colorspace conversions, take a look at Bruce Lindbloom's site. If you want a color management engine you can play around with, check out Argyll, and here is a list of open source tools.


EDIT TO ADD: Terms & Techniques

Because there are other answers here with some "alternate" (spurious) information, I'm editing my answer here to add and help clarify.

Corrections

  1. sRGB uses the same primary and whitepoint chromaticities as Rec.709 (aka HDTV). The tone response curve is slightly different.
  2. sRGB was developed by HP and Microsoft in 1996, and was set as an international standard by IEC circa 1998.
  3. W3.org (World Wide Web Consortium.) set sRGB as the standard for all web content, defined in CSS Color.
    • Side note, "HTML" is not a standards organization, it is a markup language. sRGB was added to the CSS 3 standard.
  4. Profiles do nothing if there is no color management system in place.

And to be clear (in reference to another answer): RGB is a color MODEL, sRGB is a color SPACE, and a parsable description like an ICC profile of sRGB is a color PROFILE.

Second, sRGB is the STANDARD for web content, and RGB values with no profile displayed in a web browser are nominally assumed to be sRGB, and thus interpreted as sRGB in most browsers. HOWEVER, if the user has wide gamut (non-sRGB monitors) and no color management, then a non-color managed browser is typically displaying at the display's colorspace which can have unexpected results.

Terms

  • RGB is an additive COLOR MODEL. It is so named as it is a tristimulus model that uses three narrow band light "colors" (red green and blue) which are chosen to stimulate each of the eye's cone types as independently as possible.

  • sRGB is a colorSPACE. A color space is a subset of a color model, but adding in specifics such as the chromaticities of the primary colors, the white point, and the tone response curve (aka TRC or gamma).

  • sRGB-IEC61966-2.1.icc is an ICC color PROFILE of the sRGB colorspace, used to inform color management software to the specifics such that appropriate conversion can take place.

    • Some profiles relate to a specific device like a printer.
    • Some profiles are used as a "working space".
    • An ICC profile includes some of the math related information to apply the profile to a given target.
  • Color Management is a system that uses information about device profiles and working color space to handle the conversion for output, viewing, soft proofing on a monitor, etc. See This Crash Course on CM

  • LUT or LookUp Table is another file type that can be used to convert images or apply color "looks".

  • Gamut mapping is the technique to convert, or map, the color coordinates of one color space to the coordinates of a different color space. The method for doing this depends on a number of factors, and the desired result or rendering intent.

  • Rendering intent means the approach used, as in, should it be perceptual? Absolute colorimetric? Relative with black point compensation? Saturation? See this discussion of mapping and Argyll.

Techniques

Colorspace transforms and conversions are non-trivial. It's not as if you can just stick image data through a nominal formula and have a good result.

A reading through the several links above will help, and I'd also like to suggest Elle Stone's site. particularly regarding profiles.

Myndex
  • 3,952
  • 1
  • 9
  • 24
1

Note: I use what I think the most common notation (so as the alternate notation in the previous answer): RGB is a colour model, [so formula to calculate various things, but without defined colorimetry, scale, and gamma; sRGB is a colour space, so with a defined gamut; with a colour space we know which colour could be described and which not; and profile is a characterisation of a device (so it defines device specific colour space), intent, and often also some calculation methods to transform colours.

sRGB was defined by computer manufacturers and software companies, to standardize colours, but with old screens and low resolution, it really didn't matter much. Note: They used the primary colour of Rec.709 (HDTV), but with a different white point and gamma (view conditions are different: we watched TV and movies in darker rooms; we have computer for work that we use in brighter lit rooms).

So the normal way (before colour profiles): An image had 3 channels with values from 0 to 255 each, one for red, one for green, one for blue. This was send directly to video memory, and the video card sent these values without modifying them (on digital RGB signals) to the screen. The screen used the 3 channel values for the intensities of the 3 sub-pixels. Note: contrast and brightness control [on CRT screens] permitted some correction.

Because the assumed colour space was sRGB (and screens were built to display sRGB), this was the standard, and it was standardized by HTML (as default colour space). So if your browser has not an explicit colour space (e.g. for an image), it will assume it is sRGB, so it will not change the values.

Screens improved, creation and modification of content started to be done on computers, and there are many media which have a different colour space, images started to specify the colour space: TV has a restricted range (16-235) and a different gamma (and white point), DCI-P3 (digital cinema) has different gamma and primaries (wide-gamut), printing requires often wider gamut (forget small CMYK printers), printing photos also requires different dynamic ranges, gamma, white, and colour space.

So now (assuming an RGB image, but note that many images are not RGB, but YCC (e.g. JPEG)), an image should have its own profile, which tells us the colour characteristic of the camera (so which red is the value 255,0,0). A colour aware program will check the output profile, and the input profile, and it will adapt the colours, so that the final result is near to the intended colour.

So, if you have an unprofiled or an sRGB image, and no profile for your screen (or a fake sRGB profile): the value 255,0,0 will display the most intense and "red-dest" Red that your screen can display.

If you have an unprofiled image, but a profile for the output screen: if the intent is "absolute": the screen tries as best as it can to match the colours according to sRGB. Out of gamut will be just as the nearer in gamut colour. The "relative" intent: it scales many values, so that you will not see highlights (same colour for many out of gamut values). Eyes will correct, so you will adapt (and we adapt quickly e.g. to unsaturated colour spaces as sRGB). The other intents are more about graphics, so it keeps the values: different as the original, but as distinct as possible (for plots and comics this could be good).

If you have a profiled image, it is nearly the same, just that you will find more differences.

An AdobeRGB image (but without profile) will be displayed with the correct saturation on most wide-gamut screens (with wide gamut enabled), and it will be displayed as unsaturated on a RGB screen (if there is no profile; "absolute and perceptual intent" could correct the lack of saturation).

On contrary, an sRGB image, but displayed on AdobeRGB will be seen as too saturated. If the image has a profile, the image will be seen correctly.

On an RGB image (usual formats) you cannot have colour out of gamut of such image: 255,0,0 and 0,255,0 and 0,0,255 are the primary colour of the image colour space, so you can describe only colours in its colour space (assume sRGB if none is specified). This is not true on some formats, where negative values, or values above "white values" are allowed, e.g. on format with float point values (openEXR).

Note: Wide gamut screens have often a hardware button to switch colour space, from the native to sRGB (and back), because many applications were not compatible with colour profiles, but we still need browsers and mails.

If you are interested, the book of Giorgianni et al. (from Kodak) is a good introduction: both authors worked at Kodak (so film [photo, movies], but they were working creating the PhotoCD), so with a lot of problems with screens and colour spaces, and intent. ICC (the standard for profile) is (in my opinion) the follow up of such book: the ICC site has various information about the topic.

petezurich
  • 9,280
  • 9
  • 43
  • 57
Giacomo Catenazzi
  • 8,519
  • 2
  • 24
  • 32
0

In very simple terms: RGB is a color space while sRGB is a color profile.

A profile interprets the RGB values to a specific context e.g. device, software, browser etc. to make sure you have consistent colors across a wide range of devices where a user might see your picture.

RGB values without a profile are basically useless because the displaying device or software has to guess how to map the RGB values to the displays color space. An equivalent is to imagine you getting 100 bills of an unknown currency and being asked to convert this to your home currency. It doesn't work – you need to know how to map these two valuewise.

So basically you don't have to worry about interpreting your images yourself. For web is seems the soundest approach to always convert to the sRGB profile (the images color space is still RGB) and let the browser do the interpretation.

You'll find seemingly up to date info with a graphic of the main browsers and their ability to correctly display the sRGB profile on this EIZO page.

PS: To add to the general confusion around color management – a color space might sometimes be called color model while a color profile might sometimes be called color space.

petezurich
  • 9,280
  • 9
  • 43
  • 57
  • Thanks for the quick reply. I do realize that sRGB is a subspace of the RGB cube. And as you rightly said, if the image 'profile' is not specified, the web browsers typically default to sRGB. Now, my primary confusion is this: if an image has pixel values outside the sRGB profile (which is a subspace of the complete RGB cube), does it convert those pixel values to the closest sRGB values and, if so, using which formulas? – Andrea Russett Jan 06 '20 at 01:21
  • Additionally, from what I see online, it appears that most browsers are only capable of displaying the sRGB profile except if they are wide-gamut (which very few monitors are). Is my understanding correct? – Andrea Russett Jan 06 '20 at 01:29
  • sRGB is a characterisation of RGB: it defines the chromacities of the primaries (and of white). 255,0,0 on a image is sent as 255,0,0. If you have a wide gamut screen, this red will be show as the primary red of wide gamut, so all will be oversaturated. RGB images usually have values (per channel) 0 to 255. the colour space (second meaning) tell you how to interpret the values. – Giacomo Catenazzi Jan 06 '20 at 17:43
  • **This answer is incorrect.** RGB is a color *MODEL*, sRGB is a color *SPACE*, and a parsable description like an ICC profile of sRGB is a color *PROFILE*. Second, sRGB is the STANDARD for web content, and RGB values with no profile displayed in a web browser are nominally assumed to be sRGB, and thus interpreted as sRGB in most browsers. HOWEVER, if the user has wide gamut (non- sRGB monitors) and no color management, then a non-color managed browser is typically displaying at the displays colorspace. – Myndex Sep 03 '21 at 02:29
  • @Andrea Russett — the pixels values in an image file are just numbers. If the image is "in" a space larger than sRGB (such as ProPhoto), the pixel values will only be "converted" to sRGB if you have color management enabled, OR you perform the conversion yourself. As for formulas: the conversion is known generally as "gamut mapping" — you are literally mapping the chromaticity components from one space to another. There are multiple techniques and methods, beyond scope for this side comment. I'm going to add to my answer. – Myndex Sep 03 '21 at 02:54
  • 1
    @Myndex Thanks for the answer and for these two comments. These comments are actually the answer I was looking for. I just wanted to know what the monitors use for the gamut mapping and if it's a single standard approach or if it could be different between monitors. Please just add these two comments (i.e. gamut mapping and the fact that there are different formulas which depend on the monitor)... to your original answer and I'll accept it as the best answer.. – Andrea Russett Sep 13 '21 at 20:15
  • @AndreaRussett Glad it was a help, edited my answer as requested, and thank you. – Myndex Sep 16 '21 at 22:28