Making background level on images posted to web match background level in PI

[astrovienna]

Hi Juan,

I need to take you up on your offer for more guidance!  I'm still not having any luck getting images viewed on a browser to look anything like the image as I see it in PI.  Here's a good example:

https://www.dropbox.com/s/tc7y89cjgvynct6/LRGB%20Final.tif?dl=0

That's a TIFF.  Can anyone make a JPG on a web browser look the same as the TIFF?  I can't.  All my attempts show nasty posterization artifacts in the background.  The TIFF surely isn't perfect, but it's nowhere near as bad as what I see on a web browser.  Before creating the JPG I applied the ICC Profile Transformation for sRGB IEC61966-2.1 but that made no difference. 

Thanks for any guidance on this.

Kevin


 

Hi Kevin,

You are using your monitor profile (VA 2431 Series) as the default profile in PixInsight. This is usually a very bad idea because a monitor profile describes a device-specific color space, while you, unless there is a strong, sound and well-founded reason to proceed otherwise, want to work in a device-independent color space. Selecting your monitor profile as the default one is equivalent to saying "Hey, isn't it great, every image in the universe has pixel values representative of the way my monitor works". Unfortunately, this is not true

Your monitor profile should only be selected for the only purpose it has: as your monitor profile. Normally you should select the sRGB IEC61966-2.1 profile for both RGB and grayscale images. If you do this, then your final processed images will be WWW-compatible, that is, the default sRGB profile will describe them and they will work perfectly on any color managed web browser, even if you don't embed an ICC profile when you save your JPEG or PNG files.

You may prefer to work in a larger color space than sRGB, such as Adobe RGB for example, especially if you want to torture your images in terms of color saturation. In such case you can select the desired ICC profile as your default RGB profile. However, if you do this you'll have to use the ICCProfileTransformation tool to convert your images to the sRGB space before saving them as files to be deployed on the WWW, or on any device compatible with web color standards. Then you can also select the sRGB profile as your proofing profile. This will allow you to use the color proofing mode (Image > Color Management > Enable Color Proofing) to know how your image will look like when rendered on a web browser—if you see gamut warnings (flat gray areas) in proofing mode, then you know you've gone way too far with color saturation.

I hope this helps, let me know if you need more guidance. Color management can be tricky, but it isn't as complicated as people usually describes it. The key is simple: do not tell lies to the CM system. It always wins

[Juan Conejero]

Hi Kevin,

Just write the JPEG file with the ICC Profile option enabled. With Firefox:

https://pixinsight.com/forum-images/20190811/sRGB-firefox.jpg

With PixInsight's integrated web browser (Chromium):

https://pixinsight.com/forum-images/20190811/sRGB-pixinsight.jpg

As you see, there are no differences between the images represented in PixInsight and both browsers. Any browser with reasonable color management capabilities should provide the same results on any platform.

Actually, since the image is represented in the sRGB color space (the WWW default), you don't need to embed an ICC profile to get consistent results on browsers. However, embedding the profile is the safest option.

[astrovienna]

Juan, I think my Color Management settings must be wrong.  In the images you showed, the background is much darker than what I'm seeing in PI or Firefox.  If I turn off Color Management for the image in PI, it looks the same as what you're showing.  Also, if I view my JPG in Edge or Internet Explorer, it looks like your image.  A screenshot of my CM settings is attached.

[Juan Conejero]

Kevin,

You CM settings are perfectly fine. With high probability, I think the problem is being caused by your monitor profile. Two facts point to this direction:

If I turn off Color Management for the image in PI, it looks the same as what you're showing.

Then the only difference is the monitor profile you have selected in CM Preferences (VA2431...). Other than that your settings and mine are identical.

If I view my JPG in Edge or Internet Explorer, it looks like your image.

The Edge browser has good color management support. Also IE since version 11. This clearly shows that both browsers are ignoring the 'VA2431...' profile. Where does this monitor profile came from? Do you have a color calibration system?

Please visit this page:

https://chromachecker.com/info/en/page/webbrowser

then scroll down to the section entitled 'Compare your monitor gamut to sRGB'. Let me know what you find.

[astrovienna]

In the monitor gamut test, I can see slight differences between sRGB and all three of the others - Adobe RGB, ColorMatch RGB, and ProPhoto RGB.  The view is identical whether I use Edge or Firefox.  However, Firefox fails the LUT profile test above that:  the water is green in Firefox, but looks fine in Edge.

Looking closely at the JPG in Edge, both loaded from PC and viewing the posted image, I'm not seeing the posterization that I see in Firefox.  However, the background of the Edge image is  somewhat darker than when I view it in PI.  I'm seeing the same result with images posted by other people - when I download their images and view them in PI, the background is brighter than when viewed on the web.  The PI view matches the Edge view when I disable Color Management in PI.

Kevin

[astrovienna]

Let me try this again, more carefully stating the problem and what I've done to try to solve it.

The problem:  images in web browsers don't look the same as images in PI.  I'm seeing this issue on both my processing PC and my backup PC.
1.  Edge/IE:  The background of the image is quite a bit darker than PI.
2.  Firefox:  The average background matches PI, but the background also has what look like posterization artifacts.  I suspect Edge/IE also has these artifacts, but because the background is so dark it's hard to see them.

What I've tried:
1.  Calibrated my monitor with a ColorMunki Display calibration tool.  The monitor is a ViewSonic VA2431wm.
2.  Used ICC Profile to convert the TIFF image to sRGB IEC61966-2.1 before saving it with the ICC profile and uploading it.
3.  Disabled Color Management (Image>Color Management).  This makes the background as viewed in PI appear as dark as in the Edge/IE browsers, but that isn't what I want.  And it seems to make no difference to Firefox.  When I upload the image to Firefox, the background is as bright as with Color Management turned on, and the posterization artifacts are still there.
4.  Uploaded a PNG instead of a JPG.   Posterization artifacts are less noticeable in the PNG, but are still there, and are definitely more obvious than in the PI view.
5.  Adjusted color management in Firefox following this page:  https://cameratico.com/guides/firefox-color-management/  Posterization is still there.

Is there anything else I can try? Thanks for any ideas.

Kevin

Edit:  if you want to get a general sense of what I'm seeing, here's a screenshot of PI, Firefox and IE side-by-side.  Of course this isn't perfect, since it's now a JPG of a screenshot, but it gives the general idea.

https://pbase.com/skybox/image/169632211

[pfile]

in step #2 are you talking about AssignICCProfile or ICCProfileTransformation?

rob

[astrovienna]

Hi Rob,

It's ICCProfileTransformation,

Kevin

[astrovienna]

After a lot of research and trial and error, I’ve finally gotten images to look identical in PI and Firefox.  Still no luck with Edge and IE. They both have darker backgrounds and brighter highlights, almost as if a very slight S curve had been applied.  Here’s what I did to get where I am now.  Note that I’m not saying this is right, it’s just what I did.  If anyone can point out any mistakes here, that would be very helpful.

1.  Windows Color Management:
     a.  Devices Tab:  Make sure “Use my settings for this device” is checked.  Set the profile created by the calibration tool as the default.
     b.  Advanced Tab:  Under Device Profile select sRGB IEC61966-2.1.  In Display Calibration, make sure Use Windows Display Calibration is checked.  If not, click Change System Defaults>Advanced and then check it.  I found that I needed to reboot the PC to get changes made here to take effect.

2.  Firefox Color Management.  Enter about:config as the URL, ignore the warning, then enter “gfx.color” and the color management entries will pop up.  Make sure Enable v4 is set to true (I suspect this changed nothing - as near as I can tell, ICC v4 images still don't display properly) and Mode is set to 1 (2 is the default).  Then restart Firefox.

3.  PI Color Management:
     a.  Edit>Color Management.  If the monitor profile created by the calibration tool is not shown, in System Settings>Monitor Profile select the profile from the dropdown list.  (I found that I had to restart PI to get changes made here  to take effect.  When I restarted PI, a popup would note that PI performed a "scheduled selection" of the profile).  Rendering Intent should be Perceptual/Photographic.  For Default Profiles and Color Proofing, make sure sRGB IEC61966-2.1 is shown.  Under Global Options, make sure Enable Color Management and Embed ICC Profiles are both checked.
     b.  Image>Color Management.  Make sure this shows Enable Color Management.

If anyone has any advice for getting IE and Edge to work, please let me know.

Kevin

[dave_galera]

But you don't have any control on how either firefox, IE or Edge browsers are set up on other peoples machines that are viewing a website, I assume this is the reason for producing the JPG in the first place....you only have control over the PI colour management so that is the only thing you can change in your tests.

[astrovienna]

True, but at least knowing how it looks on my browsers gives me some hope of knowing how it looks on yours.  Since it didn't look right on my browser, it seemed pretty much a sure thing that it wouldn't look right on anyone else's either.

Kevin