Cloudinary Blog

Face detection based cropping


Cloudinary’s roots go back to when we needed to embed users’ uploaded images and profile pictures for web projects we’ve developed.

We had to show people and faces of users in various dimensions and perspectives, and the process proved cumbersome.

These days, Cloudinary allows you to easily resize and crop your images to snugly fit the graphics design. But sometimes, just resizing pictures using ‘fill’ crop and ‘center’ gravity just doesn’t cut it. This is a common problem with user profile photos.

 

So we thought it is about time we add some more brainpower into the cropping process. Of-course we could just let the users manually crop their own profile pictures, but that just wasn’t fun enough :)

We decided to add face detection based cropping. Facebook use it internally to find faces of users and crop the profile pictures accordingly. Google does it as well. What about the rest of us?

Fortunately, we didn’t need to invent the wheel. Some top-notch face detection open source algorithms are freely available today. They are just not production ready or easy to integrate. The good news - we did the heavy lifting for you. We integrated existing tools and libraries, optimized their settings and added smart face detection based cropping to Cloudinary. Try it out - you won’t believe the difference that it makes.

Cloudinary supports either a single face detection or multiple faces detection (i.e., focusing on the people in a picture). You can easily create a face thumbnail of your users, crop an image to focus on a person or resize an image to fill the required dimensions while making sure the person in the original picture appears in the resized version of the image. And as usual, Cloudinary does all this automatically for you in the cloud and delivers the images through a fast CDN.

 

 

Using face detection based cropping with Cloudinary is very simple. Below are examples showing both cropping via our universal dynamic URLs and our Ruby on Rails integration.

http://res.cloudinary.com/demo/image/upload/w_100,h_100,c_thumb,g_face/face_top.jpg

<%= cl_image_tag("face_top.jpg", :width =>100, :height => 100,
:crop => :thumb, :gravity => :face) %>

For more details and usage examples, take a look at our documentation: http://cloudinary.com/documentation/image_transformations#face_detection

This feature is now available across all our plans, including the free one. We hope you like it.

 

Recent Blog Posts

ImageCon17: Delivering Responsive Images

By Jason Grigsby

After five years many specifications, some inflamed Twitter battles and other conversations, responsive images have finally landed and there's a sound. Which is really exciting right? People have been climbing for this for quite some time and we've reached a point where they're available in modern browsers. So people were excited, they wanted to go use them it's something that designers and developers have had as a point of frustration for a long time.

Read more
Auto padding images with content-aware color padding

How you present the content of your website can be just as important as the content itself. The images you display need to conform to the graphic design of your site, and every image needs to fit within a predefined size. Although that may be simple enough to achieve when you are dealing with your own images, the task can be more challenging when displaying images uploaded by your users.

Read more

Bounce! Hacking Jazzfest with Social Videos

By Eric Normand
Bounce! Hacking Jazzfest with Social Videos

Last week, I was invited to an exclusive hackathon to build apps for musicians. The app team I was assigned to was tasked with building a video upload site for Bounce videos. Bounce is a style of music that originated in New Orleans. The app would be called BounceDotCom.com and there were plans to have Big Freedia, the Queen of Bounce, promote it. I knew the organizer could make things happen, so I jumped at the chance.

Read more
Getting a Better React-ion with Progressive Web Apps

This is part 2 of a 3 part series

React has become more popular, as well as more mature, over the last four years since its release by Facebook. It has become one of the go-to technologies for people looking to componentize the front-end of any web application. It also helps that an entire mobile stack is built around React in the form of ReactNative. The components are wonderful, however there can be a burdensome learning curve. But, in the end, there’s the payoff of highly reusable code and a better user experience.

Read more
Build an Image Library with React & Cloudinary

This article was originally posted on Scotch.io

React is a good tool when it comes to building flexible and reusable UI components. However, it's "one of those libraries" that cannot handle all the tasks involved in building a full fleshed UI project. Other supporting tools - such as a recently announced React SDK from Cloudinary - are available to provide solutions that the React core cannot.

Read more
Getting Started with Vue JS: The Progressive JavaScript Framework

The most challenging aspect of building a product with a front-end framework is focusing on the complexity of the tool rather than the complexity of the actual problem being solved. It’s perhaps more frustrating when the tool is complex but the problem is a simple one (e.g. complex webpack config for a todo app). The term progressive, is used by Vue.js to describe how this challenge can be mitigated. Building a basic demo or small app? Vue.js is simple enough to handle that. How about a complex enterprise app? Vue.js is capable of produce cutting-edge solutions, as well.

Read more