{"id":21528,"date":"2017-05-22T14:38:51","date_gmt":"2017-05-22T14:38:51","guid":{"rendered":"http:\/\/how_to_pad_images_with_automatic_color_selection"},"modified":"2025-03-02T09:36:34","modified_gmt":"2025-03-02T17:36:34","slug":"how_to_pad_images_with_automatic_color_selection","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/how_to_pad_images_with_automatic_color_selection","title":{"rendered":"How to pad images with automatic color selection"},"content":{"rendered":"

How you present the content of your website can be just as important as the content itself. The images you display need to conform to the graphic design of your site, and every image needs to fit within a predefined size. Although that may be simple enough to achieve when you are dealing with your own images, the task can be more challenging when displaying images uploaded by your users.<\/p>\n

Your users could potentially upload their images in a variety of resolutions and sizes. This means you need to adjust the images on-the-fly to fit within the available space defined by your graphic design. However, for images that are uploaded with a different aspect ratio than the area reserved to display it, a simple scaled resize<\/a> will result in extra space either above and below the image or on the left and right. It also could affect the spacing of other elements on your page. To make sure you end up with an image that is the right size to fill all of the available space, you will generally need to add padding to the image as well, either using PHP, Python, JS, CSS or by transforming the original image.<\/p>\n

To tackle this challenge effectively, understanding the concept of padding and its application is key.<\/p>\n

What is Padding?<\/h2>\n

Padding in the context of images refers to the addition of extra space around the image. This space doesn\u2019t contain any part of the original image but is instead filled with a solid color or a pattern. The purpose of padding is to adjust the overall dimensions of the image to fit into a specific area without altering the original aspect ratio of the image itself. By adding padding, you can ensure that the image fills the designated space completely, maintaining the aesthetic harmony of your website\u2019s design while avoiding unwanted stretching or squashing of the image.<\/p>\n

Simple image padding<\/h2>\n

Now the question becomes, how do you add padding to the image so that the end result fits properly and looks professional? We could simply decide that the extra padding added to all the images needs to conform to a specific color, for example: white. You could use CSS for this purpose, but Cloudinary makes this process much easier to accomplish. Cloudinary offers a comprehensive end-to-end solution for all elements of image and media management, enabling web and app developers to invest their full focus on the main purpose of their own site, or app. To add padding to image in a specific color with Cloudinary, you use one of the padding crop modes together with the background parameter set to the color you want. For example, padding the bottle image with white so that it fits within a height and width of 300 pixels, along with a black border:<\/p>\n

\n Loading code examples<\/span>\n <\/cld-code-widget>\"Image<\/a><\/p>\n

Automatic color padding<\/h2>\n

Setting a uniform color for all padding might be a good solution for some of your images, but what if you could automatically set the padding color based on the color of the border pixels in the image? Any padding added would then have the effect of extending the image canvas, and make it appear as if the padded region is actually part of the image itself. Guess what? Cloudinary makes this simple too. All you have to do is set the background parameter to auto (b_auto in URLs). For example, here\u2019s the same bottle image as above, but now with automatic color padding:<\/p>\n

\n Loading code examples<\/span>\n <\/cld-code-widget>\"Image<\/a><\/p>\n

Here\u2019s another example that highlights the difference between using a value of black<\/code> for padding in the left image and auto<\/code> color padding on the right:<\/p>\n

\"Photograph<\/a>\n\"Photograph<\/a>\n
\n\n Loading code examples<\/span>\n <\/cld-code-widget>\"Sample<\/a><\/p>\n

Automatically selecting the padding color is a great solution for images with a solid background color, but it also gives good results on images without a solid background color. For example, take a look at this dog<\/code> image with automatic color padding:<\/p>\n

\n Loading code examples<\/span>\n <\/cld-code-widget>\"Image<\/a><\/p>\n

Fade the image into the padding<\/h2>\n

We can see in the example above that the predominant color has been calculated to be a particular shade of green, resulting in a visually pleasing padded image. The jump between the image and the border may feel somewhat stark, but we can fade the picture into the padding by applying the gradient_fade<\/code> effect with a value of symmetric_pad<\/code> (e_gradient_fade:symmetric_pad<\/code> in URLs). For example, the same dog<\/code> image as above, but now with the image faded into the padding:<\/p>\n

\n Loading code examples<\/span>\n <\/cld-code-widget>\"Image<\/a><\/p>\n

You can also control how much of the image to include in the fading effect by adding the x<\/code> parameter with a value that indicates the width of the fading region in pixels. For example, the same dog<\/code> image as above, but now with only a 50 pixel wide gradient fade into the padding:<\/p>\n

\n Loading code examples<\/span>\n <\/cld-code-widget>\"Image<\/a><\/p>\n

More padding options<\/h2>\n

The examples in this article are some of the most frequent uses of padding options, but you can fine tune the way padding is added in a number of other ways. The following examples give a taste of what can be accomplished by tweaking the value of the b_auto<\/code> parameter:<\/p>\n