Cloudinary Blog

Face detection based cropping

Crop and Resize Images Using Face Detection Technology


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.

https://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: https://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

Hipcamp Optimizes Images and Improves Page Load Times With Cloudinary

When creating a website that allows campers to discover great destinations, Hipcamp put a strong emphasis on featuring high-quality images that showcased the list of beautiful locations, regardless of whether users accessed the site on a desktop, tablet, or phone. Since 2015, Hipcamp has relied on Cloudinary’s image management solution to automate cropping and image optimization, enabling instant public delivery of photos, automatic tagging based on content recognition, and faster loading of webpages. In addition, Hipcamp was able to maintain the high standards it holds for the look and feel of its website.

Read more
New Image File Format: FUIF: Why Do We Need a New Image Format

In my last post, I introduced FUIF, a new, free, and universal image format I’ve created. In this post and other follow-up pieces, I will explain the why, what, and how of FUIF.

Even though JPEG is still the most widely-used image file format on the web, it has limitations, especially the subset of the format that has been implemented in browsers and that has, therefore, become the de facto standard. Because JPEG has a relatively verbose header, it cannot be used (at least not as is) for low-quality image placeholders (LQIP), for which you need a budget of a few hundred bytes. JPEG cannot encode alpha channels (transparency); it is restricted to 8 bits per channel; and its entropy coding is no longer state of the art. Also, JPEG is not fully “responsive by design.” There is no easy way to find a file’s truncation offsets and it is limited to a 1:8 downscale (the DC coefficients). If you want to use the same file for an 8K UHD display (7,680 pixels wide) and for a smart watch (320 pixels wide), 1:8 is not enough. And finally, JPEG does not work well with nonphotographic images and cannot do fully lossless compression.

Read more
 New Image File Format: FUIF:Lossy, Lossless, and Free

I've been working to create a new image format, which I'm calling FUIF, or Free Universal Image Format. That’s a rather pretentious name, I know. But I couldn’t call it the Free Lossy Image Format (FLIF) because that acronym is not available any more (see below) and FUIF can do lossless, too, so it wouldn’t be accurate either.

Read more