Cloudinary Blog
Learn More

Windows Azure add-on for cloud-based image management

Apr 23, 2013 by Nadav Soferman
Tags: Feature, Partnership, Azure, PaaS, DotNet, PHP, Django, Node, Java
Call us prejudice, but as a hardcore Linux guys, the name Microsoft always caused us to flinch a little. That was our initial reaction when we were approached by the Azure team. We have been integrating Cloudinary with many PaaS providers to make our platform as accessible as possible, and Azure actually made perfect sense. Still, we were a bit hesitant at first as we never considered Microsoft a leading player in the world of rapid web & mobile development. 
 
As you may have figured out, we were very impressed by Microsoft's Windows Azure cloud platform and the great team behind it. The Windows Azure platform boasts powerful built-in support for modern development frameworks popular among both enterprises and small startup companies. You can deploy your web and mobile applications in Azure's class using PHP, Python & Django, Node.js, Java and of course .NET.
 
 
 
 
With this in mind - we are very excited to announce Cloudinary's add-on for the Windows Azure cloud platform.
 

What does Windows Azure offer? 

Azure is a PaaS that offers cloud-based deployment and hosting for your web-based applications. Azure also offers virtual machines for running your apps, a hosted & managed SQL database, cloud-based storage and more. All of this is smoothly integrated with visual studio and can be managed via a powerful web interface.
 
Last but not least, the Windows Azure Store offers plenty of add-ons to enhance your applications.
 

What do we get when using Cloudinary as an Azure Add-on?

Cloudinary's Azure add-on allows you to easily upload your web application images to the cloud. Your images are stored on a safe and highlighly available location with automatic backups and historical revisions.
 
Once on Cloudinary, you can manipulate and transform your images in the cloud to match your graphic design: resize, crop, alter shape, apply effects, add watermarks and more without installing any software on your side. All your images are automatically optimized and delivered to your website visitors through a fast, world-wide CDN with advanced content caching.
 
Cloudinary is easy to integrate with and offers open-source client integration libraries for your PHP, Python & Django, Node.js, Java and .NET applications.
 
You can register to your Cloudinary account from within the Azure portal using just a few clicks. Registration and integration is free and you can upgrade to a paid plan once your application gains traction and requires larger resource quotas.
 
 
 
 
If you want to see how easy to use and how powerful Cloudinary is, check out this integration guide. 
 
So whether you are a Microsoft fan or just looking for a great cloud service provider, you should take time to check out Windows Azure. Once there, if you need a cloud-based solution for image uploading, storage, manipulation, optimization and delivery, make sure you add Cloudinary to your list of add-ons.
 

Automatic image sharpening and blurring in the cloud

Mar 20, 2013 by Nadav Soferman
Tags: Feature, Image-transformation, Ruby-on-Rails, Django, PHP, Node, DotNet
Images. Your web (or mobile) application is probably filled to the brim with images. You might be surprised at just how much impact these images have on your visitors. From their graphical appeal to their size and access times - these images determine your visitors browsing experience and ultimately their conversion to repeating visitors and paying clients.
 
Now, while your graphic designer has created a cool graphical concept, many of the images you need to embed inside it are not in your direct control. Social websites contain profile photos uploaded by their users. E-commerce solutions contain many product photos that can't be edited one at a time. Media outlets contain many photographs of different consistency.
 
Having a tool in your belt that offers automatic tweaks and retouches for all these images is quite handy. Here a couple of things you can do with Cloudinary that can really improve your website.

Image sharpening

How can you make your website "pop"? it's easy if you control the exact content across your web application - a great graphics design can make wonders. But what can we do to improve user uploaded images? 
 
Let's look look at the following image uploaded to Cloudinary:
  
 
The photo looks good. But just take a look at what a bit of sharpness can do to it. 
You can add sharpness by setting the effect transformation parameter to sharpen (or e_sharpen for URLs):
 
 
 
Here's the same example in Rails:
<%= cl_image_tag("front_face.jpg", :effect => "sharpen") %>
You can control the strength of the sharpen effect to match your taste. Here's a more intense sharpening of the same image by setting the sharpen level to 300. Quite a nice photographic effect.
 
 

 
Same example in PHP:
<?php echo cl_image_tag("front_face.jpg", array("effect" => "sharpen:300")) ?>
Sharpening is also useful in making text elements in thumbnails clearer. For example, the following screenshot was uploaded to Cloudinary. As you can see the small gray text snippets are not so clear here.
 
 
 
 
Sharpening such an screenshot would make the text more readable. The following example sharpened this image. This time using the unsharp_mask effect that is similar to sharpen but uses a different algorithm. Much more readable:
 
 
 
 
Same example in Django:
img = cloudinary.CloudinaryImage("front_face.jpg")
img.image(effect="unsharp_mask")

Image blurring

Image sharpening is useful for improving images and making them "pop". But sometimes you would want to aim for the opposite effect. Quora, for example, is using dynamically created blurred snippets of text if you're browsing an answer while being logged out. How can you do that using Cloudinary?
 
To blur images, you can use Cloudinary's blur effect (e_blur for URLs). Here's an example: 
 
 
 
 
You can also make the blurring more intense by passing a numeric level. The following example applies the blur effect with a 400 intensity on the sample image:
 
 
 
In the following example, we blurred the image intensely and also reduced its opacity. Then we added a text overlay that calls users to sign up to your site if they want to view the full content:
 
 
 
Sample example in Rails:
<%= cl_image_tag("front_face.jpg", 
                 :overlay => "text:bold_dark:Sign up to see more",
                 :gravity => :center,  
                 :transformation => {:effect => "blur:500", :opacity => 50}) %>
