Cloudinary Blog

How to automatically and professionally remove photo backgrounds

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

RTB 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 Remove-The-Background, 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 automatic tools that can aid in background 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.

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 actual background 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 manipulated to fit your own graphics and design using Cloudinary's manipulation 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 manipulation 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

Generate Waveform Images from Audio with Cloudinary

This is a reposting of an article written by David Walsh. Check out his blog HERE!
I've been working a lot with visualizations lately, which is a far cry from your normal webpage element interaction coding; you need advanced geometry knowledge, render and performance knowledge, and much more. It's been a great learning experience but it can be challenging and isn't always an interest of all web developers. That's why we use apps and services specializing in complex tasks like Cloudinary: we need it done quickly and by a tool written by an expert.

Read more
Make All Images on Your Website Responsive in 3 Easy Steps

Images are crucial to website performance, but most still don't implement responsive images. It’s not just about fitting an image on the screen, but also making the the image size relatively rational to the device. The srcset and sizes options, which are your best hit are hard to implement. Cloudinary provides an easier way, which we will discuss in this article.

Read more

The Future of Audio and Video on the Web

By Prosper Otemuyiwa
The Future of Audio and Video on the Web

Web sites and platforms are becoming increasingly media-rich. Today, approximately 62 percent of internet traffic is made up of images, with audio and video constituting a growing percentage of the bytes.

Read more

Embed Images in Email Campaigns at Scale

By Sourav Kundu
Embed Images in Email Campaigns at Scale

tl;dr

Cloudinary is a powerful image hosting solution for email marketing campaigns of any size. With features such as advanced image optimization and on-the-fly image transformation, backed by a global CDN, Cloudinary provides the base for a seamless user experience in your email campaigns leading to increased conversion and performance.

Read more
Build the Back-End For Your Own Instagram-style App with Cloudinary

Github Repo

Managing media files (processing, storage and manipulation) is one of the biggest challenges we encounter as practical developers. These challenges include:

A great service called Cloudinary can help us overcome many of these challenges. Together with Cloudinary, let's work on solutions to these challenges and hopefully have a simpler mental model towards media management.

Read more

Build A Miniflix in 10 Minutes

By Prosper Otemuyiwa
Build A Miniflix in 10 Minutes

Developers are constantly faced with challenges of building complex products every single day. And there are constraints on the time needed to build out the features of these products.

Engineering and Product managers want to beat deadlines for projects daily. CEOs want to roll out new products as fast as possible. Entrepreneurs need their MVPs like yesterday. With this in mind, what should developers do?

Read more