Using content aware padding

There are many cases where you need to adjust the background of your images.

Cloudinary offers the option to set the background of your images in many different ways.

Its possible to use the pad cropping option, together with the background parameter (b_ in URLs) to have the image background be changed to a specific color.

For example, if we change the background to green the image would look like:

Ruby:
Copy to clipboard
cl_image_tag("waterfall.jpg", :width=>800, :height=>400, :background=>"green", :crop=>"pad")
PHP:
Copy to clipboard
cl_image_tag("waterfall.jpg", array("width"=>800, "height"=>400, "background"=>"green", "crop"=>"pad"))
Python:
Copy to clipboard
CloudinaryImage("waterfall.jpg").image(width=800, height=400, background="green", crop="pad")
Node.js:
Copy to clipboard
cloudinary.image("waterfall.jpg", {width: 800, height: 400, background: "green", crop: "pad"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(800).height(400).background("green").crop("pad")).imageTag("waterfall.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('waterfall.jpg', {width: 800, height: 400, background: "green", crop: "pad"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("waterfall.jpg", {width: 800, height: 400, background: "green", crop: "pad"})
React:
Copy to clipboard
<Image publicId="waterfall.jpg" >
  <Transformation width="800" height="400" background="green" crop="pad" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="waterfall.jpg" >
  <cld-transformation width="800" height="400" background="green" crop="pad" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="waterfall.jpg" >
  <cl-transformation width="800" height="400" background="green" crop="pad">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(800).Height(400).Background("green").Crop("pad")).BuildImageTag("waterfall.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(800).height(400).background("green").crop("pad")).generate("waterfall.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(800).setHeight(400).setBackground("green").setCrop("pad")).generate("waterfall.jpg")!, cloudinary: cloudinary)

It's also possible to assign an RGBA value to the background parameter :