Sometimes you want to blur only a certain region of an image. You can use the blur_region effect together with exact coordinates specified by x, y, width and height parameters. Here's an example that blurs only part of an uploaded screenshot:
 
 
 
Same example in Node.js:
cloudinary.image("front_face.jpg", { effect: "blur_region", x: 0, y: 0.5, w: 1.0 });
You can also automatically blur all faces detected in an image using Cloudinary's blur_faces. In the following example the face was automatically detected and blurred using the default level:
 
 
 
Same example in .NET:
string url = cloudinary.Api.UrlImgUp.Transform(
  new CloudinaryDotNet.Transformation().Effect("blur_faces")).BuildUrl("front_face.jpg");


Summary

Automatic image sharpening and blurring can do wonders to a website. For static assets, you can do that manually using your favorite image manipulation software. With Cloudinary such effects can be automatically applied to millions of user-uploaded images with ease. And if you decide to spruce up the graphical effects in your site's images, you can simply modify the transformation parameters in your development framework of choice. All images will be regenerated on the fly using the updated effect and will be served to your users optimized through a fast CDN.
 
It would be great if you try out the new filters and tell us when you think. If you don't have a Cloudinary account yet, you can create one for free.
 

cloudControl PaaS add-on for cloud-based image management

Jan 23, 2013 by Itai Lahan
Tags: Feature, Partnership, cloudControl, PaaS, Ruby-on-Rails, PHP, Django
More and more developers are getting to know the power of the cloud. In today's web application development world you can leverage the cloud to build large scale applications so quickly and easily that it's simply mind-boggling that you get all of this while still keeping on a very reasonable budget. 
 
For many developers, it took quite some time to overcome the natural not-invented-here syndrome and start trusting cloud services over the traditional in-house solutions. But it seems that we've already pass this hurdle and most recent web and mobile apps are counting heavily on cloud services to deliver them great solutions that cover important features, save crucial dev & support time, reduce dev costs and remove unnecessary development challenges.
 
Platform-as-a-Service (PaaS) is an a example of such a great cloud-based solution. In the PaaS case - moving your application deployment to the cloud. Simply write the code of your core application, run a command or two and you a have a fully working and scalable application available online. 
 
cloudControl is a popular european PaaS provider. Founded in 2009 in Germany, cloudControl provides a great solution for development and deployment of web applications in PHP, Ruby, Python and Java. 
 
 
Developers that manage their applications in a PaaS still needs to manage the image pipeline of their applications. This is where Cloudinary comes in. Today we are excited to announce that Cloudinary's add-on for cloudControl is available for the general public. Ruby on Rails developers? Django experts? PHP programmers? You can now develop and deploy your applications using cloudControl and use Cloudinary as an add-on in a single click or a simple command line.
 
With Cloudinary's add-on for cloudControl you can upload all your images to a highly available, safe and secured, backed-up cloud storage, perform various image transformation and manipulation in the cloud without installing any complex software and get all your images optimized and delivered to your users through a fast content delivery network (CDN) employing advanced caching techniques.
 
The add-on can be installed through cloudControl's portal:
 
 
We've prepared a detailed documentation for using Cloudinary as an add-on for cloudControl. Check out this documentation page for overview of the Cloudinary service, add-on installation and usage instructions, and integration guides for cloudControl's PHP, Ruby and Python platforms.
 
One of our targets is to make Cloudinary available to as many platforms as possible in the easiest-to-use way as possible. Today we are happy to add cloudControl to our family of high-end platform providers. It would be great if you try out cloudControl and Cloudinary's add-on. We'd appreciate your feedback.

Image opacity manipulation and dynamic watermark generation

Jan 17, 2013 by Nadav Soferman
Tags: Feature, Image-transformation, Ruby-on-Rails, Django, PHP, Node
Modifying an image opacity so the image is semi-transparent is a common requirement when implementing modern graphics design. Reducing image opacity allows background images to feel less dominant. Reducing opacity also allows layering of multiple images one on top of the other, an important step when adding watermarks, badges and textual overlays to images.
 
Modern web browsers support opacity manipulation via CSS directives. This however does not solve the problem completely. Watermarks need to be embedded as part of the original image and can't be added on the client's side. In addition, manipulating the opacity of the image itself allows for a consistent view across all your service's mediums - website, mobile application, emails (notifications) and PDFs (reports). Emails in particular do not support many of the modern CSS directives.
 
In this blog post we wanted to show how you can use Cloudinary's cloud-based image transformations to easily manipulate the opacity of images and how to use this technique to add watermarks to images.
 

Dynamically changing Image Opacity

Let's look at the following image the was uploaded to the cloud using the 'mountain' public ID.
 
 
You might want to use an image like the one above as a background image for a section of your web or mobile application. Simply set the 'opacity' parameter (or 'o' for URLs) to the desired percentage and Cloudinary will automatically modify the opacity of the image on-the-fly. As always, the resulting image is stored persistently in the cloud  and delivered optimized and cached to your worldwide users through a fast CDN.
 
The following example reduced the mountain image opacity to 20%. Now you can safely place text and other graphical elements above this image.
 
 
 
Below are examples of generating a transformation URL with modified opacity using our client libraries for Rails, PHP, Django and Node.js: 
<%= cl_image_tag("mountain.jpg", :opacity => 20) %>
<?php echo cl_image_tag("mountain.jpg", array("opacity" => 20)) ?>
import cloudinary
img = cloudinary.CloudinaryImage("mountain.jpg")
img.image(opacity=20)
cloudinary.image("mountain.jpg", { opacity: 20 });
 

Grayed-out Logos

Another common graphic design practice is to display a list of logos of customers and partners in your web site. Instead of the original, colorful logos, many web designers prefer to display semi-transparent grayed versions of these logos so they don't take attention from the website's messaging. 
 
