Cloudinary Blog

Automatically and professionally remove photo backgrounds with Pixelz

Automatically and professionally remove photo backgrounds

It is common for e-commerce, media, and news sites to remove image backgrounds or make them transparent in order to place the main element of the image on either white or color backgrounds. The final result better integrates an image into a site or specific page’s graphic design. For example, a fashion site that presents clothes or shoes should have the main element of a photo (e.g. shoes) extracted from the original image background, then edited to fit the site’s catalogue design and structure.

Remove-The-Background add-on

Pixelz logo

We are glad to introduce the Remove-The-Background editing add-on, a third party image processing add-on that supports image background removal. This add-on is brought to you by Pixelz, a leading vendor of image editing solution components, including professional background removal, that is performed by a team of human experts. We, at Cloudinary, have tried it multiple times and the results were pretty impressive.

There are tools that can aid in the automatic background change or removal. Nonetheless, if your goal is to create perfect results, utilizing a graphic editor/designer would be your best bet. However, instead of hiring an in-house or freelance designer, Cloudinary’s Remove-The-Background add-on makes this process much simpler. Since the new add-on is fully integrated into Cloudinary's image management pipeline), when you upload an image, you can easily and automatically have it edited by Remove-The-Background experts.

Webinar
How to Optimize for Page Load Speed

How to remove a photo background with Cloudinary

We’d like to demonstrate this process, starting with the picture below:

