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

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
Optimizing Video Streaming and Delivery: Q&A with Doug Sillars

Doug Sillars, a digital nomad and a freelance mobile-performance expert, answers questions about video streaming and delivery, website optimization, and more.

Doug Sillars, a freelance mobile-performance expert and developer advocate, is a Google Developer Expert and the author of O’Reilly’s High Performance Android Apps. Given his extensive travels across the globe—from the UK to Siberia—with his wife, kids, and 11-year-old dog, Max, he has been referred to as a “digital nomad.” So far in 2018, Doug has spoken at more than 75 meetups and conferences!

Read more