With Cloudinary you can dynamically gray out images, and easily modify them in case your graphic designer has a change of heart.
 
In the following example, we've uploaded multiple logos to Cloudinary. We've went further and used Cloudinary's sprite-generation capabilities to merge these logos into a single sprite image for better performance:
 
 
 
By simply setting the 'effect' parameter (or 'e' for URLs) to 'grayscale' and setting the 'opacity' parameter ('o' for URLs), Cloudinary generates a semi-transparent gray-scale version of the logos for embedding in your website:
 

 

Generating Watermarks

In a previous blog post, we've shown how you can easily add overlays to images. Such overlays could be used to add watermarks to images using a previously uploaded semi-transparent PNG image of such watermark. With the new opacity manipulation transformation, you can upload your non-transparent watermark image and manipulate its opacity dynamically to make it semi-transparent, ready for adding as a watermark overlay.
 
The following example adds the previously uploaded image 'cloudinary_icon' as a 200 pixels wide overlay above the mountain image:
 
 
 
Now, by setting opacity to 40%, the overlay becomes semi transparent:
 
 
 
 
 
You can also apply an effect or filter on the overlay. In the following example we've increased the brightness of the overlay to make it white and reduced opacity to 30%:
 
 
 
The code samples below detail how to build the same URL in Ruby, PHP, Django and Node.js:
 
<%= cl_image_tag("mountain.jpg", :opacity => 30, :effect => "brightness:20", 
                  :width => 200, :overlay => "cloudinary_icon") %>
<?php echo cl_image_tag("mountain.jpg", array("opacity" => 30, 
  "effect" => "brightness:20", "width" => 200, "overlay" => "cloudinary_icon")) ?>
import cloudinary
img = cloudinary.CloudinaryImage("mountain.jpg")
img.image(opacity=30, effect="brightness:20", width=200, overlay="cloudinary_icon")
cloudinary.image("mountain.jpg", 
  { opacity: 30, effect: "brightness:20", width: 200, overlay: "cloudinary_icon" });
 

Summary

Dynamic opacity manipulation and watermark generation are some of the newest Cloudinary capabilities in your image manipulation tool-belt. These capabilities further simplify your web and mobile applications tedious image management tasks. 
 
With a simple URL (or one line of code) you can generate images that match your ever evolving graphic requirements and deliver them quickly to your users. You don't have to deal with complex non-standard CSS directives and you don't have to use over-qualified graphical software like Photoshop to generate images in your desired color balance and opacity.
 
Please share your thoughts and let us know how we can further improve Cloudinary's growing feature set.

Adding borders to images

Nov 28, 2012 by Nadav Soferman
Tags: Feature, Image-transformation, Ruby-on-Rails, Django, PHP, Node
Graphic designers often contemplate whether to add borders to their website elements. The decision of whether to add borders around frames, buttons and text elements really depends on the feeling the designer is trying to convey through the design. 
 
In this blog post we wanted to tell you about a new cloud-based transformation available through Cloudinary - adding borders to images. Yes, you can use CSS3 or image masks to simulate borders around images, but the first is supported only on modern browsers and the latter clutters the HTML. In addition, if you plan on embedding images in emails or documents you can pretty much say goodbye to borders (certainly for images with rounded corners). For such cases, you can use Cloudinary's extremely simple image transformation API to add borders directly to the original image.
 
Consider the following photo. It was uploaded to Cloudinary using 'autumn_leaves' as its public ID:
 
 
Adding a border around the image is straightforward. Simply specify the 'border' parameter ('bo' for URLs) using a CSS-like format. In the following example '4px_solid_black' means a 4 pixels wide black border.
 
 
 
 
Same example in Ruby on Rails:
<% cl_image_tag("autumn_leaves.jpg", :width => 0.15, :crop => :scale, 
                :border => { :width => 4, :color => 'black' }) %>
 
The border's color component also accepts RGB format. The following example rounds the corners of the image using the 'radius' parameter ('r' for URLs) and adds a 6 pixels solid green border ('#00390b').
 
 
 
Same example in PHP:
<?php echo cl_image_tag("autumn_leaves.jpg", array("width" => 0.15, "crop" => "scale", 
       "radius" => 20, "border" => array("width" => 6, "color" => "#00390b"))) ?>
 
Cloudinary also supports adding semi-transparent borders. This is accomplished using the RGBA color format. The Alpha hex value ranges between 00 (fully transparent), to FF (opaque). The following example generates a semi transparent 10 pixels wide green border. We also use Cloudinary's chained transformations to make the image elliptic ('max' radius), rotate the image by 5 degrees and add an underlay blue background image (while resizing it and increasing its brightness).
 
 
 
Same example in Django:
import cloudinary
img = cloudinary.CloudinaryImage("autumn_leaves.jpg")
img.image(transformation=[
          dict(width=0.15, crop='scale', radius='max', 
               border=dict(width=10, color='#00390b60')), 
          dict(angle=5), 
          dict(underlay='site_bg', width=250, height=200, effects='brightness:50')])
And one last example - the following URL generates an image based on a Facebook profile picture that was automatically fetched by Cloudinary. The image is resized and rounded, and a black border is added. We then use an overlay to add Cloudinary's logo with a semi-transparent wide border. As with all of the Cloudinary managed images, the resulting image is persistently stored in the Cloud and then delivered and cached through a fast CDN.
 
 
 
By the way, you can also add the border as an incoming transformation so the original image is stored in the cloud already with the border. Here's such an incoming transformation, this time in Node.js:
cloudinary.image("itail.jpg", { type: 'facebook', transformation: [
                 { crop: 'fill', width: 150, height: 180, radius: 10, 
                   border: { width: 2, color: 'black'}},
                 { overlay: 'cloudinary_logo_white', width: 90, 
                   gravity: 'south_east', radius: 5, y: 7, x: 7, 
                   border: { width: 6, color: '#afcee990'}}]})

