Cloudinary Blog

Happy New Year and a hat trick

Happy New Year and a hat trick

As the end of 2015 approaches, we wanted to share a quick summary of Cloudinary’s accomplishment this year and some of our plans for next year. We couldn't possibly do this without including an image manipulation example! That's our hat trick in the title :-)

Looking back at 2015

2015 was a great year for Cloudinary. We more than doubled our numbers, including our team size, offices, customers and revenues. During 2015 we’ve hit another significant milestone, crossing the eight-figures in annual run rate.

In 2015 we also released exciting new features and capabilities that our users have asked us for. Here are a few highlights:

This year for the first time, we shared some behind-the-scenes technical details and numbers. This post explains Cloudinary's bootstrapped way of organically building a profitable SaaS service. During 2015 we were also honored to add BVP (Bessemer Venture Partners) as a strategic investor. Cloudinary is BVP's 100th investment in cloud companies.

And now for a fun hat trick with image manipulations

Using Cloudinary you can add overlays on top of underlying images using image manipulation URLs. You can further control the look & feel of the overlays by applying multiple image transformations on them. Furthermore, you can use face detection and even eye detection for placing the overlays exactly above faces or other facial attributes (using the Advanced Facial Attributes Detection add-on). That covers everything needed to dynamically add hats to all the photos on your website or mobile application!

For example, let's take the following images that were uploaded to Cloudinary (thanks to our beloved Orly B.).

Orly Bogler's profile picture

Santa hat

The dynamic image manipulation URL below adds the Santa hat exactly above the auto detected eyes while rotating the hat to perfectly match Orly’s face. The hat is dynamically resized and padded in order to fit well as an actual hat.

Ruby:
Copy to clipboard
cl_image_tag("profile_orly_bogler.jpg", :transformation=>[
  {:overlay=>"santa_hat", :effect=>"trim"},
  {:gravity=>"north_east", :width=>1.0, :height=>2.45, :crop=>"lpad"},
  {:gravity=>"adv_eyes", :flags=>["region_relative", "layer_apply"], :width=>2.8, :crop=>"scale"}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("profile_orly_bogler.jpg", array("transformation"=>array(
  array("overlay"=>"santa_hat", "effect"=>"trim"),
  array("gravity"=>"north_east", "width"=>"1.0", "height"=>"2.45", "crop"=>"lpad"),
  array("gravity"=>"adv_eyes", "flags"=>array("region_relative", "layer_apply"), "width"=>"2.8", "crop"=>"scale")
  )))
PHP v2:
Copy to clipboard
(new ImageTag('profile_orly_bogler.jpg'))
  ->overlay(
      Overlay::source(Source::image('santa_hat')
        ->transformation((new ImageTransformation())
          ->reshape(Reshape::trim())
          ->resize(Resize::limitPad()->width(1.0)->height(2.45)->gravity(Gravity::compass(Compass::northEast())))
          ->resize(Resize::scale()->width(2.8)->regionRelative())))
      ->position((new Position())
        ->gravity(Gravity::focusOn(FocusOn::advancedEyes()))
  ));
Python:
Copy to clipboard
CloudinaryImage("profile_orly_bogler.jpg").image(transformation=[
  {'overlay': "santa_hat", 'effect': "trim"},
  {'gravity': "north_east", 'width': "1.0", 'height': "2.45", 'crop': "lpad"},
  {'gravity': "adv_eyes", 'flags': ["region_relative", "layer_apply"], 'width': "2.8", 'crop': "scale"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("profile_orly_bogler.jpg", {transformation: [
  {overlay: "santa_hat", effect: "trim"},
  {gravity: "north_east", width: "1.0", height: "2.45", crop: "lpad"},
  {gravity: "adv_eyes", flags: ["region_relative", "layer_apply"], width: "2.8", crop: "scale"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("santa_hat")).effect("trim").chain()
  .gravity("north_east").width(1.0).height(2.45).crop("lpad").chain()
  .gravity("adv_eyes").flags("region_relative", "layer_apply").width(2.8).crop("scale")).imageTag("profile_orly_bogler.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('profile_orly_bogler.jpg', {transformation: [
  {overlay: new cloudinary.Layer().publicId("santa_hat"), effect: "trim"},
  {gravity: "north_east", width: "1.0", height: "2.45", crop: "lpad"},
  {gravity: "adv_eyes", flags: ["region_relative", "layer_apply"], width: "2.8", crop: "scale"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("profile_orly_bogler.jpg", {transformation: [
  {overlay: new cloudinary.Layer().publicId("santa_hat"), effect: "trim"},
  {gravity: "north_east", width: "1.0", height: "2.45", crop: "lpad"},
  {gravity: "adv_eyes", flags: ["region_relative", "layer_apply"], width: "2.8", crop: "scale"}
  ]})
React:
Copy to clipboard
<Image publicId="profile_orly_bogler.jpg" >
  <Transformation overlay="santa_hat" effect="trim" />
  <Transformation gravity="north_east" width="1.0" height="2.45" crop="lpad" />
  <Transformation gravity="adv_eyes" flags={["region_relative", "layer_apply"]} width="2.8" crop="scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="profile_orly_bogler.jpg" >
  <cld-transformation :overlay="santa_hat" effect="trim" />
  <cld-transformation gravity="north_east" width="1.0" height="2.45" crop="lpad" />
  <cld-transformation gravity="adv_eyes" flags={["region_relative", "layer_apply"]} width="2.8" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="profile_orly_bogler.jpg" >
  <cl-transformation overlay="santa_hat" effect="trim">
  </cl-transformation>
  <cl-transformation gravity="north_east" width="1.0" height="2.45" crop="lpad">
  </cl-transformation>
  <cl-transformation gravity="adv_eyes" flags={{["region_relative", "layer_apply"]}} width="2.8" crop="scale">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("santa_hat")).Effect("trim").Chain()
  .Gravity("north_east").Width(1.0).Height(2.45).Crop("lpad").Chain()
  .Gravity("adv_eyes").Flags("region_relative", "layer_apply").Width(2.8).Crop("scale")).BuildImageTag("profile_orly_bogler.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("santa_hat")).effect("trim").chain()
  .gravity("north_east").width(1.0).height(2.45).crop("lpad").chain()
  .gravity("adv_eyes").flags("region_relative", "layer_apply").width(2.8).crop("scale")).generate("profile_orly_bogler.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("santa_hat").setEffect("trim").chain()
  .setGravity("north_east").setWidth(1.0).setHeight(2.45).setCrop("lpad").chain()
  .setGravity("adv_eyes").setFlags("region_relative", "layer_apply").setWidth(2.8).setCrop("scale")).generate("profile_orly_bogler.jpg")!, cloudinary: cloudinary)
Dynamic santa hat overlay using on-the-fly manipulation URL

An even more powerful capability is to add the same hat overlay to all the faces automatically detected in a photo. You may notice the different dimensions and rotation angles of each hat overlay that are automatically determined according to the detected position of the eyes. The example below uses similar image transformation instructions to add Santa hats to a group of Cloudinary's team taken at the AWS re:Invent conference.

Ruby:
Copy to clipboard
cl_image_tag("cloudinary_team.jpg", :transformation=>[
  {:overlay=>"santa_hat", :effect=>"trim"},
  {:gravity=>"north_east", :width=>1.0, :height=>2.3, :crop=>"lpad"},
  {:gravity=>"adv_eyes", :flags=>["region_relative", "layer_apply"], :width=>2.6, :crop=>"scale"}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("cloudinary_team.jpg", array("transformation"=>array(
  array("overlay"=>"santa_hat", "effect"=>"trim"),
  array("gravity"=>"north_east", "width"=>"1.0", "height"=>"2.3", "crop"=>"lpad"),
  array("gravity"=>"adv_eyes", "flags"=>array("region_relative", "layer_apply"), "width"=>"2.6", "crop"=>"scale")
  )))
PHP v2:
Copy to clipboard
(new ImageTag('cloudinary_team.jpg'))
  ->overlay(
      Overlay::source(Source::image('santa_hat')
        ->transformation((new ImageTransformation())
          ->reshape(Reshape::trim())
          ->resize(Resize::limitPad()->width(1.0)->height(2.3)->gravity(Gravity::compass(Compass::northEast())))
          ->resize(Resize::scale()->width(Expression::expression(2.6))
            ->regionRelative())))
      ->position((new Position())
        ->gravity(Gravity::focusOn(FocusOn::advancedEyes()))
  ));
Python:
Copy to clipboard
CloudinaryImage("cloudinary_team.jpg").image(transformation=[
  {'overlay': "santa_hat", 'effect': "trim"},
  {'gravity': "north_east", 'width': "1.0", 'height': "2.3", 'crop': "lpad"},
  {'gravity': "adv_eyes", 'flags': ["region_relative", "layer_apply"], 'width': "2.6", 'crop': "scale"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("cloudinary_team.jpg", {transformation: [
  {overlay: "santa_hat", effect: "trim"},
  {gravity: "north_east", width: "1.0", height: "2.3", crop: "lpad"},
  {gravity: "adv_eyes", flags: ["region_relative", "layer_apply"], width: "2.6", crop: "scale"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("santa_hat")).effect("trim").chain()
  .gravity("north_east").width(1.0).height(2.3).crop("lpad").chain()
  .gravity("adv_eyes").flags("region_relative", "layer_apply").width(2.6).crop("scale")).imageTag("cloudinary_team.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('cloudinary_team.jpg', {transformation: [
  {overlay: new cloudinary.Layer().publicId("santa_hat"), effect: "trim"},
  {gravity: "north_east", width: "1.0", height: "2.3", crop: "lpad"},
  {gravity: "adv_eyes", flags: ["region_relative", "layer_apply"], width: "2.6", crop: "scale"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("cloudinary_team.jpg", {transformation: [
  {overlay: new cloudinary.Layer().publicId("santa_hat"), effect: "trim"},
  {gravity: "north_east", width: "1.0", height: "2.3", crop: "lpad"},
  {gravity: "adv_eyes", flags: ["region_relative", "layer_apply"], width: "2.6", crop: "scale"}
  ]})
React:
Copy to clipboard
<Image publicId="cloudinary_team.jpg" >
  <Transformation overlay="santa_hat" effect="trim" />
  <Transformation gravity="north_east" width="1.0" height="2.3" crop="lpad" />
  <Transformation gravity="adv_eyes" flags={["region_relative", "layer_apply"]} width="2.6" crop="scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="cloudinary_team.jpg" >
  <cld-transformation :overlay="santa_hat" effect="trim" />
  <cld-transformation gravity="north_east" width="1.0" height="2.3" crop="lpad" />
  <cld-transformation gravity="adv_eyes" flags={["region_relative", "layer_apply"]} width="2.6" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="cloudinary_team.jpg" >
  <cl-transformation overlay="santa_hat" effect="trim">
  </cl-transformation>
  <cl-transformation gravity="north_east" width="1.0" height="2.3" crop="lpad">
  </cl-transformation>
  <cl-transformation gravity="adv_eyes" flags={{["region_relative", "layer_apply"]}} width="2.6" crop="scale">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("santa_hat")).Effect("trim").Chain()
  .Gravity("north_east").Width(1.0).Height(2.3).Crop("lpad").Chain()
  .Gravity("adv_eyes").Flags("region_relative", "layer_apply").Width(2.6).Crop("scale")).BuildImageTag("cloudinary_team.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("santa_hat")).effect("trim").chain()
  .gravity("north_east").width(1.0).height(2.3).crop("lpad").chain()
  .gravity("adv_eyes").flags("region_relative", "layer_apply").width(2.6).crop("scale")).generate("cloudinary_team.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("santa_hat").setEffect("trim").chain()
  .setGravity("north_east").setWidth(1.0).setHeight(2.3).setCrop("lpad").chain()
  .setGravity("adv_eyes").setFlags("region_relative", "layer_apply").setWidth(2.6).setCrop("scale")).generate("cloudinary_team.jpg")!, cloudinary: cloudinary)
Dynamic santa hat overlay on top of multiple automatically detected heads

As Christmas was last week, I guess a different hat is needed. The example below uses the same technique, specifying the ID of a party_hat instead of a santa_hat. This should better fit the upcoming New Year celebration.

Ruby:
Copy to clipboard
cl_image_tag("cloudinary_team.jpg", :transformation=>[
  {:overlay=>"party_hat", :effect=>"trim"},
  {:width=>1.4, :height=>1.0, :crop=>"scale"},
  {:gravity=>"north_east", :width=>1.0, :height=>2.3, :crop=>"lpad"},
  {:gravity=>"adv_eyes", :flags=>["region_relative", "layer_apply"], :width=>3.0, :crop=>"scale"}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("cloudinary_team.jpg", array("transformation"=>array(
  array("overlay"=>"party_hat", "effect"=>"trim"),
  array("width"=>"1.4", "height"=>"1.0", "crop"=>"scale"),
  array("gravity"=>"north_east", "width"=>"1.0", "height"=>"2.3", "crop"=>"lpad"),
  array("gravity"=>"adv_eyes", "flags"=>array("region_relative", "layer_apply"), "width"=>"3.0", "crop"=>"scale")
  )))
PHP v2:
Copy to clipboard
(new ImageTag('cloudinary_team.jpg'))
  ->overlay(
      Overlay::source(Source::image('party_hat')
        ->transformation((new ImageTransformation())
          ->reshape(Reshape::trim())
          ->resize(Resize::scale()->width(1.4)->height(1.0))
          ->resize(Resize::limitPad()->width(1.0)->height(2.3)->gravity(Gravity::compass(Compass::northEast())))
          ->resize(Resize::scale()->width(3.0)->regionRelative())))
      ->position((new Position())
        ->gravity(Gravity::focusOn(FocusOn::advancedEyes()))
  ));
Python:
Copy to clipboard
CloudinaryImage("cloudinary_team.jpg").image(transformation=[
  {'overlay': "party_hat", 'effect': "trim"},
  {'width': "1.4", 'height': "1.0", 'crop': "scale"},
  {'gravity': "north_east", 'width': "1.0", 'height': "2.3", 'crop': "lpad"},
  {'gravity': "adv_eyes", 'flags': ["region_relative", "layer_apply"], 'width': "3.0", 'crop': "scale"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("cloudinary_team.jpg", {transformation: [
  {overlay: "party_hat", effect: "trim"},
  {width: "1.4", height: "1.0", crop: "scale"},
  {gravity: "north_east", width: "1.0", height: "2.3", crop: "lpad"},
  {gravity: "adv_eyes", flags: ["region_relative", "layer_apply"], width: "3.0", crop: "scale"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("party_hat")).effect("trim").chain()
  .width(1.4).height(1.0).crop("scale").chain()
  .gravity("north_east").width(1.0).height(2.3).crop("lpad").chain()
  .gravity("adv_eyes").flags("region_relative", "layer_apply").width(3.0).crop("scale")).imageTag("cloudinary_team.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('cloudinary_team.jpg', {transformation: [
  {overlay: new cloudinary.Layer().publicId("party_hat"), effect: "trim"},
  {width: "1.4", height: "1.0", crop: "scale"},
  {gravity: "north_east", width: "1.0", height: "2.3", crop: "lpad"},
  {gravity: "adv_eyes", flags: ["region_relative", "layer_apply"], width: "3.0", crop: "scale"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("cloudinary_team.jpg", {transformation: [
  {overlay: new cloudinary.Layer().publicId("party_hat"), effect: "trim"},
  {width: "1.4", height: "1.0", crop: "scale"},
  {gravity: "north_east", width: "1.0", height: "2.3", crop: "lpad"},
  {gravity: "adv_eyes", flags: ["region_relative", "layer_apply"], width: "3.0", crop: "scale"}
  ]})
React:
Copy to clipboard
<Image publicId="cloudinary_team.jpg" >
  <Transformation overlay="party_hat" effect="trim" />
  <Transformation width="1.4" height="1.0" crop="scale" />
  <Transformation gravity="north_east" width="1.0" height="2.3" crop="lpad" />
  <Transformation gravity="adv_eyes" flags={["region_relative", "layer_apply"]} width="3.0" crop="scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="cloudinary_team.jpg" >
  <cld-transformation :overlay="party_hat" effect="trim" />
  <cld-transformation width="1.4" height="1.0" crop="scale" />
  <cld-transformation gravity="north_east" width="1.0" height="2.3" crop="lpad" />
  <cld-transformation gravity="adv_eyes" flags={["region_relative", "layer_apply"]} width="3.0" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="cloudinary_team.jpg" >
  <cl-transformation overlay="party_hat" effect="trim">
  </cl-transformation>
  <cl-transformation width="1.4" height="1.0" crop="scale">
  </cl-transformation>
  <cl-transformation gravity="north_east" width="1.0" height="2.3" crop="lpad">
  </cl-transformation>
  <cl-transformation gravity="adv_eyes" flags={{["region_relative", "layer_apply"]}} width="3.0" crop="scale">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("party_hat")).Effect("trim").Chain()
  .Width(1.4).Height(1.0).Crop("scale").Chain()
  .Gravity("north_east").Width(1.0).Height(2.3).Crop("lpad").Chain()
  .Gravity("adv_eyes").Flags("region_relative", "layer_apply").Width(3.0).Crop("scale")).BuildImageTag("cloudinary_team.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("party_hat")).effect("trim").chain()
  .width(1.4).height(1.0).crop("scale").chain()
  .gravity("north_east").width(1.0).height(2.3).crop("lpad").chain()
  .gravity("adv_eyes").flags("region_relative", "layer_apply").width(3.0).crop("scale")).generate("cloudinary_team.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("party_hat").setEffect("trim").chain()
  .setWidth(1.4).setHeight(1.0).setCrop("scale").chain()
  .setGravity("north_east").setWidth(1.0).setHeight(2.3).setCrop("lpad").chain()
  .setGravity("adv_eyes").setFlags("region_relative", "layer_apply").setWidth(3.0).setCrop("scale")).generate("cloudinary_team.jpg")!, cloudinary: cloudinary)
New-year party hat dynamically add to all detected people in the photo

Wouldn’t this be cool to try out on all of your websites’ photos for a single day? :-)

What's next?

We’re expecting to double our team size again in 2016, so we’ll be able to both tackle all the exciting new features and products on our road-map and continue to offer our customers the best service possible.

In 2016, Cloudinary will continue to help solve the Responsive Images challenges. We’ll take our video management solution to the next level, further enhance Cloudinary's DAM solution and media search capabilities, enhance our online Media Library and strengthen integrations with existing and new development frameworks. We’ll also be adding plenty more image and video manipulation & optimization capabilities.

Ever since we launched Cloudinary over 3.5 years ago, our customers’ needs were always our #1 priority. Keeping this in mind, the majority of the features we’ve added in 2015 were in a response to customer requests, so please keep the suggestions coming!

Happy New Year!

Recent Blog Posts

Why the Future of E-commerce Is Live

In a previous post, I discussed how “going live” is gaining popularity across industries and verticals. What began as a way for gamers to jam together has evolved into a medium for broader entertainment and business purposes. To continue the conversation, this post unpacks the current trends of shoppable live streams to shine a light on how brands are leveraging “lives” to connect with shoppers in new ways.

Read more
An Overview of Live-Streaming Video Trends

“Let’s go live.” For decades, that’s what newscasters say as they cut to real-time footage of a colleague reporting in the field. The live-video feed adds visual interest and perspective to a story beyond what can be communicated by someone sitting behind the news desk. In the same way, live-streaming video nowadays adds context to other consumer environments. From gaming and events to shopping and social media, “going live” enhances everyday experiences, and it’s something anyone can do with relative ease.

Read more
Readying Live Streams for Video on Demand

When planning a live broadcast or stream, companies often overlook the redistribution phase, but live-stream videos are useful well beyond their initial streaming. Why? Because not everyone watches the first run. For a wider audience, it makes sense to repost live content on your website under an “events” tab, on YouTube, and other social sites for video on demand (VOD). However, preparing footage for reposting can be a lot of work.

Read more
Optimize Visual Media for a Fast and Captivating Digital Experience

Did you know that humans process imagery 60,000 times faster than text? In fact, 90% of the information our brains process is visual, which makes it seem a no-brainer—pun intended—that brands are connecting with consumers through visual content online. However, adding media assets like images and videos to websites comes with a tradeoff: the more media, the heavier the site, which results in a noticeable slowdown in page loads and a reduction in content quality.

Read more