Cloudinary Blog

Automatically and accurately remove red eye from user uploaded photos

Automatic and accurate red eye removal with Cloudinary

Update - April 2016: The add-on described in this post is no longer available since ReKognition terminated their services. However, all features described here are still available via a different and even better add-on by Microsoft. See Facial attribute detection with Microsoft's Face API and the Advanced facial attributes detection add-on documentation.

Red eye often happens due to the use of flash in low light conditions as the light hits the eye very quickly and into the retina. It then bounces off of the back of the eye and emits a red color due to the blood vessels there. Although more professional modern cameras and flashes generally prevent this from happening, red eye may still occur with simpler, smaller cameras (including smartphones). There are various software solutions for red eye removal available on mobile devices and desktops, some of which require manual processing to get good results.

Obviously, it would be much faster and more convenient if this process were fully automatic, especially when dealing with a bulk of images that is uploaded by your web or mobile application’s users.

Cloudinary allows developers to automate red eye removal for websites and web applications. This especially comes in handy for social networks where users want their uploaded pictures to look as good as possible when they are shared among their family and friends.

How-to perform red eye removal

Cloudinary's rich manipulation capabilities allow you to further enhance users’ uploaded photos with options such as face detection-based cropping, resizing and rotating, increasing color saturation and more. With this new capability incorporated into Cloudinary’s image lifecycle management, developers can automate red eye removal by setting the effect parameter within Cloudinary's dynamic manipulation URLs to redeye. This enables smart red eye removal algorithms to be automatically applied on-the-fly to uploaded images.  

In the example below, the image on the left shows a scaled down version of an original image with red eyes and the image on the right shows a scaled down version of the original image with Cloudinary’s red eye removal feature dynamically applied.

Ruby:
cl_image_tag("itaib_redeye_msjmif.jpg", :effect=>"redeye")
PHP:
cl_image_tag("itaib_redeye_msjmif.jpg", array("effect"=>"redeye"))
Python:
CloudinaryImage("itaib_redeye_msjmif.jpg").image(effect="redeye")
Node.js:
cloudinary.image("itaib_redeye_msjmif.jpg", {effect: "redeye"})
Java:
cloudinary.url().transformation(new Transformation().effect("redeye")).imageTag("itaib_redeye_msjmif.jpg");
JS:
cloudinary.imageTag('itaib_redeye_msjmif.jpg', {effect: "redeye"}).toHtml();
jQuery:
$.cloudinary.image("itaib_redeye_msjmif.jpg", {effect: "redeye"})
React:
<Image publicId="itaib_redeye_msjmif.jpg" >
  <Transformation effect="redeye" />
</Image>
Angular:
<cl-image public-id="itaib_redeye_msjmif.jpg" >
  <cl-transformation effect="redeye">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("redeye")).BuildImageTag("itaib_redeye_msjmif.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("redeye")).generate("itaib_redeye_msjmif.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("redeye")).generate("itaib_redeye_msjmif.jpg")!, cloudinary: cloudinary)

Original image

Uploaded image with red eye removed

Here we used the same images as above (before red eye removal and after) to generate face detection based thumbnails. This, as well as red eye removal, can be done by embedding a dynamic manipulation URL and code (as shown below) from various development frameworks into your web page.

Ruby:
cl_image_tag("itaib_redeye_msjmif.jpg", :transformation=>[
  {:effect=>"redeye"},
  {:gravity=>"face", :width=>200, :height=>200, :radius=>"max", :crop=>"thumb"}
  ])
PHP:
cl_image_tag("itaib_redeye_msjmif.jpg", array("transformation"=>array(
  array("effect"=>"redeye"),
  array("gravity"=>"face", "width"=>200, "height"=>200, "radius"=>"max", "crop"=>"thumb")
  )))
Python:
CloudinaryImage("itaib_redeye_msjmif.jpg").image(transformation=[
  {'effect': "redeye"},
  {'gravity': "face", 'width': 200, 'height': 200, 'radius': "max", 'crop': "thumb"}
  ])