Summary

If you are a regular reader of our blog, you know that Cloudinary keeps enhancing on various fronts. One of these fronts is our ever increasing set of image manipulation capabilities. In this blog we introduced a cool new enhancement that you might find useful. We have more in our pipeline. If you want to see a new image manipulation capability added to Cloudinary, just drop us a line.

API for extracting semantic image data - colors, faces, Exif data and more

Nov 21, 2012 by Nadav Soferman
Tags: Feature, API, Ruby-on-Rails, Django, PHP, Node
When images are involved, web developers have a large set of relevant tools at their disposal. You can display images in your web sites and mobile applications. You can manipulate and transform such images using image editing and manipulation software or cloud-based solutions like Cloudinary. But there are other types of data embedded in image files that can add unique semantic information to the images and are hardly ever used.
 
Consider what new designs can appear if your graphics designer could assume that only blue themed user uploaded photos will be featured on your homepage. What about featuring only photos that show your users' faces? How about photos taken with new DSLR model cameras rather than older pocket ones? Only photos taken in the GPS vicinity of your website visitor? We believe that such capabilities can offer a new, important tool for web design and development. 
 
Unfortunately, such semantic data is usually locked safely within the images and rarely utilized by developers and designers. We hope that we can change that by introducing a new Cloudinary API that allows you to easily extract rich information regarding your website and mobile application's photos. Using this information you can search, sort and classify your images in amazing new ways.
 

Predominant Colors & Color Histogram

Image search services such as Google Image Search allow you to filter your image search to show only images of a certain color. How is it done? Each image is analyzed and the colors of the images are mapped to one or more leading colors.
 
Cloudinary now supports finding the leading colors of a given image using a standard palette of 12 main colors. Since Cloudinary is a cloud-based service, all image processing is done online and no software installation is required on your side.
 
Finding the predominant colors in an image is also useful for stock-photo sites that wants to allow you to narrow photo searching by colors (see our previous post of how-to quickly build a stock-photo site with Cloudinary) and for e-commerce sites. For example: if you have a fashion site, and you want your users to browse only blue or red shirts.
 
For example, the following image with the public ID 'fashion1' was uploaded to Cloudinary:
 
 
 
Using Cloudinary's Admin API, you can extract the photo's main colors by setting the 'colors' parameter to true (see reference documentation). Here are examples for Ruby, PHP, Node.js and Python:
Cloudinary::Api.resource('fashion1', :colors => true)
$api->resource("fashion1", array("colors" => TRUE));
cloudinary.api.resource('fashion1',  
                        function(result)  { console.log(result) }, { colors: true });
cloudinary.api.resource("fashion1", colors = True)
 
Below is the JSON result of this API call. It seems that the main colors of this image are white (50.7%) and blue (27.8%), with touches of gray and brown. Cool.
{
  "public_id": "fashion1",
  "width": 225,
  "height": 380,
  ...
  "predominant": {
    "google": [
      [ "white", 50.7 ],
      [ "blue",  27.8 ],
      [ "gray", 11.2 ],
      [ "brown", 5.1]
    ]
  }
}
Using this info, you can keep the color mapping in your model and allow clothes to be searched based on colors. Searching for blue clothes should return this product.
 
Another result you get as part of the color information API is a histogram of 32 RGB colors that best represent the image. The following JSON snippet was also included in the result of the API call.
{
  "public_id": "fashion1",
  ...
  "colors": [["#FFFFFF", 50.7], ["#011B43", 5.8], ["#5077A7", 4.9], ["#031235", 4.3], ["#F4CBB4", 3.3], ["#3A6498", 1.9], ["#6284AF", 1.9], ["#2D5E95", 1.9], ["#30578B", 1.8], ["#080918", 1.8], ["#E5B09D", 1.8], ["#36262F", 1.7], ["#264876", 1.6], ["#281A25", 1.5], ["#486A99", 1.4], ["#E3D6CF", 1.4], ["#4D3135", 1.4], ["#07264F", 1.2], ["#664E55", 1.1], ["#6E443C", 1.0]]
}
As you can see, you get RGB format and percentage breakdown of the 32 colors that best represent the image. '#FFFFFF' is white, representing around half of the image, followed by multiple blue shades (e.g., '#011B43' is 5.8%).
 

Face detection info 

Cloudinary supports face detection based cropping and pixelation. Either a single face or multiple faces can be automatically detected. Our API now supports returning additional information regarding the detected faces in an uploaded photo. 
 
Simply set the 'faces' parameter to true in the same method we showed above for 'colors'. Note that you can enable multiple flags in a single call for fetching all information at once. The result includes the exact coordinates of all detected faces, allowing you to easily find out how many faces are available in the photo and their exact positions.
 
The following Ruby command asks for the faces information of the 'fashion1' image:
Cloudinary::Api.resource('fashion1', :faces => true)
Here is the JSON result:
{
  "public_id": "fashion1",
  ...
  "faces": [[99, 21, 64, 87]]
}
 
As you can see, a single face was correctly detected. It is positioned in the 99,21 - 64,87 rectangle of the original image.
 
Same works for images with multiple faces:
 
{
  ...
  "faces":  [ [513, 19, 38, 52], [409, 26, 40, 54], [79, 31, 43, 59], [232, 32, 40, 54], [321, 33, 41, 57], [160, 37, 43, 59], [211, 153, 43, 59], [503, 151, 43, 59], [113, 162, 40, 54], [427, 160, 45, 61], [307, 172, 48, 65] ]
}
Note that face detection does not achieve 100% accuracy. If you need better accuracy, human moderation is recommended.
 

