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.

Webinar
How to Optimize for Page Load Speed

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:
Copy to clipboard
cl_image_tag("itaib_redeye_msjmif.jpg", :effect=>"redeye")
PHP v1:
Copy to clipboard
cl_image_tag("itaib_redeye_msjmif.jpg", array("effect"=>"redeye"))
PHP v2:
Copy to clipboard
(new ImageTag('itaib_redeye_msjmif.jpg'))
  ->effect(Effect::redEye());
Python:
Copy to clipboard
CloudinaryImage("itaib_redeye_msjmif.jpg").image(effect="redeye")
Node.js:
Copy to clipboard
cloudinary.image("itaib_redeye_msjmif.jpg", {effect: "redeye"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("redeye")).imageTag("itaib_redeye_msjmif.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('itaib_redeye_msjmif.jpg', {effect: "redeye"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("itaib_redeye_msjmif.jpg", {effect: "redeye"})
React:
Copy to clipboard
<Image publicId="itaib_redeye_msjmif.jpg" >
  <Transformation effect="redeye" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="itaib_redeye_msjmif.jpg" >
  <cld-transformation effect="redeye" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="itaib_redeye_msjmif.jpg" >
  <cl-transformation effect="redeye">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("redeye")).BuildImageTag("itaib_redeye_msjmif.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("redeye")).generate("itaib_redeye_msjmif.jpg");
iOS:
Copy to clipboard
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:
Copy to clipboard
cl_image_tag("itaib_redeye_msjmif.jpg", :transformation=>[
  {:effect=>"redeye"},
  {:gravity=>"face", :width=>200, :height=>200, :radius=>"max", :crop=>"thumb"}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("itaib_redeye_msjmif.jpg", array("transformation"=>array(
  array("effect"=>"redeye"),
  array("gravity"=>"face", "width"=>200, "height"=>200, "radius"=>"max", "crop"=>"thumb")
  )))
PHP v2:
Copy to clipboard
(new ImageTag('itaib_redeye_msjmif.jpg'))
  ->effect(Effect::redEye())
  ->resize(Resize::thumbnail()->width(200)->height(200)->gravity(Gravity::focusOn(FocusOn::face())))
  ->roundCorners(RoundCorners::max());
Python:
Copy to clipboard
CloudinaryImage("itaib_redeye_msjmif.jpg").image(transformation=[
  {'effect': "redeye"},
  {'gravity': "face", 'width': 200, 'height': 200, 'radius': "max", 'crop': "thumb"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("itaib_redeye_msjmif.jpg", {transformation: [
  {effect: "redeye"},
  {gravity: "face", width: 200, height: 200, radius: "max", crop: "thumb"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .effect("redeye").chain()
  .gravity("face").width(200).height(200).radius("max").crop("thumb")).imageTag("itaib_redeye_msjmif.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('itaib_redeye_msjmif.jpg', {transformation: [
  {effect: "redeye"},
  {gravity: "face", width: 200, height: 200, radius: "max", crop: "thumb"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("itaib_redeye_msjmif.jpg", {transformation: [
  {effect: "redeye"},
  {gravity: "face", width: 200, height: 200, radius: "max", crop: "thumb"}
  ]})
React:
Copy to clipboard
<Image publicId="itaib_redeye_msjmif.jpg" >
  <Transformation effect="redeye" />
  <Transformation gravity="face" width="200" height="200" radius="max" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="itaib_redeye_msjmif.jpg" >
  <cld-transformation effect="redeye" />
  <cld-transformation gravity="face" width="200" height="200" radius="max" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
cl_image_tag("tali_redeye_rvem1u.jpg", :effect=>"rek_redeye")
PHP v1:
Copy to clipboard
cl_image_tag("tali_redeye_rvem1u.jpg", array("effect"=>"rek_redeye"))
PHP v2:
Copy to clipboard
This code example is not currently available.
Python:
Copy to clipboard
CloudinaryImage("tali_redeye_rvem1u.jpg").image(effect="rek_redeye")
Node.js:
Copy to clipboard
cloudinary.image("tali_redeye_rvem1u.jpg", {effect: "rek_redeye"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("rek_redeye")).imageTag("tali_redeye_rvem1u.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('tali_redeye_rvem1u.jpg', {effect: "rek_redeye"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("tali_redeye_rvem1u.jpg", {effect: "rek_redeye"})
React:
Copy to clipboard
<Image publicId="tali_redeye_rvem1u.jpg" >
  <Transformation effect="rek_redeye" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="tali_redeye_rvem1u.jpg" >
  <cld-transformation effect="rek_redeye" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="tali_redeye_rvem1u.jpg" >
  <cl-transformation effect="rek_redeye">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("rek_redeye")).BuildImageTag("tali_redeye_rvem1u.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("rek_redeye")).generate("tali_redeye_rvem1u.jpg");
iOS:
Copy to clipboard
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

Automate the Staging Process of Videos for Social Media

Rich and engaging media helps build customer engagement and trust but can be time consuming to stage. Developers save a tremendous amount of time by preparing videos for social media with Cloudinary. That’s because Cloudinary’s interface, widgets, and application programming interface (API) transform raw media into polished content, optimizing footage and enabling effortless customization and publishing.

Read more

Top Five Web-Video Formats of 2021

By William Imoh
The Five Most Popular Web-Video Formats and Streaming Protocols

Over the past 15 years, the video industry has undergone a significant change in video formats on the web. In particular, in the early 2010s, the 3GP format, which the 3rd Generation Partnership Project (3GPP) created for 3G-enabled mobile devices, went nearly extinct. The advancement of mobile devices and cellular networks has brought about the need for pioneers to build better formats for a faster user experience.

Read more
Cloudinary Introduces Integration With SAP Commerce Cloud

We’re excited to announce Cloudinary’s integration with SAP Commerce Cloud, through which the latter’s customers can significantly boost the visual media experience on their website or app.

SAP Commerce Cloud powers some of the largest e-commerce sites (B2C, B2B, and B2B2C businesses), complete with building blocks like storefront design and order management. Reinforced with Cloudinary’s laser-sharp focus on optimizing, managing, and delivering images and videos, the new extension will enable SAP Commerce Cloud customers to create unique and engaging visual experiences effortlessly.

Read more
Personalizing Video Email for Marketing Campaigns With Cloudinary

As critical as it is to engage with shoppers in order to succeed in e-commerce, old-style, boring emails are far from being effective. In fact, they tend to be annoying because no one likes to read formulaic, generic messages that are sent en masse. For better results, rethink your email marketing campaigns and try out creative strategies.

Read more
Muted Videos and Subtitles

The bane of our existence is the lack of efficient ways for tackling the plethora of recurring tasks in our lives. One of those tasks is surfing the internet. We consume a lot of web content daily, of which a large percentage are images and videos. We’re constantly quickly scrolling through 30-second videos or checking out pictures of cute items we’d like to buy in our free time.

Read more

Building a Roommate-Matching App With Cloudinary and Jamstack

By Marcelo Ricardo de Oliveira
Building a Roommate-Matching App With Cloudinary and Jamstack

Roommate matching can be a pain—especially during the COVID pandemic when people don't want to meet in person. Matching apps like Flatmates, Roomster, and roommates.com are helpful, and if you're in the roommate-matching space, you know that great video is essential for those seeking roommates. Fortunately, Cloudinary can help.

Read more