Node.js:
cloudinary.image("itaib_redeye_msjmif.jpg", {transformation: [
  {effect: "redeye"},
  {gravity: "face", width: 200, height: 200, radius: "max", crop: "thumb"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .effect("redeye").chain()
  .gravity("face").width(200).height(200).radius("max").crop("thumb")).imageTag("itaib_redeye_msjmif.jpg");
JS:
cloudinary.imageTag('itaib_redeye_msjmif.jpg', {transformation: [
  {effect: "redeye"},
  {gravity: "face", width: 200, height: 200, radius: "max", crop: "thumb"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("itaib_redeye_msjmif.jpg", {transformation: [
  {effect: "redeye"},
  {gravity: "face", width: 200, height: 200, radius: "max", crop: "thumb"}
  ]})
React:
<Image publicId="itaib_redeye_msjmif.jpg" >
  <Transformation effect="redeye" />
  <Transformation gravity="face" width="200" height="200" radius="max" crop="thumb" />
</Image>
Angular:
<cl-image public-id="itaib_redeye_msjmif.jpg" >
  <cl-transformation effect="redeye">
  </cl-transformation>
  <cl-transformation gravity="face" width="200" height="200" radius="max" crop="thumb">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("redeye").Chain()
  .Gravity("face").Width(200).Height(200).Radius("max").Crop("thumb")).BuildImageTag("itaib_redeye_msjmif.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .effect("redeye").chain()
  .gravity("face").width(200).height(200).radius("max").crop("thumb")).generate("itaib_redeye_msjmif.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("redeye").chain()
  .setGravity("face").setWidth(200).setHeight(200).setRadius("max").setCrop("thumb")).generate("itaib_redeye_msjmif.jpg")!, cloudinary: cloudinary)

Original thumbnail

Face detection based thumbnail with red-eye removed

Leveraging eye detection for more accurate red eye removal

In order to get even higher quality results, you can use Cloudinary’s ReKognition face attribute detection add-on for eye detection. Together with this add-on and the red eye removal effect, Cloudinary can automatically detect where eyes are located in a photo and apply the red eye removal algorithm in a more precise way. In order to do this, set the effect parameter of Cloudinary’s dynamic manipulation URLs to rek_redeye. Cloudinary's SDKs allow you to easily generate manipulation and delivery URLs in various development frameworks. Below is a sample dynamic manipulation URL and code to generate an HTML image tag that can be adjusted for various popular frameworks such as Ruby on Rails, PHP, Node.js, and more.

Following the examples above that simply underwent dynamic red eye removal, below is an original uploaded image that was cropped and underwent accurate red eye removal using Cloudinary’s ReKognition face attribute detection add-on.

Ruby:
cl_image_tag("tali_redeye_rvem1u.jpg", :effect=>"rek_redeye")
PHP:
cl_image_tag("tali_redeye_rvem1u.jpg", array("effect"=>"rek_redeye"))
Python:
CloudinaryImage("tali_redeye_rvem1u.jpg").image(effect="rek_redeye")
Node.js:
cloudinary.image("tali_redeye_rvem1u.jpg", {effect: "rek_redeye"})
Java:
cloudinary.url().transformation(new Transformation().effect("rek_redeye")).imageTag("tali_redeye_rvem1u.jpg");
JS:
cloudinary.imageTag('tali_redeye_rvem1u.jpg', {effect: "rek_redeye"}).toHtml();
jQuery:
$.cloudinary.image("tali_redeye_rvem1u.jpg", {effect: "rek_redeye"})
React:
<Image publicId="tali_redeye_rvem1u.jpg" >
  <Transformation effect="rek_redeye" />
</Image>
Angular:
<cl-image public-id="tali_redeye_rvem1u.jpg" >
  <cl-transformation effect="rek_redeye">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("rek_redeye")).BuildImageTag("tali_redeye_rvem1u.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("rek_redeye")).generate("tali_redeye_rvem1u.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("rek_redeye")).generate("tali_redeye_rvem1u.jpg")!, cloudinary: cloudinary)

Original image

Uploaded image with red eye removed using ReKognition eye detection

Final Notes

Cloudinary’s advanced image manipulation capabilities improve photo quality without any added effort on your side, and are fully integrated into Cloudinary's image management lifecycle. Simply add the parameters outlined above to an image’s CDN delivered URL and apply further effects, if desired, to adjust sharpness, color balance and more. The red eye removal feature is available with all of Cloudinary’s plans, including the free tier. You can use the ReKognition add-on eye detection effect by subscribing to the add-on itself. If you don't have a Cloudinary account yet, sign up for a free account here.

Update - April 2016: The add-on described in this post is no longer available since ReKognition terminated their services. However, all features described here are still available via a different and even better add-on by Microsoft. See Facial attribute detection with Microsoft's Face API and the Advanced facial attributes detection add-on documentation.

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