Remove Photo Backgrounds with Cloudinary

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!