Image color incorrect in resized image on my web site

(Some links, just to orient myself) Page link: https://massdesigngroup.org/work/national-memorial-peace-and-justice Original: https://massdesigngroup.org/sites/default/files/2018-08/Memory_11.jpg Resized: https://massdesigngroup.org/sites/default/files/styles/hero/public/2018-08/Memory_11.jpg

Resized image (rather than screenshot) attached; it exhibits the same ‘darkening’ problem as the screenshot.

Hi @bnueslein ! It looks like a tiny part of the darkening effect is due to just the compression. Because optimizing MASSDesignGroup.org for low bandwidth (access anywhere in the world) was a design priority, images are resized at 75% quality, which is a pretty significant reduction in quality, as you can see with the tree getting blotchier in these images. We could increase quality (and image download size) somewhat, or we could implement an attempt at bandwidth detection or guessing, and serve high-bandwidth visitors higher-quality versions of images.

BUT! That’s mostly not what’s going on with this image in particular. The image has a “ProPhoto RGB” colorspace which is covers theoretical colors that no device can display and in some cases the conversion to a more practical colorspace will actually give a truer color. That’s not the case with this image though. The GD image library that is resizing and optimizing the images on the site for us simply doesn’t know how to convert correctly from the ProPhoto RGB colorspace, and so gets it slightly wrong. Here, from the test site, is the same image converted to sRGP (by GIMP but Adobe Photoshop can do the same). Now, the resizing and optimization is not significantly changing the color:

Memory_11_sRGB_hero

So as for how to fix, two options:

  1. We could use a different and reportedly better graphics/image conversion library (ImageMagick) on the site. At the very least, it is reported as supporting the Adobe RGB colorspace. But it seems supporting the ProPhoto RGB color space / color scheme in question here is not that widespread (indeed my local image display program, while apparently getting the color right, reports for ColorSpace “Internal error (unknown value 65535)”), so…
  2. It is reasonable to request that graphics for the web site be converted to the Internet-standard sRGB colorspace before uploading. In fact, unless you use .jpg files for printing, MASS should request that all supplied .jpg files be sRGB.

2 will certainly give you a quick fix now, as demonstrated on the test site. 1 could well make it so this issue never comes up again; that you just never have to think about it.

In any case, welcome to the exciting world of embedded colorspaces!

https://gitlab.com/agaric/sites/mass-design/mass/issues/55

See also: