Cloudinary Blog

Instantly view semantic image data with a cloud-based media library

Amit Sharon
By Amit Sharon
View semantic image data with a cloud-based media library

Cloudinary offers you a comprehensive online interface that allows you to arrange and manage your image assets. With Cloudinary’s Media Library, you can easily view, upload, moderate, and search through your images. We recently enhanced this web interface with a new feature that allows you to instantly view semantic image data (descriptive image metadata), that is automatically extracted from your images.

While this data has always been available to users via Cloudinary’s API, it is now displayed in Cloudinary’s Media Library UI, as well, allowing you to interactively analyze your site’s images. The information provided by your camera (Exif metadata), such as GPS locations and image timestamps, as well as information that is automatically extracted by Cloudinary, such as image predominant colors, allows you to smartly organize your content.

Webinar
Marketing Without Barriers Through Dynamic Asset Management

Cloudinary’s Media Library:

Media library screenshot

Extract images’ Exif data

Below, you can see how Cloudinary’s Media Library displays an image’s respective Exif, IPTC, and XMP metadata (simply click on the small i icon in the upper right hand corner of the image). This includes properties such as the camera model used to produce the image, and the image’s creation date:

Photo Exif metadata

Top and predominant colors

Color data, that is automatically extracted by Cloudinary, consists of the dominating colors of an image that appear in two scales: top colors (color histogram) and predominant colors, based on Google’s palette. Top colors appear the most frequently in an image, whereas predominant colors, are an image’s normalized colors according to Google’s standard palette of 12 main colors. First, image colors are analyzed and mapped into one or more leading colors. Once an image’s predominant colors are detected, they can be used to implement filter or search images by color, for example, like in image stock sites.

As you can see in the figure below, Cloudinary’s Media Library automatically indicates the image’s top and predominant colors:

Photo top colors

Face detection

In addition to Cloudinary’s API, the Media Library UI now automatically indicates face coordinates, where a single face or multiple faces are automatically detected.

This feature is demonstrated in the figure below:

Photo detected face

Below you can see an example of a 150x150 thumbnail dynamically created based on the detected face:

Ruby:
Copy to clipboard
cl_image_tag("boy_in_water.jpg", :width=>150, :height=>150, :gravity=>"face", :crop=>"thumb")
PHP v1:
Copy to clipboard
cl_image_tag("boy_in_water.jpg", array("width"=>150, "height"=>150, "gravity"=>"face", "crop"=>"thumb"))
PHP v2:
Copy to clipboard
(new ImageTag('boy_in_water.jpg'))
  ->resize(Resize::thumbnail()->width(150)->height(150)
    ->gravity(Gravity::focusOn(FocusOn::face())));
Python:
Copy to clipboard
CloudinaryImage("boy_in_water.jpg").image(width=150, height=150, gravity="face", crop="thumb")
Node.js:
Copy to clipboard
cloudinary.image("boy_in_water.jpg", {width: 150, height: 150, gravity: "face", crop: "thumb"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(150).height(150).gravity("face").crop("thumb")).imageTag("boy_in_water.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('boy_in_water.jpg', {width: 150, height: 150, gravity: "face", crop: "thumb"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("boy_in_water.jpg", {width: 150, height: 150, gravity: "face", crop: "thumb"})
React:
Copy to clipboard
<Image publicId="boy_in_water.jpg" >
  <Transformation width="150" height="150" gravity="face" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="boy_in_water.jpg" >
  <cld-transformation width="150" height="150" gravity="face" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="boy_in_water.jpg" >
  <cl-transformation width="150" height="150" gravity="face" crop="thumb">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(150).Gravity("face").Crop("thumb")).BuildImageTag("boy_in_water.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(150).height(150).gravity("face").crop("thumb")).generate("boy_in_water.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(150).setGravity("face").setCrop("thumb")).generate("boy_in_water.jpg")!, cloudinary: cloudinary)
Face detected based cropping result

Summary

Cloudinary’s API already supports semantic image data analysis and extraction for website, web application, and mobile app developers. This rich information allows them to implement image searches, sorting, and classification. With semantic image metadata, you can enhance your image-rich sites and applications. These additional layers of information offer impressive cloud-based solutions for all of your online image management and transformation needs.

Now, both Cloudinary’s API and Media Library provide the ability to fetch Exif metadata, display auto-detected face coordinates, and indicate predominant colors. These features are available with all of Cloudinary's plans, including the free version. Click here to setup a free Cloudinary account.

Recent Blog Posts

Generate Names With faker.js and Convert Them to Graphics With Cloudinary

The year was 1994. South Africa held its first fully representative democratic election, Netscape Navigator became the first commercially successful web browser. Coconuts Japan re-released EA Sports' MLBPA Baseball video game under the perhaps surprising title Fighting Baseball. Unlike MLBPA Baseball, which was licensed by the Major League Baseball (MLB), Fighting Baseball could not infringe on MLB trademarks, reference the National League or American League by name, or adopt actual team or player names.

Read more
Partner news: Cloudinary-Getty Images Integration

Supported by intelligent automation, Cloudinary serves as an effective conduit between media asset management and delivery so you can take maximum advantage of assets, compress workflows, and build and coordinate engaging and inspiring customer experiences. Through Cloudinary’s Digital Asset Management (DAM) solution, which employs the company’s innovative image and video APIs, creative and marketing teams can benefit from them, as well as from many AI-powered and automated capabilities. As a result, you can transform, optimize, and deliver media at scale on an intuitive UI.

Read more