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:
cl_image_tag("waterfall.jpg", :width=>800, :height=>400, :background=>"green", :crop=>"pad")
PHP:
cl_image_tag("waterfall.jpg", array("width"=>800, "height"=>400, "background"=>"green", "crop"=>"pad"))
Python:
CloudinaryImage("waterfall.jpg").image(width=800, height=400, background="green", crop="pad")
Node.js:
cloudinary.image("waterfall.jpg", {width: 800, height: 400, background: "green", crop: "pad"})
Java:
cloudinary.url().transformation(new Transformation().width(800).height(400).background("green").crop("pad")).imageTag("waterfall.jpg");
JS:
cloudinary.imageTag('waterfall.jpg', {width: 800, height: 400, background: "green", crop: "pad"}).toHtml();
jQuery:
$.cloudinary.image("waterfall.jpg", {width: 800, height: 400, background: "green", crop: "pad"})
React:
<Image publicId="waterfall.jpg" >
  <Transformation width="800" height="400" background="green" crop="pad" />
</Image>
Angular:
<cl-image public-id="waterfall.jpg" >
  <cl-transformation width="800" height="400" background="green" crop="pad">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(800).Height(400).Background("green").Crop("pad")).BuildImageTag("waterfall.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(800).height(400).background("green").crop("pad")).generate("waterfall.jpg");
iOS:
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:
cl_image_tag("waterfall.jpg", :width=>800, :height=>400, :background=>"#6600cc", :crop=>"pad")
PHP:
cl_image_tag("waterfall.jpg", array("width"=>800, "height"=>400, "background"=>"#6600cc", "crop"=>"pad"))
Python:
CloudinaryImage("waterfall.jpg").image(width=800, height=400, background="#6600cc", crop="pad")
Node.js:
cloudinary.image("waterfall.jpg", {width: 800, height: 400, background: "#6600cc", crop: "pad"})
Java:
cloudinary.url().transformation(new Transformation().width(800).height(400).background("#6600cc").crop("pad")).imageTag("waterfall.jpg");
JS:
cloudinary.imageTag('waterfall.jpg', {width: 800, height: 400, background: "#6600cc", crop: "pad"}).toHtml();
jQuery:
$.cloudinary.image("waterfall.jpg", {width: 800, height: 400, background: "#6600cc", crop: "pad"})
React:
<Image publicId="waterfall.jpg" >
  <Transformation width="800" height="400" background="#6600cc" crop="pad" />
</Image>
Angular:
<cl-image public-id="waterfall.jpg" >
  <cl-transformation width="800" height="400" background="#6600cc" crop="pad">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(800).Height(400).Background("#6600cc").Crop("pad")).BuildImageTag("waterfall.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(800).height(400).background("#6600cc").crop("pad")).generate("waterfall.jpg");
iOS:
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:
cl_image_tag("hotair_baloon.jpg", :width=>800, :height=>400, :background=>"auto", :crop=>"pad")
PHP:
cl_image_tag("hotair_baloon.jpg", array("width"=>800, "height"=>400, "background"=>"auto", "crop"=>"pad"))
Python:
CloudinaryImage("hotair_baloon.jpg").image(width=800, height=400, background="auto", crop="pad")
Node.js:
cloudinary.image("hotair_baloon.jpg", {width: 800, height: 400, background: "auto", crop: "pad"})
Java:
cloudinary.url().transformation(new Transformation().width(800).height(400).background("auto").crop("pad")).imageTag("hotair_baloon.jpg");
JS:
cloudinary.imageTag('hotair_baloon.jpg', {width: 800, height: 400, background: "auto", crop: "pad"}).toHtml();
jQuery:
$.cloudinary.image("hotair_baloon.jpg", {width: 800, height: 400, background: "auto", crop: "pad"})
React:
<Image publicId="hotair_baloon.jpg" >
  <Transformation width="800" height="400" background="auto" crop="pad" />
</Image>
Angular:
<cl-image public-id="hotair_baloon.jpg" >
  <cl-transformation width="800" height="400" background="auto" crop="pad">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(800).Height(400).Background("auto").Crop("pad")).BuildImageTag("hotair_baloon.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(800).height(400).background("auto").crop("pad")).generate("hotair_baloon.jpg");
iOS:
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:
cl_image_tag("hotair_baloon.jpg", :width=>800, :height=>400, :background=>"auto:predominant_contrast", :crop=>"pad")
PHP:
cl_image_tag("hotair_baloon.jpg", array("width"=>800, "height"=>400, "background"=>"auto:predominant_contrast", "crop"=>"pad"))
Python:
CloudinaryImage("hotair_baloon.jpg").image(width=800, height=400, background="auto:predominant_contrast", crop="pad")
Node.js:
cloudinary.image("hotair_baloon.jpg", {width: 800, height: 400, background: "auto:predominant_contrast", crop: "pad"})
Java:
cloudinary.url().transformation(new Transformation().width(800).height(400).background("auto:predominant_contrast").crop("pad")).imageTag("hotair_baloon.jpg");
JS:
cloudinary.imageTag('hotair_baloon.jpg', {width: 800, height: 400, background: "auto:predominant_contrast", crop: "pad"}).toHtml();
jQuery:
$.cloudinary.image("hotair_baloon.jpg", {width: 800, height: 400, background: "auto:predominant_contrast", crop: "pad"})
React:
<Image publicId="hotair_baloon.jpg" >
  <Transformation width="800" height="400" background="auto:predominant_contrast" crop="pad" />
</Image>
Angular:
<cl-image public-id="hotair_baloon.jpg" >
  <cl-transformation width="800" height="400" background="auto:predominant_contrast" crop="pad">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(800).Height(400).Background("auto:predominant_contrast").Crop("pad")).BuildImageTag("hotair_baloon.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(800).height(400).background("auto:predominant_contrast").crop("pad")).generate("hotair_baloon.jpg");
iOS:
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:
cl_image_tag("multicolored_image", :width=>800, :height=>400, :background=>"auto:predominant_gradient_contrast:4", :crop=>"pad")
PHP:
cl_image_tag("multicolored_image", array("width"=>800, "height"=>400, "background"=>"auto:predominant_gradient_contrast:4", "crop"=>"pad"))
Python:
CloudinaryImage("multicolored_image").image(width=800, height=400, background="auto:predominant_gradient_contrast:4", crop="pad")
Node.js:
cloudinary.image("multicolored_image", {width: 800, height: 400, background: "auto:predominant_gradient_contrast:4", crop: "pad"})
Java:
cloudinary.url().transformation(new Transformation().width(800).height(400).background("auto:predominant_gradient_contrast:4").crop("pad")).imageTag("multicolored_image");
JS:
cloudinary.imageTag('multicolored_image', {width: 800, height: 400, background: "auto:predominant_gradient_contrast:4", crop: "pad"}).toHtml();
jQuery:
$.cloudinary.image("multicolored_image", {width: 800, height: 400, background: "auto:predominant_gradient_contrast:4", crop: "pad"})
React:
<Image publicId="multicolored_image" >
  <Transformation width="800" height="400" background="auto:predominant_gradient_contrast:4" crop="pad" />
</Image>
Angular:
<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:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(800).Height(400).Background("auto:predominant_gradient_contrast:4").Crop("pad")).BuildImageTag("multicolored_image")
Android:
MediaManager.get().url().transformation(new Transformation().width(800).height(400).background("auto:predominant_gradient_contrast:4").crop("pad")).generate("multicolored_image");
iOS:
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:
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:
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:
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:
cloudinary.image("multicolored_image", {transformation: [
  {width: 800, height: 400, background: "auto:predominant_gradient_contrast:4", crop: "pad"},
  {effect: "gradient_fade:symmetric_pad:5"}
  ]})
Java:
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:
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:
$.cloudinary.image("multicolored_image", {transformation: [
  {width: 800, height: 400, background: "auto:predominant_gradient_contrast:4", crop: "pad"},
  {effect: "gradient_fade:symmetric_pad:5"}
  ]})
React:
<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>
Angular:
<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:
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:
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:
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: