Export for Web: sRGB or P3?

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Topic: Export for Web: sRGB or P3? Read 1319 Times
  • John Sadowsky
    John Sadowsky
    Participant
    Posts: 99
    Computers & Displays
    on: January 25, 2020 at 10:06 am

    Since introduced by Apple in 2015, most new computers and mobile devices have a wide P3 color gamut.  Shouldn’t we create JPEGs for the web using P3 now?  I used P3 JPEGs for my web page, and the images look great on my P3 Apple devices!

    The issue is whether or not the viewing browser is color-managed.  If managed, the browser will do the transformation from P3 (or whatever the color space is embedded in the JPEG) to monitor the screen color.  The problem comes when the browser is not managed, in which case it just assumes the image is sRGB.  That will distort the colors of a P3 image.  10 or 15 years ago most browsers did not observe color management.  What is the current situation?  Do we need to be concerned about browsers that will trash the colors of P3 files?

     

    JSS

    Attachments:
    Mike Nelson Pedde
    Mike Nelson Pedde
    Participant
    Posts: 456
    Re: Export for Web: sRGB or P3?
    Reply #1 on: January 29, 2020 at 3:19 pm

    Good question, John. Given that I can download an app and use my x-rite device to calibrate my phone screen, on one hand we’ve come a long way. On the other hand, even among the members of the photo club to which I belong, I’d say maybe a handful of them bother to profile their monitors or even have the hardware to do so. If one doesn’t begin there, whether or not one uses a colour-managed browser becomes, to some extent, moot. On Windows I use Firefox, and it is possible to set it up to be colour-managed, it’s not engaged by default. One first has to know it’s possible and then take the steps to engage it. To that end, and given that most of the people in the world have no idea what you’re even talking about, I’d say that colour management is a very weak link in a very long chain. Unless you’re sending specific images to specific people, I’d suggest staying with sRGB.

    My 2¢.

    Mike.

    _____
    Mike Nelson Pedde
    Victoria, BC
    https://www.wolfnowl.com/

    John Sadowsky
    John Sadowsky
    Participant
    Posts: 99
    Re: Export for Web: sRGB or P3?
    Reply #2 on: February 5, 2020 at 12:21 am

    Mike, I’m not sure I agree – rendering as if sRGB when it was really Adobe or P3, I think would be noticeable.  I don’t believe that calibration error is as large as differences in these color-spaces.  (I think that calibration may be overrated with modern monitors – I’ve never noticed much before/after difference on my 2017 iMac retina, or on my previous 2009 iMac.)

    Anyway, this is a testable hypothesis!  I have my own code that allows me to construct TIFF files – so I can stuff in any ICC profile.  I can take an image in P3 or Adobe, and spoof the viewer by inserting an sRGB profile.  Then we can do a side-by-side to see the difference.  Give me a week or so.

    JSS

    John Sadowsky
    John Sadowsky
    Participant
    Posts: 99
    Re: Export for Web: sRGB or P3?
    Reply #3 on: February 5, 2020 at 2:35 pm

    Mike:  Here are some results of a P3 vs. sRGB comparison.  I have to admit – it is hard to see a difference.  Looks like you were right.

    These files show stops gradients with a 6 stop range for sRGB and Display P3.  The RGB values at full scale are the same for both sRGB and P3: red = (255,0,0), …  Each gradient was generated as a 16 bit TIFF.  Both the sRGB and P3 versions contain the same RGB data – the only difference is the ICC profile embedded in the TIFF file.  I then imported into Affinity where I combined the sRGB and P3 versions as layers.  The Affinity working color space is ProPhoto (which encompasses both sRGB and P3).  I then exported the combined images to the png files below using the Display P3 color space, with the embedded ICC profile.  I checked the results with the Mac “Digital Color Meter,” which read out the RGB values as you mouse over the screen.  The P3 values were pure primaries, while the sRGB values did deviate from pure primary RGB, but only a very small amount.

    One thing about this comparison is that both sRGB and Display P3 have the same white point and TRC (tone reproduction curve).  Display-P3 is a variant of P3 created by Apple that has the original P3 primary colors with D65 white pt, and the sRGB TRC.  (The original P3 white point is a bit greener than D65.)  If the two color spaces had different white points, then I think we would see the color shift.  D65 is the most common white point for display purposes (not for print).  (ProPhoto has a D50 white point, so it must be color managed for display.)  It appears that Apple created Display-P3 specifically so that it could be rendered as sRGB with little difference in appearance.

    Why did they bother going to P3 displays?  P3 has a nearly monochromatic red, which must be more difficult for manufacturing.  If we can’t see the difference – why bother?

    Then there is always the possibility that I screwed up the comparison.

    JSS

    Attachments:
    John Sadowsky
    John Sadowsky
    Participant
    Posts: 99
    Re: Export for Web: sRGB or P3?
    Reply #4 on: February 6, 2020 at 10:42 am

    Well, I did screw up the comparison.  Somehow, when I stacked the two gradients in Affinity it converted the colors … probably user error.  There is a difference, but Mike is still mostly right.  🙂

    This site won’t let me upload TIFF files – so I converted them directly to PNGs with Display P3 profiles attached below.  This time the sRGB colors were correctly transformed into P3 coordinates correctly.

    On Mac, I open them in Preview (the Mac viewer) simultaneously and switch between the P3 and sRGB images.  If you have a P3 monitor, you can see a difference.  I only did red and green as blue is the same for both color spaces.    For red, the mac Digital Color Meter shows (r,g,b) = (255,0,0) for P3 and = (230,50,35) for sRGB in P3 coordinates, for both the original TIFF and the PNG.  For green, it shows (r,g,b) = (0,255,0) for P3 and  = (116,250,75) for sRGB in P3 coordinates for green.

    I’m holding to what I said about white points.  A shift in white point would be noticeable, but these two spaces have the same white point (for Display P3).

    JSS

    Attachments:
    Wayne Fox
    Wayne Fox
    Participant
    Posts: 11
    Re: Export for Web: sRGB or P3?
    Reply #5 on: March 4, 2020 at 2:17 pm

    Since introduced by Apple in 2015, most new computers and mobile devices have a wide P3 color gamut. Shouldn’t we create JPEGs for the web using P3 now? I used P3 JPEGs for my web page, and the images look great on my P3 Apple devices!

    Interesting thoughts.  However, my sRGB jpegs also look great on my iPhone and iPad.  I think we’re in still in the world of the lowest common denominator, and that remains sRGB … which is what most using a computer display are seeing.  At some point I do believe P3 will become prevalent in all devices, and fortunately sRGB images will still look great. But I think I’ll stick with sRGB now.

    Andrew Rodney
    Andrew Rodney
    Participant
    Posts: 56
    Re: Export for Web: sRGB or P3?
    Reply #6 on: April 23, 2020 at 12:52 pm

    IF your viewers are using a color managed browser, you can post ANY RGB color space (embedded profile or EXIF describing that) and the browser, like Photoshop and the slew of other color managed applications will preview it ‘correctly‘. But people are viewing this outside of color management, then DCI-P3 will look butt ugly on an sRGB gamut display. Because of a lack of color management.

    The opposite would be true viewing sRGB on a wider gamut (DCI-P3) display without color management. Now sRGB will appear very ugly.

    Don’t view images without color management! Good luck with the masses of people without color managed browsers. So the general ‘rule‘ is to post in sRGB because on sRGB gamut displays, without color management, the images should look “OK“. But the web doesn’t know if an image is in sRGB or any other color space. The browser may or may not. If it knows the scale of the RGB values, if it uses color management and the display profile, the image will be color managed. If not, the RGB numbers are sent directly to the display and all gets are off.

    All outlined here:

     

    sRGB urban legend & myths Part 2

    In this 17 minute video, I’ll discuss some more sRGB misinformation and cover:

    When to use sRGB and what to expect on the web and mobile devices

    How sRGB doesn’t insure a visual match without color management, how to check 

    The downsides of an all sRGB workflow 

    sRGB’s color gamut vs. “professional” output devices

    The future of sRGB and wide gamut display technology 

    Photo print labs that demand sRGB for output

    High resolution: http://digitaldog.net/files/sRGBMythsPart2.mp4

    Low resolution on YouTube: https://www.youtube.com/watch?v=WyvVUL1gWVs

     

    Author: “Color Management for Photographers”

    John Sadowsky
    John Sadowsky
    Participant
    Posts: 99
    Re: Export for Web: sRGB or P3?
    Reply #7 on: April 23, 2020 at 1:18 pm

    But people are viewing this outside of color management, then DCI-P3 will look butt ugly on an sRGB gamut display. Because of a lack of color management.

    I’m not so sure about that.  Display-P3 has the same D65 white-point as sRGB.  Yes, an image in Display-P3 viewed without CM (as if it were sRGB) that will desaturate the reds and greens (blue is the same as sRGB), but the whites will be correct so there won’t be an apparent color cast.  I think that was Apple’s intent when they defined Display-P3 (as opposed to DCI-P3).

    What devices/apps/browsers don’t have CM anymore?  My internet searching on “browsers with/without CM” yield articles at least 5 years old, or simply not dated.  (All internet articles should be dated!  It should be the LAW!)  Firefox was apparently the first to employ CM, and before 2015 most browsers did not have CM.  It was a big problem then, but what’s the situation today?  P3 monitors are pretty ubiquitous today.  You’d think most browsers are up to speed by now.  I do some iOS programming, and I can tell you all the iOS framework libraries have CM (as you’d expect since Apple was an early adopter of P3).  One would assume the same for Android apps.  Even if displayed on older devices with sRGB displays, the software & OS updates should have everything up to speed with CM.

    JSS

    Mike Nelson Pedde
    Mike Nelson Pedde
    Participant
    Posts: 456
    Re: Export for Web: sRGB or P3?
    Reply #8 on: April 24, 2020 at 5:17 pm

    What devices/apps/browsers don’t have CM anymore?

    Just had to reset/rebuild my computer. Windows 10, Firefox 75.0 – color management is not enabled by default.

    Mike.

    _____
    Mike Nelson Pedde
    Victoria, BC
    https://www.wolfnowl.com/

    John Sadowsky
    John Sadowsky
    Participant
    Posts: 99
    Re: Export for Web: sRGB or P3?
    Reply #9 on: April 24, 2020 at 5:49 pm

    Mike – I found that surprising.  I did some quick research.  I assume you are using setting under about:config.

    gfx.color_management.enablev4 is false by default.  That only enables ICC version 4 profiles.  I check profiles I extracted from TIFFs created by C1, and they were v4.  JPEG is a tougher egg to crack, but I assume C1 is creating v4 JPEGs as well.  I find that odd.  All my images on my web page, my Facebook page, and (at least recent) images uploaded to PhotoPxl are Display-P3.  They look fine.  Moreover, changing the enablev4 to true didn’t change the appearance in Firefox.

    gfx.color_management.mode is the other setting that may be relevant.  Mode = 1 “enables CM for all rendered graphics”, whereas, “the default value of 2 enables CM only for tagged images …”  I set the mode = 1.

    Here is my source:  https://cameratico.com/guides/firefox-color-management/

    JSS

    Mike Nelson Pedde
    Mike Nelson Pedde
    Participant
    Posts: 456
    Re: Export for Web: sRGB or P3?
    Reply #10 on: April 25, 2020 at 6:04 pm

    That’s what I’ve done as well. It’s just that you have to do it manually (which of course suggests that you know to do it, otherwise it doesn’t matter… ?)

    _____
    Mike Nelson Pedde
    Victoria, BC
    https://www.wolfnowl.com/

    John Sadowsky
    John Sadowsky
    Participant
    Posts: 99
    Re: Export for Web: sRGB or P3?
    Reply #11 on: April 25, 2020 at 10:54 pm

    Mike – I can’t say for sure, but I don’t think this is a browser issue.  I could be wrong, but I do have some experience with iOS/Mac programming

    I think color management (CM) is an operating system (OS) issue, not a browser issue.  It may have been a browser issue years ago, but not as of 2020 when P3 displays are ubiquitous.  Any app (including web browsers) hands an image to the OS, or an OS supported “framework”,  for rendering on a particular piece of display real estate.  So, the OS does the CM, not the app.  Apps don’t do pixel stuffing – that’s done by the OS frameworks.  If that’s true, then the Firefox settings are mute, which, by the way, is not unusual.   All browsers, or apps in general, just hand the JPEG file to the OS, and the OS renders it on the display.  So CM is an OS issue – not a browser issue.

    Anyway, that would explain why my Display-P3 images didn’t change when I changed the Firefox settings.  My guess is that, for current versions, those settings don’t do anything.

    JSS

    John Sadowsky
    John Sadowsky
    Participant
    Posts: 99
    Re: Export for Web: sRGB or P3?
    Reply #12 on: April 25, 2020 at 11:02 pm

    This was an oops – webmaster, please delete this post.

    JSS

    Andrew Rodney
    Andrew Rodney
    Participant
    Posts: 56
    Re: Export for Web: sRGB or P3?
    Reply #13 on: April 26, 2020 at 2:26 pm

    But people are viewing this outside of color management, then DCI-P3 will look butt ugly on an sRGB gamut display. Because of a lack of color management.

    I’m not so sure about that. Display-P3 has the same D65 white-point as sRGB. Yes, an image in Display-P3 viewed without CM (as if it were sRGB) that will desaturate the reds and greens (blue is the same as sRGB), but the whites will be correct so there won’t be an apparent color cast. I think that was Apple’s intent when they defined Display-P3 (as opposed to DCI-P3).

    When you actually test this, you’ll be more sure ?. The facts are simple: with color management, ALL the attributes of the Working Space and display profile are used to produce a preview. Without color management the RGB values are sent directly to the display.

    The video referenced DOES show the effect of viewing sRGB without color management on a wide gamut display. IT IS UGLY and previews incorrectly. Just like Adobe RGB (1998) or DCI-P3 previews ugly without color management on an sRGB gamut display without color management.

    And if you own Photoshop, it’s easy to use its View>Proof Setup> Legacy Macintosh, or Internet Standard to soft proof how images appear without color management to again see how ugly this is and to insure you understanding what I wrote.

    Bottom line: With color management, ANY and all tagged RGB color spaces will preview the same on your system and ‘correctly‘ (the qualities of the display calibration and it’s profile of course play a role). In Photoshop and a web browser that is color managed, and all other properly color managed applications, they match.

    Without color management, none of the above is guaranteed nor should be expected. It doesn’t matter if your display has a DCI-P3 color gamut, an sRGB color gamut, an Adobe RGB (1998) color gamut nor what the white point is. With color management = correct preview. Without color management, incorrect color preview. 

    The display profile, it’s color space (gamut, white point etc) is utterly divorced from the profile of the Working Space by design. Display Using Monitor Compensation is used to produce this color managed preview. No matter the color gamut of the display.

     What devices/apps/browsers don’t have CM anymore? 

    Well Edge Chromium color management is broken depending on the type of display profile used, some versions of FireFox have no color management on by default, and there are other browsers that have NO color management whatsoever. There is also the issue of what a browser does (assumes) if it tries to preview an image that has NO embedded profile or EXIF data defining the scale of the RGB values.

    https://graphicartsmag.com/articles/2019/11/stabilizing-colour-management-with-varying-web-browsers/

    Don’t ASSUME all viewers on the web have color managed browsers.

    Don’t ASSUME all viewers on the web have calibrated and profiled their displays.

    Don’t ASSUME all images have embedded profiles or are in sRGB.

    The issue is whether or not the viewing browser is color-managed

    No, that IS the issue, always.

    Author: “Color Management for Photographers”

    • This reply was modified 4 months, 4 weeks ago by Andrew Rodney.
    Andrew Rodney
    Andrew Rodney
    Participant
    Posts: 56
    Re: Export for Web: sRGB or P3?
    Reply #14 on: April 26, 2020 at 2:31 pm

    Firefox was apparently the first to employ CM, and before 2015 most browsers did not have

    No. Safari on Mac has been color managed from day one. And that day was January 7, 2003!

    Worse, FireFox when it finally did get color management had that OFF by default and turning color management on was about as non intuitive as anyone could possibly design in a product.

    https://cameratico.com/guides/firefox-color-management/

    • Enable it on the Firefox advanced configuration
    • Type in about:config on your Firefox address bar.
    • Use the filter field to search for color_management.
    • Update the following fields:
    • gfx.color_management.mode
    • Set to 1 to enable color management for all rendered graphics.
    • The default value of 2 enables color management only for tagged images, so all page elements and untagged images are rendered in the monitor full color gamut, leading to oversaturated colors.
    • gfx.color_management.enablev4
    • Set to true to enable ICC v4 profile support.
    • There’s no need to specify the monitor ICC profile manually as it’s read automatically from the operating system.
    • Restart Firefox.

    Pathetic but that’s the way to do it.

    Author: “Color Management for Photographers”

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.