Remove Photo Backgrounds with Cloudinary

By (Sponsor)  on  
Background Removal

A while back I wrote about using Cloudinary to Optimize Images, a technique you can use to crunch image size, serve images from the cloud, and modify images on the fly.  As someone who isn't great with Photoshop, and never really has the time to play around with the amazing app, I appreciate that Cloudinary can do the hard work of cropping, optimizing, and doing a variety of transformations on images by simply changing a URL or adding a few parameters.

One of the Cloudinary add-ons I recently found blew my mind: removing photo backgrounds!  Essentially Cloudinary's service can accept your image upload and then remove the background elements so that only the foreground, focus image remains!

The JavaScript

Cloudinary provides an API in just about every language you can think of (JavaScript, Python, PHP, etc) but you probably know I'll always opt for the JavaScript API!  The following JavaScript code is all you need to upload an image and remove its background:

// npm install cloudinary
var cloudinary = require('cloudinary');

// Set your API information
cloudinary.config({
	cloud_name: 'david-walsh-blog',
	api_key: '############',
	api_secret: '############'
});

// Upload an image, 
cloudinary.uploader.upload('sample-photos/my-photo.jpg', function(result) {
    // Log out the result to get the URL of the image
    console.log(result);

    // Image url is: result.url / result.secure_url
}, {
    public_id: "my-photo",
    background_removal: "remove_the_background"
});

/*
    Result:

    { public_id: 'my-photo',
      version: 1467832498,
      signature: 'd64413aaad8aefa3d0b6d521eab802e9bea5158d',
      width: 581,
      height: 583,
      format: 'jpg',
      resource_type: 'image',
      created_at: '2016-07-06T19:14:58Z',
      tags: [],
      bytes: 21368,
      type: 'upload',
      etag: 'e8584286fd457e9893b0dd69fd8c47c1',
      url: 'http://res.cloudinary.com/david-wash-blog/image/upload/v1467832498/my-photo.jpg',
      secure_url: 'https://res.cloudinary.com/david-wash-blog/image/upload/v1467832498/my-photo.jpg',
      info: { background_removal: { remove_the_background: [Object] } },
      overwritten: true,
      original_filename: 'my-photo' }
*/

That's quite a small snippet for triggering such an amazing automated image modification!  The photo uploads instantly and is added to your media library but the background removal does take a few moments to process.  Cloudinary does let you configure your account to send alerts when the process is complete.

Example Output

Cloudinary's background removal add-on is quality -- no pixelated outlines or broken images.  Here are a few before and after photos to prove it:

Cloudinary Rocks!

Cloudinary's API is easy to use and their number of features and add-ons is amazing!  Crunching images helps SEO and load time, serving them from cloud helps with performance, the ability to serve a different variation of image is a time-saver, and their add-ons like background removal make Cloudinary an incredibly powerful beast.

Cloudinary offers a free tier and so give them a try.  There are loads of features and add-ons: they may save you time, effort, and worry about how your images are affecting your web load times!

Discussion

  1. Alli

    Had like 5 app ideas for this while reading the article – until I actually went to Cloudinary’s website and read that they do this manually – ugh…

    “…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…”

    • Fast turn around is always great but I’d prefer something done right over something done fast. To each their own.

  2. Josh Chunick

    Interestingly, the Lytro camera uses light field to capture image data, thus allowing someone to change the depth of field of an image. This would, incidentally, allow for automatic removal of the background rather than the manual method used by Cloudinary. All it would take is making the technology ubiquitous. :-)

  3. I really love this effort.. It is look like a magic.. But, when I’m thinking a complex BG, cloudinary said like that “The original images will be automatically replaced with their background removed versions as soon as their editing is finished.”

    So, there isn’t alternative without manual action!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!