Ruby:
Copy to clipboard
cl_image_tag("waterfall.jpg", :width=>800, :height=>400, :background=>"#6600cc", :crop=>"pad")
PHP:
Copy to clipboard
cl_image_tag("waterfall.jpg", array("width"=>800, "height"=>400, "background"=>"#6600cc", "crop"=>"pad"))
Python:
Copy to clipboard
CloudinaryImage("waterfall.jpg").image(width=800, height=400, background="#6600cc", crop="pad")
Node.js:
Copy to clipboard
cloudinary.image("waterfall.jpg", {width: 800, height: 400, background: "#6600cc", crop: "pad"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(800).height(400).background("#6600cc").crop("pad")).imageTag("waterfall.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('waterfall.jpg', {width: 800, height: 400, background: "#6600cc", crop: "pad"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("waterfall.jpg", {width: 800, height: 400, background: "#6600cc", crop: "pad"})
React:
Copy to clipboard
<Image publicId="waterfall.jpg" >
  <Transformation width="800" height="400" background="#6600cc" crop="pad" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="waterfall.jpg" >
  <cld-transformation width="800" height="400" background="#6600cc" crop="pad" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="waterfall.jpg" >
  <cl-transformation width="800" height="400" background="#6600cc" crop="pad">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(800).Height(400).Background("#6600cc").Crop("pad")).BuildImageTag("waterfall.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(800).height(400).background("#6600cc").crop("pad")).generate("waterfall.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(800).setHeight(400).setBackground("#6600cc").setCrop("pad")).generate("waterfall.jpg")!, cloudinary: cloudinary)

If you want to match the image's background to its content you could let Cloudinary determine the background automatically by setting the background parameter to auto:

Ruby:
Copy to clipboard
cl_image_tag("hotair_baloon.jpg", :width=>800, :height=>400, :background=>"auto", :crop=>"pad")
PHP:
Copy to clipboard
cl_image_tag("hotair_baloon.jpg", array("width"=>800, "height"=>400, "background"=>"auto", "crop"=>"pad"))
Python:
Copy to clipboard
CloudinaryImage("hotair_baloon.jpg").image(width=800, height=400, background="auto", crop="pad")
Node.js:
Copy to clipboard
cloudinary.image("hotair_baloon.jpg", {width: 800, height: 400, background: "auto", crop: "pad"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(800).height(400).background("auto").crop("pad")).imageTag("hotair_baloon.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('hotair_baloon.jpg', {width: 800, height: 400, background: "auto", crop: "pad"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("hotair_baloon.jpg", {width: 800, height: 400, background: "auto", crop: "pad"})
React:
Copy to clipboard
<Image publicId="hotair_baloon.jpg" >
  <Transformation width="800" height="400" background="auto" crop="pad" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="hotair_baloon.jpg" >
  <cld-transformation width="800" height="400" background="auto" crop="pad" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="hotair_baloon.jpg" >
  <cl-transformation width="800" height="400" background="auto" crop="pad">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(800).Height(400).Background("auto").Crop("pad")).BuildImageTag("hotair_baloon.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(800).height(400).background("auto").crop("pad")).generate("hotair_baloon.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(800).setHeight(400).setBackground("auto").setCrop("pad")).generate("hotair_baloon.jpg")!, cloudinary: cloudinary)

And if you want your image to be contrasted against the background, you could let Cloudinary choose the most contrasting color in the image, and use that as background by specifying auto:predominant_contrast for the background:

Ruby:
Copy to clipboard
cl_image_tag("hotair_baloon.jpg", :width=>800, :height=>400, :background=>"auto:predominant_contrast", :crop=>"pad")
PHP:
Copy to clipboard
cl_image_tag("hotair_baloon.jpg", array("width"=>800, "height"=>400, "background"=>"auto:predominant_contrast", "crop"=>"pad"))
Python:
Copy to clipboard
CloudinaryImage("hotair_baloon.jpg").image(width=800, height=400, background="auto:predominant_contrast", crop="pad")
Node.js:
Copy to clipboard
cloudinary.image("hotair_baloon.jpg", {width: 800, height: 400, background: "auto:predominant_contrast", crop: "pad"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(800).height(400).background("auto:predominant_contrast").crop("pad")).imageTag("hotair_baloon.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('hotair_baloon.jpg', {width: 800, height: 400, background: "auto:predominant_contrast", crop: "pad"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("hotair_baloon.jpg", {width: 800, height: 400, background: "auto:predominant_contrast", crop: "pad"})
React:
Copy to clipboard
<Image publicId="hotair_baloon.jpg" >
  <Transformation width="800" height="400" background="auto:predominant_contrast" crop="pad" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="hotair_baloon.jpg" >
  <cld-transformation width="800" height="400" background="auto:predominant_contrast" crop="pad" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="hotair_baloon.jpg" >
  <cl-transformation width="800" height="400" background="auto:predominant_contrast" crop="pad">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(800).Height(400).Background("auto:predominant_contrast").Crop("pad")).BuildImageTag("hotair_baloon.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(800).height(400).background("auto:predominant_contrast").crop("pad")).generate("hotair_baloon.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(800).setHeight(400).setBackground("auto:predominant_contrast").setCrop("pad")).generate("hotair_baloon.jpg")!, cloudinary: cloudinary)

You could even make your background come alive by letting cloudinary choose the most contrasting color in the image and then use a gradient of that color as the background

Ruby:
Copy to clipboard
cl_image_tag("multicolored_image", :width=>800, :height=>400, :background=>"auto:predominant_gradient_contrast:4", :crop=>"pad")
PHP:
Copy to clipboard
cl_image_tag("multicolored_image", array("width"=>800, "height"=>400, "background"=>"auto:predominant_gradient_contrast:4", "crop"=>"pad"))
Python:
Copy to clipboard
CloudinaryImage("multicolored_image").image(width=800, height=400, background="auto:predominant_gradient_contrast:4", crop="pad")
Node.js:
Copy to clipboard
cloudinary.image("multicolored_image", {width: 800, height: 400, background: "auto:predominant_gradient_contrast:4", crop: "pad"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(800).height(400).background("auto:predominant_gradient_contrast:4").crop("pad")).imageTag("multicolored_image");
JS:
Copy to clipboard
cloudinary.imageTag('multicolored_image', {width: 800, height: 400, background: "auto:predominant_gradient_contrast:4", crop: "pad"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("multicolored_image", {width: 800, height: 400, background: "auto:predominant_gradient_contrast:4", crop: "pad"})
React:
Copy to clipboard
<Image publicId="multicolored_image" >
  <Transformation width="800" height="400" background="auto:predominant_gradient_contrast:4" crop="pad" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="multicolored_image" >
  <cld-transformation width="800" height="400" background="auto:predominant_gradient_contrast:4" crop="pad" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="multicolored_image" >
  <cl-transformation width="800" height="400" background="auto:predominant_gradient_contrast:4" crop="pad">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(800).Height(400).Background("auto:predominant_gradient_contrast:4").Crop("pad")).BuildImageTag("multicolored_image")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(800).height(400).background("auto:predominant_gradient_contrast:4").crop("pad")).generate("multicolored_image");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(800).setHeight(400).setBackground("auto:predominant_gradient_contrast:4").setCrop("pad")).generate("multicolored_image")!, cloudinary: cloudinary)

Its also possible to add the gradient_fade effect with a value of symmetric_pad (e_gradient_fade:symmetric_pad in urls) to have the background fade into the image itself:

Ruby:
Copy to clipboard
cl_image_tag("multicolored_image", :transformation=>[
  {:width=>800, :height=>400, :background=>"auto:predominant_gradient_contrast:4", :crop=>"pad"},
  {:effect=>"gradient_fade:symmetric_pad:5"}
  ])
PHP:
Copy to clipboard
cl_image_tag("multicolored_image", array("transformation"=>array(
  array("width"=>800, "height"=>400, "background"=>"auto:predominant_gradient_contrast:4", "crop"=>"pad"),
  array("effect"=>"gradient_fade:symmetric_pad:5")
  )))
Python:
Copy to clipboard
CloudinaryImage("multicolored_image").image(transformation=[
  {'width': 800, 'height': 400, 'background': "auto:predominant_gradient_contrast:4", 'crop': "pad"},
  {'effect': "gradient_fade:symmetric_pad:5"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("multicolored_image", {transformation: [
  {width: 800, height: 400, background: "auto:predominant_gradient_contrast:4", crop: "pad"},
  {effect: "gradient_fade:symmetric_pad:5"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(800).height(400).background("auto:predominant_gradient_contrast:4").crop("pad").chain()
  .effect("gradient_fade:symmetric_pad:5")).imageTag("multicolored_image");
JS:
Copy to clipboard
cloudinary.imageTag('multicolored_image', {transformation: [
  {width: 800, height: 400, background: "auto:predominant_gradient_contrast:4", crop: "pad"},
  {effect: "gradient_fade:symmetric_pad:5"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("multicolored_image", {transformation: [
  {width: 800, height: 400, background: "auto:predominant_gradient_contrast:4", crop: "pad"},
  {effect: "gradient_fade:symmetric_pad:5"}
  ]})
React:
Copy to clipboard
<Image publicId="multicolored_image" >
  <Transformation width="800" height="400" background="auto:predominant_gradient_contrast:4" crop="pad" />
  <Transformation effect="gradient_fade:symmetric_pad:5" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="multicolored_image" >
  <cld-transformation width="800" height="400" background="auto:predominant_gradient_contrast:4" crop="pad" />
  <cld-transformation effect="gradient_fade:symmetric_pad:5" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="multicolored_image" >
  <cl-transformation width="800" height="400" background="auto:predominant_gradient_contrast:4" crop="pad">
  </cl-transformation>
  <cl-transformation effect="gradient_fade:symmetric_pad:5">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(800).Height(400).Background("auto:predominant_gradient_contrast:4").Crop("pad").Chain()
  .Effect("gradient_fade:symmetric_pad:5")).BuildImageTag("multicolored_image")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(800).height(400).background("auto:predominant_gradient_contrast:4").crop("pad").chain()
  .effect("gradient_fade:symmetric_pad:5")).generate("multicolored_image");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(800).setHeight(400).setBackground("auto:predominant_gradient_contrast:4").setCrop("pad").chain()
  .setEffect("gradient_fade:symmetric_pad:5")).generate("multicolored_image")!, cloudinary: cloudinary)

by ido
Tags: