Hi, this isn;t a Blocs specific issue but it is something I would like to understand and fix if possible.
The issue is a hero background image with zoom effect (CSS for that taken from BlocBuilder https://youtu.be/1NpeO-TPAy4?si=x3w9mD1ql29SfDSm) displays as very flat/low contrast in the Chrome browser, but loads as expected in Firefox and Safari.
Any suggestions please? I’ve tried disabling hardware acceleration in Chrome preferences but the image is still looking grey.
See screenshot for comparison with Chrome on left and Firefox on right.
Interesting, thanks. I hadn’t even heard of P3 till now. I re-exported the jpeg with both sRGB and P3 profiles. The sRGB version was still low contrast but the P3 is clear and matches the jpg on local desktop.
Is P3 the profile I should use for web images form now on?
First of all you should determine what sort of display you have. For example iPhones and iMacs are all P3, which falls between sRGB and Adobe RGB.
Adobe RGB tends to be found in high end displays used by photographers or printers working in print areas like magazines or brochures etc. They can still view images correctly in narrower colour spaces, but only if they are correctly tagged, otherwise they can appear super saturated.
The safe standard colour space for web usage is sRGB and as long as you tag them correctly they should be viewed correctly on any display type. The result you have is a little counter intuitive, but I suspect it is related to being a background image, rather than a normal one. It also reflects differences in the ways that browsers manage colour, unless it is properly defined. What happens if you simply add that image to the page normally, rather than as a background image?
I actually had something similar a couple months back after buying a 4K P3 display and seeing that background colours in Safari looked just like they did Blocs, but inside Brave etc they were rather different and I think we need something in Blocs that sets the colour profile inside the CSS with a fallback position.
A couple links here:
You can actually enforce colour profiles inside Chrome for yourself by typing chrome://flags/ in the url bar then type color in the search bar. I suspect that would fix the problem for you personally, but not for others.
