Cloudinary Blog

Automatic face-blurring in images made easy

Automatically Blur Faces by Using the Pixelate Effect on Photos
After our recent, somewhat technical posts, we wanted to lighten things up with Cloudinary's latest (cool) semantic image transformation feature. Keeping people privacy in photos by automatically blurring their faces. 
 

Pixelate Effect

We previously detailed in length about Cloudinary's cloud-based API for applying effects on images. We now want to introduce Cloudinary’s latest effect - pixelization.
 
 
Use it by simply setting the 'effect' parameter (or 'e' for URLs) to 'pixelate'.
 
The example below generated a 150x200 thumbnail of a Facebook profile picture and applied the pixelization effect on it.
 
.../image/facebook/w_150,h_200,c_fill,e_pixelate/zuck.jpg
 
 
Isn't that great? With zero effort, you've converted an image to a pixelated one before embedding it in your site.
 
As you can see, the pixelate effect in the example above is quite intense. You can assume greater control on the effect’s intensity by specifying the size of the pixelization squares (numeric value, in pixels). In the following example, we applied the pixelate effect using six pixel blocks on the same Facebook profile picture that was automatically retrieved from Facebook by Cloudinary. As always, the resulting image is cached and delivered through a fast CDN.
 
.../image/facebook/w_150,h_200,c_fill,e_pixelate:6/zuck.jpg
 
 
Same example in Ruby on Rails, Django, Node.js and PHP:
 
<%= facebook_profile_image_tag("zuck.jpg", :effect => "pixelate:6", 
                               :width => 150, :height => 200, :crop => :fill) %gt;
{% cloudinary "zuck.jpg" type="facebook" effect="pixelate:6" 
              width=150 height=200 crop="fill"  %}
cloudinary.image("zuck.jpg", { type: "facebook",  effect: "pixelate:6", 
                 width: 150, height: 200, crop: "fill"})
<?php echo facebook_profile_image_tag("zuck.jpg", array("effect" => "pixelate:6", 
                             "width" => 150, "height" => 200, "crop" => "fill")) ?>

 

Automatic Face Blurring

In the examples above we've shown how to easily pixelate a whole picture. But if we are talking about privacy, showing the original image as is and just hiding the faces is probably more useful.
 
For example, let's take the following photo, depicting a nice couple:
 
 
 
 
We can now apply the new 'pixelate_faces' effect to hide the faces of the couple in the original image. The following URL generates a 200x200 rounded cornered thumbnail that was smartly cropped based of face detection, while blurring the faces in the process.
 
 
 
 
As you can see, all parts of the images are still clear while the faces in the picture were automatically detected and pixelated by Cloudinary.
 
Same example in Ruby on Rails, Django, Node.js and PHP:
 
<%= cl_image_tag("couple.jpg", :effect => "pixelate_faces", :width => 200, 
                 :height => 200, :crop => :thumb, :gravity => :faces, :radius => 20) %>
{% cloudinary "couple.jpg" effect="pixelate_faces" width=200 height=200 
              crop="thumb" gravity="faces" radius=20  %}
cloudinary.image("couple.jpg", { effect: "pixelate_faces", width: 200, 
                 height: 200, crop: "thumb", gravity: "faces", radius: 20})
<?php echo cl_image_tag("couple.jpg", array("effect" => "pixelate_faces", 
                        "width" => 200, "height" => 200, "crop" => "thumb", 
                        "gravity" => "faces", "radius" => 20)) ?>
 
With the pixelate faces effect, you can pixelate one or more faces automatically. You can even pixelate the faces of a whole soccer team as seen in the example below. Here, Cloudinary automatically fetches the remote image from Wikimedia Commons and applies the pixelate faces effect before delivery through a CDN:
 
 
 
If you are a Spanish or a European football fan, you probably recognized all players in the picture despite the heavy pixelization :) 
 
As with the pixelate effect, the pixelate_faces effect also supports specifying the number of pixels to use for each pixelization block. The following example applies a 4-pixels effect on the same remote image for making it easier for you to recognize the players...
 
 
  

Face Blurring as Incoming Transformation 

For simplicity, all the examples given above were applied on the images on-demand. A user, looking at the image source, may craft a URL that does not include the blur. 
 
To prevent access to the original image, you should apply the pixelate effect as part of an incoming transforming while uploading the image to Cloudinary and before it is stored in the cloud for delivery. Alternatively, you can also upload images as private images as we described in a previous blog post

Summary 

We've had great fun introducing this feature, and personally think it's quite cool :)
 
Sites with user generated content, news sites and dating sites might find this feature very useful. Note however that automatic face detection is not perfect, and faces might not be detected and pixelated if the face in the picture is not clear enough. If you are going to incorporate face blurring in your system, you might want to introduce it as a part of a semi-automatic moderation system. By suggesting the automatically censored photo to a human moderator, you will save lengthy manual image processing time, while allowing the moderator to override incorrectly censored photos.
 
This feature was actually not in our original plans or to-do list. It was requested by one of our clients. Thankfully, the Cloudinary system was built with enough flexibility to introduce this new feature in no time. We were especially lucky to be able to reuse many existing building blocks - face detection, image effects support, best of breed image manipulation software and more.
 
If you need a yet unsupported cloud-based image transformation for your own web application, why don't you go ahead and challenge us?

Recent Blog Posts

Cloudinary Product Gallery Enables Dynamic Buyer Experience

We live in a world where we spend increasingly more time online. As our routines change and adapt to new trends and technologies, we perform more and more of our daily activities in virtual environments. A key example of this is shopping. There are many reasons why online shopping has become so attractive for many buyers. A near endless variety of products is accessible from the palm of your hand. Customer reviews give buyers more confidence in their decisions. It's increasingly easy to search for attractive prices. And the list goes on. But a customer's desire to "touch" or "feel" the product is an interactive experience that can be hard to overcome when shopping online.

Read more
A Guide to Website Image Optimization and Performance

Part 1 of this series delves into the background for this guide. Here in part 2 are the ins and outs.

Wait, hear me out. I know, we just talked about this: Nobody is sheepishly pleading you, “Please, might we have just one more image on the page?” No, I’m not telling you to pick that particular fight. Instead, use a little smoke and mirrors to avoid requests for images that your audience needn’t render right away and might never need at all while loading them asynchronously—only as needed.

Read more
A Guide to Image Optimization for Website Performance

I’ve spent a lot of time thinking about the rules of putting images on the web.

For such a flexible medium as the web, software development can feel like a painstaking, rules-oriented game—an errant comma might break a build, a missing semicolon might wipe out an entire page. For a long time, the laws of image rendering seemed similarly cut-and-dry: For example, if your markups contained an img element , the singular content of its src attribute would be foisted on the audience regardless of their browsing context, period.

Read more
Digital Asset Management Platform: Meeting Customer Expectations

Consumers today expect media-rich experiences. No longer a novelty, it’s second nature to swipe through multiple photos on mobile apps, zoom in on product images for a closer look, visualize online travel reviews, socialize cool video clips while browsing, and encounter brand messages when walking into brick-and-mortar stores. These experiences weave together visual cues and clues with relevant content to create meaning and more authentic connections for customers.

Read more
How to Customize Cloudinary's eCommerce Android App

Recently we added the Cloudinary Demo - eCommerce App to the Google Play Store. This app demonstrates the best practices for optimal delivery of images on a storefront, including category pages, product pages, and a shopping cart. At the time, we published Introducing the Cloudinary Demo Android App, Part 1, which provided an under-the-hood tour of how the eCommerce Android App was designed and how Cloudinary was integrated throughout.

Read more