Experiencing dull colors with some images?

[dylanhand]

Hi again @rbuchberger!

The color of some of my images are becoming dull when using JPT. Before I make an issue I want to see if it's something I'm doing wrong.

I've tried setting the quality to 100 but colors are still dull.

Here's the image generated by JPT (unfortunately github doesn't support uploading a .webp directly):
https://jekyll-picture-tag--dylanhand.netlify.app/generated/profile-pic-320-dae567db1.webp

And here's an image I used a script to generate. My script uses ImageMagick, but I also tested with vips, which I believe is used by JPT under the hood, and got the same result -- no dulling of colors.
https://dylanhand.com/assets/img/optimized/profile-pic.webp

If you open each in a browser tab and swap between them, it's easy to see the difference in color quality.

Here's the picture.yml config used to generate the JPT version of the image:

  profile:
    formats: [webp, original]
    base_width: 160 # How wide the 1x image should be.
    fallback_width: 160
    size: 160px
    pixel_ratios: [1, 1.5, 2]
    quality: 100
    format_quality:
      webp: 100
      avif: 100
      jp2: 100

Any ideas what's going on here?

[stuntbox]

This is only a vague idea, but this seems like it’s an issue with color profiles. I don’t have anything specific to note here, but perhaps that might help steer you in the right direction?

[dylanhand]

Hi @stuntbox and thanks for the idea (also, cool website!). That thought crossed my mind as well. It only appears to happen on a couple of photos from a photographer, so it seems likely that something is different about them.

When I run magick identify -verbose on the offending image and on another working image, the differences I see are:

1. the offending image has Profile-icc: 548 bytes
2. the working image has Profile-xmp: 49637 bytes.

Could that be it? The rest seems similar.

profile-pic.jpg (image that gets dull from JPT):

$ magick identify -verbose profile-pic.jpg
...
  Profiles:
    Profile-8bim: 80 bytes
    Profile-exif: 296 bytes
    Profile-icc: 548 bytes
    Profile-iptc: 39 bytes
      City[1,90]: 0x00000000: 254700                                        -%G
      unknown[2,0]:
      unknown[2,62]: 20210426
      unknown[2,63]: 173714
...

champagne-cover.jpg (no dulling in JPT):

$ magick identify -verbose champagne-cover.jpg
...
  Profiles:
    Profile-8bim: 104 bytes
    Profile-exif: 834 bytes
    Profile-iptc: 63 bytes
      City[1,90]: 0x00000000: 254700                                        -%G
      unknown[2,0]:
      unknown[2,63]: 183801
      unknown[2,62]: 20230701
      Created Date[2,55]: 20230701
      Created Time[2,60]: 183801
    Profile-xmp: 49637 bytes
...

Even so, the question remains that if both ImageMagick and and vips can handle these images without colors getting dull, does that mean it's an issue within JPT?

[rbuchberger]

So I'll say I have no idea what's causing this, but if you dig around in the vips documentation for a fix, you can pass those settings to vips using the image_options key in a preset:
https://rbuchberger.github.io/jekyll_picture_tag/users/presets/image_quality.html#image-format-options

I added it because for avif to work within browsers, we need to specify a compression algorithm:

  image_options:
    avif: 
      compression: av1
      speed: 8

I'd love to hear what the solution is; possibly we need to make a change to the default settings.

[dylanhand]

Changing image_options didn't help in my case, but I managed to find that the strip_metadata setting was the culprit. Posting the solution now.

[dylanhand]

The solution was to turn off strip_metadata in my preset.

Evidently that was stripping color profile metadata that told the browser how to render the image properly.

_data/picture.yml:

...
presets:
  profile:
    ...
    strip_metadata: false
    ...
...

Note: turning this setting on/off will not cause JPT to regenerate images; _site/generated must be deleted manually to see the result of changing this setting.

[rbuchberger]

Now that's very interesting. Might be worth noting in the docs, thanks for troubleshooting!

[dylanhand]

Sure thing, hope it helps someone else :)