How are image sizes calculated in case of watermark?

Mayank Garg

June 01, 2021 05:07

Whenever I am adding watermark to an image, my image resolution gets changed

Non watermark URL (Resolution: 480x95): 

https://res.cloudinary.com/du8msdgbj/image/upload/a_ignore,w_480,h_480,c_fit,q_auto,f_auto/v1600081119/cropped/jq5jw36w1esxrn1vghmw.jpg

URL with watermark (Resolution: 480x281): 

https://res.cloudinary.com/du8msdgbj/image/upload/l_watermark_346,w_480,h_480/a_ignore,w_480,h_480,c_fit,q_auto,f_auto/v1600081119/cropped/jq5jw36w1esxrn1vghmw.jpg

Watermark image:

https://res.cloudinary.com/du8msdgbj/image/upload/v1530883619/watermark_346.png

 

I need to understand the logic behind the calculation of resolution post watermark, to incorporate changes in my website/app.

1

• 

  Eyal Katz Talmon

  June 03, 2021 13:02

  Hi Mayank,

  I can see that you have also opened a support ticket with us (#152312). Below is a step-by-step dive into how the generated image height got set to 281px.

  1. The original dimensions of the image are 820 x 163px - https://res.cloudinary.com/du8msdgbj/image/upload/cropped/jq5jw36w1esxrn1vghmw.jpg
  2. The first step you performed was l_watermark_346,w_480,h_480, which adds a layer to the image. Since the layer is larger in height than the base image (480px vs 163px), after this step, the dimensions of the image are 820 x 480px - https://res.cloudinary.com/du8msdgbj/image/upload/l_watermark_346,w_480,h_480/cropped/jq5jw36w1esxrn1vghmw.jpg
  3. Next, you've applied ...w_480,h_480,c_fit... (among other parameters that do not affect this calculation), which tries to shrink the image to fit within a bounding box of 480 x 480px, while keeping the aspect ratio (of 820/480 = ~1.708). Since the image width prior to this step was 820px, in this step it is shrunk to 480px (to fit within the box), meaning it gets divided by ~1.708, and because the aspect ratio is retained, the image height also gets divided by ~1.708 = 480/1.708 = ~281.

  Notice how transformation sections (encapsulated by / characters) are performed from left to right, while each step is performed upon the result of the last step that was performed.

  Hope this helps, please let me know if you have any further questions.

  Regards,
  Eyal

  0

Post is closed for comments.