1

Before exporting my image to the web, I want to convert them to sRGB and then remove the sRGB profile from the image (to reduce it's size, as sRGB is the default profile to use if there is no embedded icc profile). I was thinking that there is only one sRGB icc profile, but I discovered there are many variants! For example on color.org, there is sRGB v4 (which is included in distribution of Imagemagick) and sRGB v2.

So with sRGB profile I need to choose the correct one to convert my picture for exporting to the web? Why are there so many different sRGB profiles. (https://ninedegreesbelow.com/photography/srgb-profile-comparison.html) ?

fmw42
  • 46,825
  • 10
  • 62
  • 80
zeus
  • 12,173
  • 9
  • 63
  • 184

3 Answers3

4

Technically, the accepted answer is a bit off

It may not matter much in this particular case. Nevertheless, as this page pops up prominently in searches, we probably should set things right, ya?:

There is just one sRGB

Incorrect. The original sRGB specification from the IEC discusses two flavors of sRGB, and later years saw the addition of a number of sRGB variants. BUT WAIT THERE'S MORE and I am going to discuss them below.

Most browsers recognize just ICC v2

Not Relevant. The OP said he is stripping the profiles, so it does not matter at all what version profile he uses. Not at all, as there will not be any profile to read!

sRGB has well defined ... "gamma"...

Not Really. The sRGB TRC encoding is specified with a piecewise tone response curve, which is not a "gamma" function, though the spec does permit EOTF using a gamma curve with a 2.2 exponent. Yes, even the spec has more than one transfer curve indicated.

AND: it is important to know that there is further variation in the various ICC profiles. More below.

...and it predates ICC,...

Incorrect. The ICC was formed in 1993, and sRGB was created in 1996. 1993 predates 1996. The ICC published the v4 spec in 2001 but that's irrelevant.


Answering the OP

I want to convert to sRGB & then remove the sRGB profile from the image

Okay, this is a common practice and has some advantages. Up to CSS3, sRGB is the default colorspace for web content, meaning that the specified page colors are relative to sRGB, and untagged images should be interpreted as sRGB, and therefore remain relative in color to the CSS colors chosen in your styles. This is probably the biggest factor in favor of using untagged sRGB images.

As it happens, some browsers that do read embedded profiles do NOT adjust the CSS colors to a given output intent. I.e. there are some cases where the image is adjusted, but the page colors are not.

Human color perception is endlessly fascinating (at least to me, LOL) and we have a feature we call "color constancy". The truth is, it is less important that the monitor emit exact, absolute color combinations.

It is more important that everything DISPLAYED on the monitor maintains the same consistent colors relative to each other (all the content on the monitor.) I.e., you design a page with a color scheme, and you want the image to maintain the same relative color distances to the page.

If your sRGB image has an embedded profile, then if the browser adjusts the image but not the page colors, the relative colors will shift. This is the behavior of many browsers. (One exception is MacOS Safari, which is color correct/color managed for everything.) CSS4 in the near future is going to add other color spaces, though sRGB is expected to remain the default.

So which sRGB profile [is] correct to convert my picture for the web? Why so many different sRGB profiles?

The answer here is... use your monitor profile.

Wait... WUT?

It is more important that your workspace is calibrated for sRGB and that your test browser uses/assumes sRGB for all colors on the page, both the CSS colors and the images.

As you are going to strip your profiles out of the images, using your monitor profile for your working space means your photo editor window needs to (and should) match the CSS colors in your browser windows. Then WYSIWYG. What you see is what you get, and with everything untagged, the relative colors should be consistent everywhere.

But what about wide gamut monitors? Yea, things may look more saturated on them, but again, color constancy effect. You want all the colors between your images and your CSS styles to remain relative.

Under No Management...

Did you know that when you watch TV, there is no color management? Programs are color corrected on calibrated systems in studios, adjusting the look in a "WYSIWYG" environment, and then streamed out to the world with no color management.

When you design a webpage, your CSS colors are not color-managed in most user's browsers, and if your image colors are also not managed, then they should remain the most consistent as a total page of content.

But this does require that you set up your work environment for consistency, and also test your content on several different browsers on several kinds of devices.

But what if you still want a color managed working space...

Fair enough. Then you want your final working space to be your delivery space, sRGB. The profile I like for a TRC encoded working space is sRGB-elle-V4-srgbtrc.icc

When I say "final working space" what I mean is, if you are prepping images for multiple destinations, some web, some print, etc, then you might be needing to work in a larger space for the main image editing (such as ProPhoto, Rec2020, or ACES, etc — and importantly, at a higher bit depths, as in 16bit or 32bit float).

From your larger space, the print images get converted to CMYK, and the web images get converted to sRGB using sRGB-elle-V4-srgbtrc.icc. Then do some final adjustments if needed, and output to 8bit with no embedded profile.

Final Thought

Reading the above, you might think I didn't appreciate color managed workspaces, but I definitely do. I use color management most of the time. But if your destination is a non-color-managed environment with a defined standard colorspace, then it is more important to be in a calibrated version of that colorspace.

Best of luck!

Myndex
  • 3,952
  • 1
  • 9
  • 24
  • "do read embedded profiles do NOT adjust the CSS colors to a given output intent" That is just a bug in Firefox, wrong default. "sRGB-elle-V4-srgbtrc.icc" This profile is better, it also uses para encoding of TRC: https://github.com/saucecontrol/Compact-ICC-Profiles/issues/6 – Валерий Заподовников Sep 29 '21 at 21:01
  • @Валерий Заподовников Better how? The chromatic adaptation matrix is a bit off. As for "sRGB-elle-V4-srgbtrc.icc" it uses a parametric curve, and saucecontrol is a project of Clinton Ingram who himself recommends Elle Stone's site, which is where "sRGB-elle-V4-srgbtrc.icc" came from, and I do recommend getting to know Elle Stone's site, https://ninedegreesbelow.com she is one of the key developers of Gimp among other things. – Myndex Sep 30 '21 at 16:23
1

ICCv4 is better if it does use parametric curve encoding. Profiles from ICC even in v4 do not use that. ICCv2 (does not support para) will only use 1024 1DLUT that does have linear part but still worse than para curve. Use this: https://github.com/saucecontrol/Compact-ICC-Profiles/issues/6

https://github.com/saucecontrol/Compact-ICC-Profiles/blob/master/profiles/sRGB-v4.icc?raw=true

  • Parametric curves are computationally more expensive which is why LUTs are commonly used, unless an unbounded profile is needed. – Myndex Sep 30 '21 at 16:26
  • 1) para is done by GPU/OS (though Chrome removed windows 10 HW ICC accel.) nowadays, so there is no much difference 2) 3DLUT in v4 is very big... 3) chromatic adaptation matrix is wrong? – Валерий Заподовников Sep 30 '21 at 21:22
  • 1) well, not all systems or devices have useful GPU, esp. mobile, and it requires a software implementation as well. It is particularly an issue for mobile where battery life is important. 2) 3D LUTs are usually big, but a 3D LUT is not needed for the TRC. 3) It's a minor thing, likely using a different white point, which is a current topic in CSS4 color. (The calculated matrixes do not match the WP). – Myndex Oct 01 '21 at 00:39
  • Actually his "chad" is most correct AFAIK. Here is how it was done https://photosauce.net/blog/post/making-a-minimal-srgb-icc-profile-part-3-choose-your-colors-carefully As for CSS display-p3 in Safari try this: https://codepen.io/NV/pen/XLOOdE – Валерий Заподовников Oct 03 '21 at 13:39
  • No. See also [this thread with Elle and Graham](https://discuss.pixls.us/t/feature-request-save-as-floating-point/5696/190). – Myndex Oct 04 '21 at 00:20
  • I read it, but I have access to all IEC standards, his logic is most correct, as for "chad" that is what ICC uses in its own https://www.color.org/chardata/rgb/sRGB.pdf You are supposed to have perfect round trip... Also in sYCC standard they describe bigger matrix (just inverted from 4 decimal RGB --> XYZ matrix, so...), it is on wikipedia now, https://en.wikipedia.org/wiki/SRGB#sYCC_extended-gamut_transformation The whole point here is to do what SMPTE 177M does. – Валерий Заподовников Oct 04 '21 at 03:22
0

There is just one sRGB. The version you see, it is the version of ICC. The version of the standard not of the profile. Most browsers recognize just ICC v2, only on last period they start to support ICC v4, but not yet complete implementation.

sRGB has well defined chromacities and "gamma", and it predates ICC, so both versions can support well sRGB.

Giacomo Catenazzi
  • 8,519
  • 2
  • 24
  • 32