Articles in this section

See more

How to add padding to an image?

Avatar
Itay Taragano
  • Updated
Follow

Padding can be done pretty easily with Cloudinary. Padding can be applied on either the width, the height, or both.

The following examples are added with borders to better demonstrate the difference:

Here's the original image:

http://res.cloudinary.com/demo/image/upload/couple.jpg

You can use the pad crop mode when resizing-down your image while setting the required width and height. The aspect ratio of the image is kept, so if the width and height do not match the aspect ratio, the padding is added:

http://res.cloudinary.com/demo/image/upload/w_300,h_200,c_pad/couple.jpg

You can use the lpad (limited pad) crop mode which is the same as 'pad' mode but doesn't scale the image up if your requested dimensions are larger than the original image's:

http://res.cloudinary.com/demo/image/upload/w_500,h_350,c_lpad/couple.jpg

Note that when specifying either the height parameter or the width parameter (not both), Cloudinary calculates the padding by the image's original aspect ratio, which might cause padding for both width an height:

http://res.cloudinary.com/demo/image/upload/w_450,c_lpad/couple.jpg

In order to add padding to the width only, you can either manually specify the required height:

http://res.cloudinary.com/demo/image/upload/h_300,w_450,c_lpad/couple.jpg

Or set the required width only while adding the ignore_aspect_ratio flag (fl_ignore_aspect_ratio in URLs):

http://res.cloudinary.com/demo/image/upload/w_450,c_lpad,fl_ignore_aspect_ratio/couple.jpg

Note that when using padding (both pad and lpad) with dimensions lower than the original, the image will be scaled-down:

http://res.cloudinary.com/demo/image/upload/w_160,h_120,c_pad/couple.jpg

In order to avoid scaling down the image, you can use the mpad crop mode, which is the same as the pad mode but doesn't scale the original image:

http://res.cloudinary.com/demo/image/upload/w_160,h_120,c_mpad/couple.jpg

Related articles

Comments

4 comments

Sort by Date Votes
  • Avatar
    Seth Hamilton

    Focus and pad? I have a customer with 10's of thousands of pictures of shoes. All their newer stuff is nicely centered, but their older images are often pushed to the bottom. Could one use one of the fancy built in or add-on focusing tools to center on the shoe and pad it (all shoes are conveniently on white!) ?

     

    -1
    Comment actions Permalink
  • Avatar
    Itay Taragano

    Hi Seth.

    A possible solution is to first crop the image and then add the required padding. Cropping the image can be either done by using the trim parameter as explained here.

    Another option is to use our Imagga add-on to do the cropping and then add the required padding.

    If this doesn't work for you, can you please share an example image (pushed to the bottom) and the required result, so we'll be able to offer a solution?

    If privacy is an issue, you can always open a ticket and share your images there.

    0
    Comment actions Permalink
  • Avatar
    Seth Hamilton

    Hi Itay,

    Can you set the pad color? My application is email, the customer has lots of photos, I currently resize limit to make them the correct size, but padding definitely provides some layout advantages. The customer defines the layout of the email and sometimes the background color isn't white.

    0
    Comment actions Permalink
  • Avatar
    Itay Taragano

    Hi Seth,

    You can set the background parameter ( b in URLs), which works for both color names:

    http://res.cloudinary.com/demo/image/upload/w_300,h_200,c_pad,b_blue/couple.jpg

    or RGB code:

    http://res.cloudinary.com/demo/image/upload/w_300,h_200,c_pad,b_rgb:007886/couple.jpg



    Alternatively, you can have transparent padding simply by delivering the image as PNG:

    http://res.cloudinary.com/demo/image/upload/w_300,h_200,c_pad/couple.png

    0
    Comment actions Permalink

Please sign in to leave a comment.