Responsive breakpoints feature creates brighter images

Alexis Remartini

December 21, 2020 20:49 Edited

I tried using the responsive breakpoints feature, both on 'responsivebreakpoints.com' and with the Java SDK and the created pictures are way brighter than the original image. Is there a way to turn off transformations other than scaling?

Original image:

One of the generated images:

Request with the Java SDK:

cloudinary.uploader().upload(file,
                ObjectUtils.asMap(
                        "responsive_breakpoints",
                        new ResponsiveBreakpoint()
                                .createDerived(true)
                                .bytesStep(20000)
                                .minWidth(320)
                                .maxWidth(1280)));

Bonus question:

Can I control the algorithm used for scaling? Example: Cubic interpolation, maximum png compression

Comments

14 comments

Michal Kuperman

December 13, 2020 14:29
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
Alexis Remartini

December 17, 2020 11:36
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
Erwin Lukas

December 17, 2020 20:18
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
Alexis Remartini

December 20, 2020 06:13 Edited
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

Alexis Remartini

December 21, 2020 21:12

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.

Alexis Remartini

December 21, 2020 21:17
When I add a color profile (sRGB) to my image, I don't get the same bug!
0
Erwin Lukas

December 21, 2020 22:22
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
Erwin Lukas

December 22, 2020 01:03 Edited
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
Alexis Remartini

December 22, 2020 04:12
Hi Erwin,

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

December 22, 2020 20:14
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
Alexis Remartini

December 23, 2020 05:22
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
Erwin Lukas

December 23, 2020 21:05 Edited
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
Alexis Remartini

December 25, 2020 20:45
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
Erwin Lukas

December 30, 2020 22:03
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

Post is closed for comments.

Responsive breakpoints feature creates brighter images

Comments

Didn't find what you were looking for?