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:
cl_image_tag("shoes_orig.jpg")
PHP:
cl_image_tag("shoes_orig.jpg")
Python:
CloudinaryImage("shoes_orig.jpg").image()
Node.js:
cloudinary.image("shoes_orig.jpg")
Java:
cloudinary.url().imageTag("shoes_orig.jpg")
JS:
cl.imageTag('shoes_orig.jpg').toHtml();
jQuery:
$.cloudinary.image("shoes_orig.jpg")
React:
<Image publicId="shoes_orig.jpg" >

</Image>
Angular:
<cl-image public-id="shoes_orig.jpg" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("shoes_orig.jpg")
Android:
MediaManager.get().url().generate("shoes_orig.jpg")
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:
Cloudinary::Uploader.upload("shoes.jpg",
  :public_id => "shoes",
  :background_removal => 'remove_the_background')
PHP:
\Cloudinary\Uploader::upload("shoes.jpg", 
  array(
    "public_id" => "shoes",
    "background_removal" => "remove_the_background"
  ));
Python:
cloudinary.uploader.upload("shoes.jpg",
  public_id = "shoes",
  background_removal = "remove_the_background")
Node.js:
cloudinary.uploader.upload("shoes.jpg", 
  function(result) { console.log(result); }, 
  { public_id: "shoes",
    background_removal: "remove_the_background" });
Java:
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:
cl_image_tag("shoes.jpg")
PHP:
cl_image_tag("shoes.jpg")
Python:
CloudinaryImage("shoes.jpg").image()
Node.js:
cloudinary.image("shoes.jpg")
Java:
cloudinary.url().imageTag("shoes.jpg")
JS:
cl.imageTag('shoes.jpg').toHtml();
jQuery:
$.cloudinary.image("shoes.jpg")
React:
<Image publicId="shoes.jpg" >

</Image>
Angular:
<cl-image public-id="shoes.jpg" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("shoes.jpg")
Android:
MediaManager.get().url().generate("shoes.jpg")
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:
cl_image_tag("shoes.jpg", :width=>250, :height=>250, :effect=>"saturation:80", :crop=>"fill")
PHP:
cl_image_tag("shoes.jpg", array("width"=>250, "height"=>250, "effect"=>"saturation:80", "crop"=>"fill"))
Python:
CloudinaryImage("shoes.jpg").image(width=250, height=250, effect="saturation:80", crop="fill")
Node.js:
cloudinary.image("shoes.jpg", {width: 250, height: 250, effect: "saturation:80", crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().width(250).height(250).effect("saturation:80").crop("fill")).imageTag("shoes.jpg")
JS:
cl.imageTag('shoes.jpg', {width: 250, height: 250, effect: "saturation:80", crop: "fill"}).toHtml();
jQuery:
$.cloudinary.image("shoes.jpg", {width: 250, height: 250, effect: "saturation:80", crop: "fill"})
React:
<Image publicId="shoes.jpg" >
  <Transformation width="250" height="250" effect="saturation:80" crop="fill" />
</Image>
Angular:
<cl-image public-id="shoes.jpg" >
  <cl-transformation width="250" height="250" effect="saturation:80" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(250).Height(250).Effect("saturation:80").Crop("fill")).BuildImageTag("shoes.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(250).height(250).effect("saturation:80").crop("fill")).generate("shoes.jpg")
250x250 cropped shows image with background removed

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

Ruby:
cl_image_tag("woman.jpg")
PHP:
cl_image_tag("woman.jpg")
Python:
CloudinaryImage("woman.jpg").image()
Node.js:
cloudinary.image("woman.jpg")
Java:
cloudinary.url().imageTag("woman.jpg")
JS:
cl.imageTag('woman.jpg').toHtml();
jQuery:
$.cloudinary.image("woman.jpg")
React:
<Image publicId="woman.jpg" >

</Image>
Angular:
<cl-image public-id="woman.jpg" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("woman.jpg")
Android:
MediaManager.get().url().generate("woman.jpg")
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:
cl_image_tag("woman.jpg", :width=>200, :height=>200, :gravity=>"face", :crop=>"thumb")
PHP:
cl_image_tag("woman.jpg", array("width"=>200, "height"=>200, "gravity"=>"face", "crop"=>"thumb"))
Python:
CloudinaryImage("woman.jpg").image(width=200, height=200, gravity="face", crop="thumb")
Node.js:
cloudinary.image("woman.jpg", {width: 200, height: 200, gravity: "face", crop: "thumb"})
Java:
cloudinary.url().transformation(new Transformation().width(200).height(200).gravity("face").crop("thumb")).imageTag("woman.jpg")
JS:
cl.imageTag('woman.jpg', {width: 200, height: 200, gravity: "face", crop: "thumb"}).toHtml();
jQuery:
$.cloudinary.image("woman.jpg", {width: 200, height: 200, gravity: "face", crop: "thumb"})
React:
<Image publicId="woman.jpg" >
  <Transformation width="200" height="200" gravity="face" crop="thumb" />
</Image>
Angular:
<cl-image public-id="woman.jpg" >
  <cl-transformation width="200" height="200" gravity="face" crop="thumb">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(200).Gravity("face").Crop("thumb")).BuildImageTag("woman.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(200).height(200).gravity("face").crop("thumb")).generate("woman.jpg")
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

How the Right Tools and Training Drive SDR Success

Here at Cloudinary, I head a team of eight SDRs, who are responsible for creating the first impression potential customers have of our company’s brand. In just the first 10 months of 2017, our team of outbound SDRs have been responsible for sending more than 67,000 personalized emails and making more than 15,000 calls.

Read more
The JS video player that developers will love (How To)

It doesn't take a genius (or a statistician) to know that video represents a significant proportion of web and mobile content these days. But did you realize that in 2017, video will account for about 75% of all internet traffic and that 55% of people watch videos online every day? In fact, 52% of marketing professionals worldwide believe that video is the content type with the best ROI, with people spending up to 2.6x more time on pages with video than on those without.

Read more
 Beyond Drupal Media: Make Images and Video Fly with Cloudinary

Drupal is a very popular open source content management system (CMS) that has been deployed countless times by organizations and developers around the world. Drupal gained a reputation for being very flexible, powerful and robust in creating complex websites. With Drupal, you can create everything from plain websites, blogs and forums to ambitious enterprise systems.

Read more
Curbing Terrorist Content Online

Today, Cloudinary is proud to announce that it has joined The Global Internet Forum to Counter Terrorism (GIFCT), to help fight the spread of terrorist and violent extremist content on the Internet. The forum was established by Facebook, Microsoft, Twitter and YouTube in mid-2017. Cloudinary will contribute to the hash-sharing database, which all contributing companies can use to help identify and block terrorist related images and videos upon upload.

Read more
Introducing the complete video solution for developers

Videos in web sites and apps are starting to catch up with images in terms of popularity and they are a constantly growing part of the media strategy for most organizations. This means bigger challenges for developers who need to handle these videos in their web sites and mobile apps. Cloudinary's mission is to solve all developer needs around image and video management. In this blog post, we are excited to introduce Cloudinary's complete cloud-based video management solution for developers.

Read more
Getting Started with StencilJS

Stencil is basically a compiler, not necessarily a UI library. A compiler that transforms TSX (TypeScript + JSX) into self-contained custom components.

Before you start learning about the tool, it’s important to note that Stencil is not another heavy JavaScript framework you need to learn. If you have worked with Angular or React, or understand web components, then Stencil is worth a look.

Read more