Responsive breakpoints feature creates brighter images

Comments

14 comments

  • Avatar
    Michal Kuperman

    Hi Alexis,

    When resizing an image to smaller dimensions, there are actually fewer pixels available to store the same amount of data, therefore the cropped image might look blurry. Some images might look a bit better than others, but that depends on the image (its colors, lining, models, etc).

    In such cases, you can use the sharpen effect (`e_sharpen` in URLs) or/and the improve effect (`e_improve`in URLs) to automatically adjust the colors.

    You can refer here for more information:

    https://cloudinary.com/documentation/transformation_reference#e_sharpen

    https://cloudinary.com/documentation/transformation_reference#e_improve

    In addition, you can control the scaling by using other features, for example, adjusting the quality .

    You can read more about this here: https://cloudinary.com/documentation/responsive_images#combining_responsive_automation_with_other_cloudinary_features

    Please let us know if you have any further questions.

    Best,

    Michal

     

    1
    Comment actions Permalink
  • Avatar
    Alexis Remartini

    Thank you Michal for you answer.

    I should have mentionned that this image was png.
    I have observed the same "getting brighter' phenomenon with other png images, mostly ones that are somewhat dark to begin with. Maybe bright images get darker?
    I determined that it does not happen with the same image in 'jpg'.
    Any reason for this diffrence? I don't see anything in the documentation about different formats being handled differently.

    I have not played with the settings you recommended.
    I think "quality" for a png image should be irrelevant. Maybe "chroma subsampling" plays a role.

    0
    Comment actions Permalink
  • Avatar
    Erwin Lukas

    Hi Alexis,

    This is definitely interesting. And as far as I am aware, we do not apply other transformation (such as brighten a dark image) unless it's explicitly specified in the transformation. I did test this on my account and apply a simple transformation:

    https://res.cloudinary.com/elukas/image/upload/w_320,h_120/v1608235667/LZf6ltK4doR1u5XR9gMYyA.png

    If you check the above image, the derived indeed did not get brighten (original is png and derived is also png)

    There are some other things that might be affecting this, such as chroma subsampling as you mentioned, as well as color profile.

    Is it possible to share your cloud name as well as the public id of this image so we can deep dive into this asset?

    Regards,
    Erwin Lukas

    1
    Comment actions Permalink
  • Avatar
    Alexis Remartini

    Hi Erwin,

    Cloud name: ddpee0hcc
    Image's name: cloudinary_support
    URL: https://res.cloudinary.com/ddpee0hcc/image/upload/v1607680361/cloudinary_support.png

    I see that your derived image is not brighter indeed. Were you able to reproduce my case (getting brighter)? What is the simple transformation you applied?

    Thank you for caring,
    Alexis

    0
    Comment actions Permalink
  • Avatar
    Alexis Remartini

    Little follow-up

    I tried turning off chroma subsampling and it didn't solve it. That's how I did it (not 100% sure it's the right way):

            cloudinary.uploader().upload(file,
    ObjectUtils.asMap(
    "responsive_breakpoints",
    new ResponsiveBreakpoint()
    .createDerived(true)
    .transformation(new Transformation().quality("100:444"))
    .bytesStep(20000)
    .minWidth(320)
    .maxWidth(1280)));

    I checked and there is no embedded color profile with my original image.

    0
    Comment actions Permalink
  • Avatar
    Alexis Remartini

    When I add a color profile (sRGB) to my image, I don't get the same bug!

    0
    Comment actions Permalink
  • Avatar
    Erwin Lukas

    Hi Alexis,

    Thanks for the additional details on this. I'm able to reproduce this by using the same responsive breakpoint on my account. Let me check internally on this and will get back to you once I have an additional information.

    Regards,
    Erwin Lukas

    1
    Comment actions Permalink
  • Avatar
    Erwin Lukas

    Hi Alexis,

    One more thing, do you experience this with other images as well or just this one particular image? If there are more, can you share a few more example?
    I'm just trying to understand the scope of this behavior.

    Thanks,
    Erwin Lukas

    0
    Comment actions Permalink
  • Avatar
    Alexis Remartini

    Hi Erwin,

    Yes, I have seen that with more images. Here are some of them:

     

    0
    Comment actions Permalink
  • Avatar
    Erwin Lukas

    Hi Alexis,

    Thanks for sharing more samples.
    Inspecting on all of these images, all of these PNGs don't have ICC profile but with a gamma header chunk, which on responsive breakpoints generation does not consider that. On the generation, it's treating the image like it has sRGB where the exponent is 1.8182 instead of ~2.2 for sRGB:

    exiftool -Gamma cloudinary_support.png
    Gamma : 1.8182

    Because of the above, the derived looks brighter than it should. I've confirmed all the mentioned images in this thread have the same properties.
    I've reported this internally to consider gamma for responsive breakpoints generation. In the mean time, I believe embedding the right icc profile should helps in this scenario.

    Hope this makes sense. Let me know if you have any question.

    Regards,
    Erwin Lukas

    1
    Comment actions Permalink
  • Avatar
    Alexis Remartini

    Hi Erwin,

    I'm still curious about my "bonus question": Is there a way to control the type of interpolation when resizing? For exmample, with GIMP I can select No interpolation, Linear or Bicubic. If it can't be parametrized, do you know what your algorithm does? I tried comparing png images i resized with GIMP and ones with cloudinary and I never got a perfect match. I understand it might be more complex than that, I am not that knowledgeable on the topic (just the minimum to make a website haha).

    Regardless of that question, I want to thank you for thanking the time to solve this issue. It really reflects well on you and your company. I wish I would have always responded right away, I'm sure you would have solved it even faster!

    Happy holidays,
    Alexis

    0
    Comment actions Permalink
  • Avatar
    Erwin Lukas

    Hi Alexis,

    I apologize I never followed up on you regarding resize algorithm. I did actually check internally on this but has a follow-up question for you.

    Which algorithm Cloudinary is using would be depending on the type of image and operation it tries to do (example: upscaling vs downscaling) and will pick the optimum algorithm for the task.

    • Is there a particular reason why you would like to have control over the which algorithm?
    • Are you interested more in upscaling or downscaling?
    • Is there a reason why you would like to have a perfect match with GIMP result?
    • If you can share your use-case as detail as possible, I'll be happy to bring this internally.

    And thank you for your kind words and happy to hear it :) 

    Hope you have a happy holidays,
    Erwin Lukas

    1
    Comment actions Permalink
  • Avatar
    Alexis Remartini

    Hi Erwin,

    • Simply for the sake of having more control, which leads to trusting the end result. You say Cloudinary will pick the optimum algorithm, but I think the optimum changes based on the situation (a simple example being the classic quality vs performance trade-off). I'm not sure how chooses a particular interpolation algorithm, but I'm sure there are reasons.
    • I'm interested more in downscaling.
    • No particular reason, I was just using GIMP for my downscaling before and I trusted the results. To be fair, I compared other methods with GIMP and also didn't get a perfect match. I'm not knowledgeable enough to explain the small differences (but I'd sure like to know).
    • I think my use-case is pretty precisely what is supposed to be covered with the responsivebreakpoints feature. I just had this bug because of the lack of color profile + I like control and guaranties (thus my bonus question).
    0
    Comment actions Permalink
  • Avatar
    Erwin Lukas

    Hi Alexis,

    I apologize for the delay in answer. Hopefully you had a Merry Christmas.
    Thanks for providing the details of your use case. As of right now there is no granular control which algorithm is used when scaling an image. However I've shared this internally for consideration.

    In regard with image gets brighter with responsive breakpoints, I've also opened an internal ticket for a code change. But in the mean time, please try to embed the ICC profile. 

    Let me know how that one goes.

    Regards,
    Erwin Lukas

    0
    Comment actions Permalink

Please sign in to leave a comment.