Ruby:
Copy to clipboard
cl_image_tag("shoes_orig.jpg")
PHP v1:
Copy to clipboard
cl_image_tag("shoes_orig.jpg")
PHP v2:
Copy to clipboard
(new ImageTag('shoes_orig.jpg'));
Python:
Copy to clipboard
CloudinaryImage("shoes_orig.jpg").image()
Node.js:
Copy to clipboard
cloudinary.image("shoes_orig.jpg")
Java:
Copy to clipboard
cloudinary.url().imageTag("shoes_orig.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('shoes_orig.jpg').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("shoes_orig.jpg")
React:
Copy to clipboard
<Image publicId="shoes_orig.jpg" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="shoes_orig.jpg" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="shoes_orig.jpg" >

</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("shoes_orig.jpg")
Android:
Copy to clipboard
MediaManager.get().url().generate("shoes_orig.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("shoes_orig.jpg")!, cloudinary: cloudinary)
Original shows image

You can begin the process either while the photo is being uploaded to Cloudinary, using the upload API demonstrated in the code sample below, or by using the Admin API for images that have already been uploaded. Simply specify the background_removal parameter in either API.

Ruby:
Copy to clipboard
Cloudinary::Uploader.upload("shoes.jpg",
  :public_id => "shoes",
  :background_removal => 'remove_the_background')
PHP:
Copy to clipboard
\Cloudinary\Uploader::upload("shoes.jpg", 
  array(
    "public_id" => "shoes",
    "background_removal" => "remove_the_background"
  ));
Python:
Copy to clipboard
cloudinary.uploader.upload("shoes.jpg",
  public_id = "shoes",
  background_removal = "remove_the_background")
Node.js:
Copy to clipboard
cloudinary.uploader.upload("shoes.jpg", 
  function(result) { console.log(result); }, 
  { public_id: "shoes",
    background_removal: "remove_the_background" });
Java:
Copy to clipboard
cloudinary.uploader().upload("shoes.jpg", Cloudinary.asMap(
  "public_id", "shoes",
  "background_removal", "remove_the_background"));

As mentioned above, the automatic background change or removal is performed by Remove-The-Background’s team of experts and it could therefore take up to 24 hours to complete. Cloudinary processes the request asynchronously, then when the background removal is complete, the original uploaded image is replaced by an edited one. A backup of the original image is automatically saved to Cloudinary. It is also possible to receive a notification that indicates when the editing process is complete. Below, you can see how the picture's background was removed with great results:

Ruby:
Copy to clipboard
cl_image_tag("shoes.jpg")
PHP v1:
Copy to clipboard
cl_image_tag("shoes.jpg")
PHP v2:
Copy to clipboard
(new ImageTag('shoes.jpg'));
Python:
Copy to clipboard
CloudinaryImage("shoes.jpg").image()
Node.js:
Copy to clipboard
cloudinary.image("shoes.jpg")
Java:
Copy to clipboard
cloudinary.url().imageTag("shoes.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('shoes.jpg').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("shoes.jpg")
React:
Copy to clipboard
<Image publicId="shoes.jpg" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="shoes.jpg" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="shoes.jpg" >

</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("shoes.jpg")
Android:
Copy to clipboard
MediaManager.get().url().generate("shoes.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("shoes.jpg")!, cloudinary: cloudinary)
Resulting image with background removed

Pictures can be further transformed to fit your own graphics and design using Cloudinary's transformation URLs. For example, below, you can see the same image cropped to 250 x 250, with increased saturation.

Ruby:
Copy to clipboard
cl_image_tag("shoes.jpg", :width=>250, :height=>250, :effect=>"saturation:80", :crop=>"fill")
PHP v1:
Copy to clipboard
cl_image_tag("shoes.jpg", array("width"=>250, "height"=>250, "effect"=>"saturation:80", "crop"=>"fill"))
PHP v2:
Copy to clipboard
(new ImageTag('shoes.jpg'))
  ->resize(Resize::fill()->width(250)->height(250))
  ->adjust(Adjust::saturation()->level(80));
Python:
Copy to clipboard
CloudinaryImage("shoes.jpg").image(width=250, height=250, effect="saturation:80", crop="fill")
Node.js:
Copy to clipboard
cloudinary.image("shoes.jpg", {width: 250, height: 250, effect: "saturation:80", crop: "fill"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(250).height(250).effect("saturation:80").crop("fill")).imageTag("shoes.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('shoes.jpg', {width: 250, height: 250, effect: "saturation:80", crop: "fill"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("shoes.jpg", {width: 250, height: 250, effect: "saturation:80", crop: "fill"})
React:
Copy to clipboard
<Image publicId="shoes.jpg" >
  <Transformation width="250" height="250" effect="saturation:80" crop="fill" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="shoes.jpg" >
  <cld-transformation width="250" height="250" effect="saturation:80" crop="fill" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="shoes.jpg" >
  <cl-transformation width="250" height="250" effect="saturation:80" crop="fill">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(250).Height(250).Effect("saturation:80").Crop("fill")).BuildImageTag("shoes.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(250).height(250).effect("saturation:80").crop("fill")).generate("shoes.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(250).setHeight(250).setEffect("saturation:80").setCrop("fill")).generate("shoes.jpg")!, cloudinary: cloudinary)
250x250 cropped shows image with background removed

This add-on can remove the background from any type of photo, including pictures of people.

Ruby:
Copy to clipboard
cl_image_tag("woman.jpg")
PHP v1:
Copy to clipboard
cl_image_tag("woman.jpg")
PHP v2:
Copy to clipboard
(new ImageTag('woman.jpg'));
Python:
Copy to clipboard
CloudinaryImage("woman.jpg").image()
Node.js:
Copy to clipboard
cloudinary.image("woman.jpg")
Java:
Copy to clipboard
cloudinary.url().imageTag("woman.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('woman.jpg').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("woman.jpg")
React:
Copy to clipboard
<Image publicId="woman.jpg" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="woman.jpg" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="woman.jpg" >

</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("woman.jpg")
Android:
Copy to clipboard
MediaManager.get().url().generate("woman.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("woman.jpg")!, cloudinary: cloudinary)
Original woman photo Woman photo with background removed

The images below have been dynamically created using Cloudinary's transformation URLs. 200x200 face-detection based thumbnails were created. The image on the left is a thumbnail of the original image while the image on the right is a thumbnail with the background removed.

Ruby:
Copy to clipboard
cl_image_tag("woman.jpg", :width=>200, :height=>200, :gravity=>"face", :crop=>"thumb")
PHP v1:
Copy to clipboard
cl_image_tag("woman.jpg", array("width"=>200, "height"=>200, "gravity"=>"face", "crop"=>"thumb"))
PHP v2:
Copy to clipboard
(new ImageTag('woman.jpg'))
  ->resize(Resize::thumbnail()->width(200)->height(200)
    ->gravity(Gravity::focusOn(FocusOn::face())));
Python:
Copy to clipboard
CloudinaryImage("woman.jpg").image(width=200, height=200, gravity="face", crop="thumb")
Node.js:
Copy to clipboard
cloudinary.image("woman.jpg", {width: 200, height: 200, gravity: "face", crop: "thumb"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(200).height(200).gravity("face").crop("thumb")).imageTag("woman.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('woman.jpg', {width: 200, height: 200, gravity: "face", crop: "thumb"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("woman.jpg", {width: 200, height: 200, gravity: "face", crop: "thumb"})
React:
Copy to clipboard
<Image publicId="woman.jpg" >
  <Transformation width="200" height="200" gravity="face" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="woman.jpg" >
  <cld-transformation width="200" height="200" gravity="face" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="woman.jpg" >
  <cl-transformation width="200" height="200" gravity="face" crop="thumb">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(200).Gravity("face").Crop("thumb")).BuildImageTag("woman.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(200).height(200).gravity("face").crop("thumb")).generate("woman.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(200).setGravity("face").setCrop("thumb")).generate("woman.jpg")!, cloudinary: cloudinary)
Thumbnail of original woman photo Thumbnail of woman photo with background removed

Remove The Background supports additional editing profiles that can be specified via Cloudinary’s API (e.g. keep/remove shadow, transparent/white background, and more). Please contact us if you need a custom editing profile. For more details about this add-on check out our Remove-The-Background add-on documentation.

Final Notes

Cloudinary’s Remove-The-Background add-on helps preserve your site or app’s professional look, without the need for in-house graphic designers or long and complex editing processes. Customers of the Basic plan or higher can try the Remove-The-Background add-on for free then later subscribe to a plan that best meets your specific requirements.

If you don't have a Cloudinary account yet, sign up for a free account here.

Recent Blog Posts

Automatically Translating Videos for an International Audience

No matter your business focus—public service, B2B integration, recruitment—multimedia, in particular video, is remarkably effective in communicating with the audience. Before, making video accessible to diverse viewers involved tasks galore, such as eliciting the service of production studios to manually dub, transcribe, and add subtitles. Those operations were costly and slow, especially for globally destined content.

Read more
Cloudinary Helps Minted Manage Its Image-Generation Pipeline at Scale

David first shared his thoughts at our ImageCon coverence last October and this case study is an abbreviated version of Minted’s success using Cloudinary.

Over time, Faithful renderings of the creations of the illustrators, textile designers, painters, packaging designers, marketers, and stay-at-home moms, all of whom are core contributors of the Minted world, was getting harder and harder. Legacy technology wasn’t cutting it any more—and it was time for Cloudinary to step in.

Read more
Highlights on ImageCon 2021 and a Preview of ImageCon 2022

New year, same trend! Visual media will continue to play a monumental role in driving online conversions. To keep up with visual-experience trends and best practices, Cloudinary holds an annual conference called ImageCon, a one-of-a-kind event that helps attendees create the most engaging visual experiences possible.

Read more

New for DAM: Media Library Extension for Chrome

By Sharon Yelenik
A New Media Library Chrome Extension for Cloudinary DAM

With the introduction of the Media Library Extension, a Chrome-browser add-on that streamlines the access to, search for, and management of images and videos, Cloudinary offers yet another effective tool for its Digital Asset Management (DAM) solution. Let’s have a look at how most teams are currently working with media assets and how the new add-on not only boosts efficiency, but also renders the process a pleasure to work with.

Read more
New Features Supercharge Cloudinary’s Digital Asset Management Solution.

Today, I’m thrilled to announce the launch of Apps for Digital Asset Management and a Media Library Extension for the Chrome browser, which enables easy, flexible integration with all web-based applications in addition to making asset discovery more robust and accessible to all.

Read more
Scale and Automate Workflows With Modern Digital Asset Management Systems

With building, growing, and maintaining a strong digital presence being a top priority for all brands, high-quality visual content is paramount. In fact, consumers are 40 times more likely to share visual content on social networks than on other forums. Plus, a recent study from Wyzowl found that 84% of consumers made purchase decisions after watching a video, which explains why many brands are adding more and more visual media to their sites.

Read more