Camera information - Exchangeable image file format (Exif)

Modern digital cameras and smartphones store additional metadata as part of the image files you shoot. Such information includes picture orientation, timestamps, camera model information, photo exposure, GPS location and more.
 
By setting the 'exif' parameter to true, Cloudinary's API can return the image's metadata (see our reference documentation). In the sections above we've shown how to use the Admin API for fetching information of previously uploaded images. You can also request this information while uploading the photos, so it is returned as part of an upload response.
 
For example, the following PHP command uploaded to Cloudinary a photo that was taken by an iPhone 4 in a portrait orientation.
\Cloudinary\Uploader::upload("exif_sample.jpeg", 
   array("public_id" => "exif_sample", "colors" => TRUE, "exif" => TRUE))
 
Here is the JSON of the upload response including the requested Exif and Colors information:
{ 
  "public_id": "exif_sample",
  "width": 2592,
  "height": 1936,
  ...
  "exif": {
    "ApertureValue": "4281/1441",
    "ColorSpace": "1",
    "ComponentsConfiguration": "1, 2, 3, 0",
    "Compression": "6",
    "DateTime": "2010:12:27 11:17:34",
    "DateTimeDigitized": "2010:12:27 11:17:34",
    "DateTimeOriginal": "2010:12:27 11:17:34",
    "ExifImageLength": "1936",
    "ExifImageWidth": "2592",
    "ExifOffset": "204",
    "ExifVersion": "48, 50, 50, 49",
    "ExposureMode": "0",
    "ExposureProgram": "2",
    "ExposureTime": "1/4309",
    "Flash": "24",
    "FlashPixVersion": "48, 49, 48, 48",
    "FNumber": "14/5",
    "FocalLength": "77/20",
    "GPSAltitude": "20723/924",
    "GPSAltitudeRef": "0",
    "GPSImgDirection": "42155/344",
    "GPSImgDirectionRef": "T",
    "GPSInfo": "574",
    "GPSLatitude": "21/1, 768/100, 0/1",
    "GPSLatitudeRef": "N",
    "GPSLongitude": "86/1, 4500/100, 0/1",
    "GPSLongitudeRef": "W",
    "GPSTimeStamp": "17/1, 17/1, 3326/100",
    "ISOSpeedRatings": "80",
    "JPEGInterchangeFormat": "870",
    "JPEGInterchangeFormatLength": "9932",
    "Make": "Apple",
    "MeteringMode": "1",
    "Model": "iPhone 4",
    "Orientation": "6",
    "ResolutionUnit": "2",
    "SceneCaptureType": "0",
    "SensingMethod": "2",
    "Sharpness": "2",
    "ShutterSpeedValue": "4781/396",
    "Software": "4.2.1",
    "SubjectArea": "1295, 967, 699, 696",
    "WhiteBalance": "0",
    "XResolution": "72/1",
    "YCbCrPositioning": "1",
    "YResolution": "72/1"
  },
  "colors":[["#CBC9C5",10.2],["#C4BCB4",9.0],["#1888AB",6.0],["#202618",6.0],["#226391",5.4],["#223A62",4.3],["#B9B4AD",3.8],["#2F88A1",3.5],["#C9C3BA",3.4],["#7492B2",3.4],["#157193",3.1],["#96ABCC",2.9],["#C8B495",2.8],["#4F97AB",2.8],["#484033",2.7],["#669FAD",2.5],["#A0A29E",2.4],["#38A7C8",2.3],["#57A5B7",2.3],["#2D8FAF",2.2],["#ACCADC",2.1],["#073554",2.0],["#60AFC7",2.0],["#1D4A6F",2.0],["#A39477",1.9],["#D1C4A0",1.8],["#296F96",1.7],["#4F6E91",1.5],["#5F5F57",1.4],["#90AECB",1.0]],
  "predominant": {"google":[["teal",41.7],["brown",35.6],["blue",12.1],["green",8.4]]
}
By the way, you can also use Cloudinary's Exif-based automatic rotation by setting the 'angle' parameter ('a' for URLs) to 'exif'. For example:
 
 
 

Summary

With the additional knowledge of image metadata and semantic information, you can enhance your image rich web and mobile applications with little effort, while Cloudinary does all the heavy lifting for you. These additional layers of information adds an important aspect that allows Cloudinary to offer a better than ever cloud-based solution to all your online image management and manipulation needs. 
 
All these new features were requested by Cloudinary's users and we thank all of you for that. We have plenty more ideas for enhancing Cloudinary's capabilities in this area and would love to hear your feedback and suggestions.
 
The ability to fetch Exif, Faces, Predominant colors and Color histogram is now available to all of Cloudinary's plans, free and paid. Click here to setup a free Cloudinary account.

Engine Yard add-on for cloud-based image management

Oct 31, 2012 by Itai Lahan
Tags: Feature, Partnership, Engine-Yard, PaaS, Ruby-on-Rails, PHP, Node
When we first started working on Cloudinary we had a very simple goal in mind - offer a complete alternative to a set of rudimentary, repetitive, universally common web dev tasks. Tasks related to a website's image management needs.
 
As a web developer, you surely found yourself spending considerable time performing the same routine asset management tasks over and over again. Managing image uploads, transformations, manipulations, optimizations, caching and back-ups. Configuring a fast, highly available asset delivery solution. Same tasks, over and over again.
 
Cloudinary was built to streamline all of the above and we're very proud with what we've accomplished with Cloudinary so far. What started as a simple concept, turned out to be a great service that completely solves all your online image management tasks.
 
The fact that took us by surprise was the diversity of frameworks used by our customers. It sometimes felt that each new user has utilized his own web development stack. Ruby developers using Rails or Sinatra, PHP developer using one of the countless PHP frameworks, Python and Django developers, Node.js, Perl, Java, ASP, .NET, iOS, Android and many others.
 
It turns out that as complicated it is to build a highly scalable, highly usable service like Cloudinary, it's still only half of the story. The other half is offering our users a solution that is easy to integrate with their web dev platform of choice. 
 
Lately, we've been hard at work adding client side Cloudinary integration libraries for every major web dev platform and programming language. We've also kept a close eye on the state-of-the-art platform-as-a-service solutions that offered their users a single click integration solutions for a vast array of cloud-based services. Today, we've taken another important step on making Cloudinary even more accessible and easy to use.
 
Without further ado, we're happy to announce our partnership with Engine Yard. 
 
Engine Yard is a senior player in the PaaS field and one of the pioneers of the approach that took cloud computing a step forward: developers take care of the application development only, while Engine Yard takes care of the production platform. You no longer need to manage production servers and complex database architecture. Engine Yard is unique in this field in providing a full management solution for large scale platforms and high-end sites and applications.
 
 
With Engine Yard you have your application deployed in the cloud. Together with Cloudinary, your asset management is also moved into the cloud: upload images, automatically perform smart image resizing, cropping, overlay, watermark, apply effects, rotations, format conversions, without installing any complex software. All your images are then seamlessly delivered through a fast CDN, optimized and using industry best practices. Cloudinary offers comprehensive APIs and administration capabilities and is easy to integrate with new and existing web and mobile applications.
 
Together with Engine Yard, Cloudinary offers a very useful solution for a wide array of use-cases from simple websites, through early stage startups to large scale enterprise applications. If you are already an Engine Yard user, simply add Cloudinary's add-on to your Ruby, PHP and Node.js applications. Cloudinary’s account setup is done automatically for you and billing is handled through your standard Engine Yard payment method. Cloudinary offers a free Starter plan with plenty of room to grow, making it very straightforward to try it out.
 
 

Engine Yard users - want to start using Cloudinary?

  • Go to https://cloud.engineyard.com/addons or navigate to 'Add-ons' in Engine Yard Cloud and click on Cloudinary and start managing your images in the cloud!
  • Engine Yard automatically sets up the correct settings for using your Cloudinary account using the CLOUDINARY_URL variable. 
Ruby on Rails users - simply add the ey_config GEM to your project and add an initializer for Cloudinary's settings:
Cloudinary.config_from_url(EY::Config.get(:cloudinary, 'CLOUDINARY_URL'))
We will soon add additional documentation and sample code for simplifying the Cloudinary - Engine Yard integration even further. Any feedback on our new image management add-on for Engine Yard would be highly appreciated!

Cloud-based animated GIF generation

Oct 10, 2012 by Itai Lahan
Tags: Feature, Image-transformation, Ruby-on-Rails, Django, PHP, Node
Back in the 1990s, websites mainly comprised of static textual pages dashed with a few images to make them slightly more appealing. You could even disable image downloading in your browser to make pages load faster, quite unthinkable in today's websites.
 
In order to make web pages look more alive, developers started looking for animation solutions. Proprietary browser plugins started to appear, followed by a real usability breakthrough - the enhanced, 89a GIF format. As part of its many enhancements, this new format allowed for simple animation sequences. While initially supported only by the Netscape browser, using GIF to add animations has proved quite straightforward and soon became very popular.
 
The modern web supports animations using Flash and HTML5 techniques, but animated GIFs still persist as a way to to create simple, efficient, cross-browser animations. A recent example can be seen at one of the Internet’s greatest innovators and biggest HTML5 early adopter - Apple itself. If you scroll through Apple's iPad features page, you will notice animation scenes depicting the new iPad's capabilities. These animations aren't based on the HTML5 Video format. They are based on dozens of separate JPG images that are pre-loaded and displayed programmatically to achieve a smooth animation effect. In the Design page of Apple's iPhone 5, if you scroll down to the earbuds section, you will notice a smooth animation of rotating earbuds. Again, no videos were used here. This time a more complex solution based on HTML Canvas, JPG images and Javascript is used.
 
In this blog post we wanted to show you how to easily generate simple animations with Cloudinary and how to generate animated GIF files that are still very useful for short animation sequences.
 

Animation building blocks 

Consider the following two images that were uploaded to Cloudinary - a blue cloud icon and three arrows:
 
 
 
With Cloudinary overlays and chained transformations it is very easy to generate an image where the arrows appear above the cloud icon. The following URL first expands the cloud icon to a 280x150 image with white padding and then adds an overlay with the arrows in the top left corner:
 
 
 
We can use the custom overlay coordinates to position the arrows in a different location. We can also apply a brightness effect as the following example shows. The arrows are now positioned 150 pixels from the left. We also applied another cropping transformation to make sure that the final image remains 280x150 even if the arrows overflow outside the original canvas.
 
 
 
Quick side-note - don't you think it's quite amazing what you can accomplish so easily with Cloudinary? If you don't have an account already, you can go ahead and sign up for a free account, we'll wait... (and if we were back in the early 1990s, this link would probably be flashing red :-)
 

Generating Animations

You could probably already guess where we're aiming at. Using the previous overlay concepts and a simple script, we can now create an animation sequence depicting the arrows moving from left to right while growing lighter and lighter until disappearing.
 
The following Ruby script uses Cloudinary's Ruby GEM to generate 34 images that construct the frames of the animation. The same can be easily done using any of our other client libraries (PHP, Python, Node.js, etc.), or directly with our URL-based apis.
 
The script programmatically generates transformation URLs similar to the examples above. Horizontal (X) position of the arrows moving from -50 to 280. Brightness effect increasing while X position increases. The URL is then given to Cloudinary's upload API call to generate a new image based on the given transformation. 
(-5..28).each_with_index do |x, index|
  url = Cloudinary::Utils.cloudinary_url("cloud_icon_right.png", 
   :width => 280, :height => 150, :crop => :crop, :gravity => (x < 0 ? :east : :west),
   :transformation => [
     { :width => 280, :height => 150, :gravity => :west, :crop => :pad },
     { :overlay => "arrows_right", :x => x * 10, :y => 0, :gravity => :west, 
       :effect => (x > 7 ? "brightness:#{(x-7)*4}" : nil) }
   ])
 
  Cloudinary::Uploader.upload(url, 
                :public_id => "arrow_animation_#{index.to_s.rjust(2, "0")}", 
                :tags => "arrow_animation")   
end
Executing the script above, generated 34 images in the cloud. All these images have a public ID formatted as arrow_animated_XX. For example, here's the thirteenth generated frame:
 
 
 
All generated images were assigned with the tag arrow_animation. If you are familiar with Cloudinary, you probably know that a tag can be used to generate a 'sprite' - a single image merging together all images of the same tag. Click on the following links to view the sprite image and generated CSS. You can see all the animation frames in this sprite. 
 
 
As mentioned, Cloudinary now supports easy animated GIF generation. All images sharing a tag can be merged into a single animated GIF, sorted alphabetically by their public IDs.
 
And here it is, the animated GIF generated using an amazingly simply URL. As always, the final image is generated on-the-fly in the cloud and is then cached and delivered through a fast CDN:
 
 
 
This animation might be a little too slow. You can use the 'delay' parameter to change that. The parameter accepts the delay between frames, in milliseconds. Here is a much faster example:
 
 

Summary

Animated GIFs might be a little restrictive with their small 8 bit indexed color space and inefficient lossless compression. Still, these can be quite indispensable in various occasions. 
 
We've shown you how you can programmatically achieve powerful transformations, frame generation and GIF-based animations, easily and efficiently. We hope that these building blocks will be useful for your projects. We're sure that they will give you some interesting ideas of what you can accomplish with Cloudinary!

RESTful API for managing your website's images and other online assets

Oct 09, 2012 by Tal Lev-Ami
Tags: Feature, API, Ruby-on-Rails, Django, PHP, Node
Different online services, websites and mobile applications have very different image management requirements. Despite the differences, the image management pipeline boils down to the same basic formula - upload the images, normalize them, store them and manipulate them to create derivatives (thumbnails, effects, watermarks, etc.). Afterwards, prepare them for delivery and make sure they are accessible to your users quickly and efficiently when browsing your website or using your mobile app.
 
When we set out to build Cloudinary, we envisioned a platform that could streamline an online service's entire asset management pipeline needs. We developed a simple yet powerful URL based API and made integration even simpler using client integration libraries for many web dev platforms and programming languages. It was a joy to see how each of our clients found new ways of utilizing our platform, hooking different API calls to solve scenarios we could barely imagine when Cloudinary was first conceived.
 
In the regular flow of web applications, this works perfectly. But sometimes, you'll want even more fine grained control over your online assets - browse through user uploaded images, find specific images, delete images, delete transformations and more. If you already tried Cloudinary, you probably know that you can use our Management Console for manually achieving such tasks via our web-based user interface. But as many of our customers told us and frequently requested, more control is sometimes required than what they can currently achieve manually.
 
Today, we've made another important step in making the Cloudinary platform even more customizable. 
 
Without further ado, we'd like to welcome Cloudinary's powerful new administrative API, an intuitive RESTful HTTP API for programmatically managing all of your Cloudinary hosted assets.
 

Supported Operations

When building the API, we did our best to cover all common management tasks:
  • Listing all uploaded images and raw files.
  • Receiving details and metadata for uploaded images, including timestamps, format, dimensions, etc.
  • Listing the derived images of uploaded images.
  • Finding all images that share a given tag.
  • Listing all transformations.
  • Listing tags.
  • Receiving transformation details.
  • Creating named transformations.
  • Updating an existing transformation.
  • Deleting images, raw files, derived images and transformations.
 

API Overview

The API is accessed using HTTPS to endpoints in the following format:
 
https://api.cloudinary.com/v1_1/:cloud_name/:action
 
For example, resource listing of the 'demo' account:
 
https://api.cloudinary.com/v1_1/demo/resources/images
 
Authentication is done using Basic Authentication over secure HTTP. Your Cloudinary API Key and API Secret are used for the authentication.
 
Request parameters are appended to the URL. The response is in a simple JSON snippet. Like any REST API, read-only requests are sent in HTTP GET while write requests are sent in PUT, POST and DELETE. 
 
For more details, check out our documentation page.
 
Our client libraries provide an easy to use wrapper for this URL-based API, utilizing your native programming language of choice. Request building and authentication are done automatically, and the JSON response is parsed and returned. 
 

Usage Examples

 
The following Ruby example lists all your Cloudinary hosted images:
$ result = Cloudinary::Api.resources
=> {"resources"=>
  [{"public_id"=>"sample1", 
    "format"=>"png",
    "version"=>1349196740, 
    "resource_type"=>"image", 
    "type"=>"upload",
    "created_at"=>"2012-10-02T16:52:20Z",
    "bytes"=>71376, "width"=>261, "height"=>253,
    "url"=>
     "http://res.cloudinary.com/sam/image/upload/v1349196740/sample1.png",
    "secure_url"=>
     "https://d3jpl91pxevbkh.cloudfront.net/sam/image/upload/v1349196740/sample1.png"},
   {"public_id"=>"sample2", 
    "format"=>"png",
    "version"=>1349196732, 
    "resource_type"=>"image", 
    "type"=>"upload",
    "created_at"=>"2012-10-02T16:52:12Z",
    "bytes"=>133171, "width"=>278, "height"=>432,
    "url"=>
     "http://res.cloudinary.com/sam/image/upload/v1349196732/sample2.png",
    "secure_url"=>
     "https://d3jpl91pxevbkh.cloudfront.net/sam/image/upload/v1349196732/sample2.png"},
 
    ... 
],
 "next_cursor"=>"e39ef944e18cfda7deafa4aea96791e7"}
Here's the same example in PHP:
require "cloudinary.php" ;
require "api.php" ;
$api = new \Cloudinary\Api();
$result = $api->resources();
Python:
import cloudinary.api
result = cloudinary.api.resources()
And Node.js:
var cloudinary = require('cloudinary');  
cloudinary.api.resources(function(result)  { console.log(result) });
By default, 10 results are returned in a single request. You can specify the max_results parameter if you want more results in a single request. You can use this in conjunction with the next_cursor parameter for paginating through all your assets.
 
The next example shows how to get the full details of a single uploaded image, including the list of its derived images:
$ result = Cloudinary::Api.resource("sample1")
=> {"public_id"=>"sample1",
 "format"=>"png",
 "version"=>1349196740,
 "resource_type"=>"image",
 "type"=>"upload",
 "created_at"=>"2012-10-02T16:52:20Z",
 "bytes"=>71376, "width"=>261, "height"=>253,
 "url"=>
  "http://res.cloudinary.com/sam/image/upload/v1349196740/sample1.png",
 "secure_url"=>
  "https://d3jpl91pxevbkh.cloudfront.net/sam/image/upload/v1349196740/sample1.png",
 "next_cursor"=>"f329da74de2a9ac9cbf99d2a6bc147b8",
 "derived"=>
  [{"transformation"=>"c_fill,h_50,r_20,w_70",
    "format"=>"png",
    "bytes"=>7313,
    "id"=>"a3b44a715c63f7ee91f11fb20b97c5df",
    "url"=>
     "http://.../sam/image/upload/c_fill,h_50,r_20,w_70/v1349196740/sample1.png",
    "secure_url"=>
     "https://.../sam/image/upload/c_fill,h_50,r_20,w_70/v1349196740/sample1.png"},
   {"transformation"=>"c_fill,h_75,w_75/jpg",
    "format"=>"jpg",
    "bytes"=>2889,
    "id"=>"7c0ca85b966b928179ce336fa2a7d1f8",
    "url"=>
     "http://.../sam/image/upload/c_fill,h_75,w_75/v1349196740/sample1.jpg",
    "secure_url"=>
    "https://.../sam/image/upload/c_fill,h_75,w_75/v1349196740/sample1.jpg"}]}
And now, the same example in PHP: 
$result = $api->resource("sample1");
Python:
cloudinary.api.resource("sample1")
And Node.js:
cloudinary.api.resource("sample1", function(result)  { console.log(result) })
One final example - getting the details of a single transformation, including a list of all images assigned to this transformation:
$ result = Cloudinary::Api.transformation("c_fill,h_75,w_75/jpg")
 
=> {"name"=>"c_fill,h_75,w_75/jpg",
       "allowed_for_strict"=>false,
       "used"=>true,
        "info"=>[{"width"=>75, "height"=>75, "format"=>"jpg", "crop"=>"fill"}],
        "derived"=>
  [{"public_id"=>"sample1",
    "resource_type"=>"image",
    "type"=>"upload",
    "format"=>"jpg",
    "url"=>
     "http://.../sam/image/upload/c_fill,h_75,w_75/v1349196740/sample1.jpg",
    "secure_url"=>
     "https://.../sam/image/upload/c_fill,h_75,w_75/sample1/sample1.jpg",
    "bytes"=>2889,
    "id"=>"7c0ca85b966b928179ce336fa2a7d1f8"},
  ...
]}
As you can see, the new API is quite powerful. Using this API allows for full control of all uploaded raw files and images, fetched social profile pictures, generated transformations and more. 
 
For more examples and a full reference, see our detailed documentation.
 

Usage Limits 

You can use the new API quite extensively. We ask for that you keep your ongoing API requests to 500 per hour (12,000 daily). If you require more flexible limits, don't hesitate to contact us.
 
For each API call, standard HTTP headers are returned with details on your current usage statistics, including your per-hour limit, remaining number of actions and the time the hourly count will be reset.
 
Here is how these headers might look like:
 
    X-FeatureRateLimit-Limit: 500
    X-FeatureRateLimit-Remaining: 499
    X-FeatureRateLimit-Reset: Wed, 03 Oct 2012 08:00:00 GMT
 
Note that our client libraries provide easy access to the returned limit headers. In Ruby for example:
$ result = Cloudinary::Api.resource_types
 => {"resource_types"=>["image"]} 
$ result.rate_limit_allowed
 => 500 
$ result.rate_limit_reset_at
 => 2012-10-03 10:00:00 +0200 
$ result.rate_limit_remaining
 => 499  
 

Summary 

The new admin API is available for all our free and paid plans. It would be great if you try it out, and tell us what you think. 
We have interesting ideas on how to further enhance this new API. If your want to be in the loop, go ahead and subscribe to our blog or Like Cloudinary on Facebook, and receive our timely updates.

Automatic face-blurring in images made easy

Sep 11, 2012 by Nadav Soferman
Tags: Feature, Image-transformation, Ruby-on-Rails, Django, PHP, Node
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.
 
 
 
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.
 
 
 
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?
More posts...