Cloudinary Blog

API for Extracting Semantic Image Data - Colors, Faces, Exif Data, and More

By Nadav Soferman
Extracting Metadata and Exif Data from Images via API
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 transform and transform such images using image editing and transformation 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 eCommerce 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:
Copy to clipboard
Cloudinary::Api.resource('fashion1', :colors => true)
Copy to clipboard
$api->resource("fashion1", array("colors" => TRUE));
Copy to clipboard
cloudinary.api.resource('fashion1',  
                        function(result)  { console.log(result) }, { colors: true });
Copy to clipboard
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.
Copy to clipboard
{
  "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.
Copy to clipboard
{
  "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:
Copy to clipboard
Cloudinary::Api.resource('fashion1', :faces => true)
Here is the JSON result:
Copy to clipboard
{
  "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:
 
Copy to clipboard
{
  ...
  "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)

**Update March 2017: The exif parameter has been deprecated. The exif data can now be extracted using the image_metadata parameter.
 
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 extract metadata from image's (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.
Copy to clipboard
\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:
Copy to clipboard
{ 
  "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 transformation 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, FacesPredominant colors and Color histogram is now available to all of Cloudinary's plans, free and paid. Click here to setup a free Cloudinary account.
 

Want to Learn More About Digital Asset Management?

Recent Blog Posts

Our $2B Valuation

By
Blackstone Growth Invests in Cloudinary

When we started our journey in 2012, we were looking to improve our lives as developers by making it easier for us to handle the arduous tasks of handling images and videos in our code. That initial line of developer code has evolved into a full suite of media experience solutions driven by a mission that gradually revealed itself over the course of the past 10 years: help companies unleash the full potential of their media to create the most engaging visual experiences.

Read more
Direct-to-Consumer E-Commerce Requires Compelling Visual Experiences

When brands like you adopt a direct–to-consumer (DTC) e-commerce approach with no involvement of retailers or marketplaces, you gain direct and timely insight into evolving shopping behaviors. Accordingly, you can accommodate shoppers’ preferences by continually adjusting your product offering and interspersing the shopping journey with moments of excitement and intrigue. Opportunities abound for you to cultivate engaging customer relationships.

Read more
Automatically Translating Videos for an International Audience

No matter your business focus—public service, B2B integration, recruitment—multimedia, in particular video, is remarkably effective in communicating with the audience. Before, making video accessible to diverse viewers involved tasks galore, such as eliciting the service of production studios to manually dub, transcribe, and add subtitles. Those operations were costly and slow, especially for globally destined content.

Read more
Cloudinary Helps Minted Manage Its Image-Generation Pipeline at Scale

Shoppers return time and again to Minted’s global online community of independent artists and designers because they know they can count on unique, statement-making products of the highest quality there. Concurrently, the visual imagery on Minted.com must do justice to the designs into which the creators have poured their hearts and souls. For Minted’s VP of Engineering David Lien, “Because we are a premium brand, we need to ensure that every single one of our product images matches the selected configuration exactly. For example, if you pick an 18x24 art print on blue canvas, we will show that exact combination on the hero images in the PDF.”

Read more
Highlights on ImageCon 2021 and a Preview of ImageCon 2022

New year, same trend! Visual media will continue to play a monumental role in driving online conversions. To keep up with visual-experience trends and best practices, Cloudinary holds an annual conference called ImageCon, a one-of-a-kind event that helps attendees create the most engaging visual experiences possible.

Read more