Cloudinary Blog

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

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.

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:
cl_image_tag("boy_in_water.jpg", :width=>150, :height=>150, :gravity=>"face", :crop=>"thumb")
PHP:
cl_image_tag("boy_in_water.jpg", array("width"=>150, "height"=>150, "gravity"=>"face", "crop"=>"thumb"))
Python:
CloudinaryImage("boy_in_water.jpg").image(width=150, height=150, gravity="face", crop="thumb")
Node.js:
cloudinary.image("boy_in_water.jpg", {width: 150, height: 150, gravity: "face", crop: "thumb"})
Java:
cloudinary.url().transformation(new Transformation().width(150).height(150).gravity("face").crop("thumb")).imageTag("boy_in_water.jpg");
JS:
cloudinary.imageTag('boy_in_water.jpg', {width: 150, height: 150, gravity: "face", crop: "thumb"}).toHtml();
jQuery:
$.cloudinary.image("boy_in_water.jpg", {width: 150, height: 150, gravity: "face", crop: "thumb"})
React:
<Image publicId="boy_in_water.jpg" >
  <Transformation width="150" height="150" gravity="face" crop="thumb" />
</Image>
Angular:
<cl-image public-id="boy_in_water.jpg" >
  <cl-transformation width="150" height="150" gravity="face" crop="thumb">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(150).Gravity("face").Crop("thumb")).BuildImageTag("boy_in_water.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(150).height(150).gravity("face").crop("thumb")).generate("boy_in_water.jpg");
iOS:
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 manipulation 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

How to Make Boomerang Video Effect With Cloudinary

When you see the term boomerang, what is the first thing that comes to mind?

A thrown tool made of wood that returns to its thrower? Another definition is reversal, logically portraying the aim of the tool itself. Based on this definition, the term boomerang videos” came into play to depict videos that loop back and forth.

Read more
Shortening the Development Cycle of Media-Related apps with Cloudinary

Currently, the Android platform boasts the highest demand for mobile solutions, as evidenced by Google’s announcement in 2017 that there were two billion monthly active Android devices, a number that is likely to increase in the years ahead. For app developers like you, now is the right time to build and release solutions for Android. you might have also noticed that a higher percentage of apps being developed nowadays are filled with visual media: images and videos.

Read more
Build Your Own Image Storyboard Android App

Globally, approximately two billion people now own smartphones, which also feature cameras capable of capturing photos and videos of a tonal richness and quality unimaginable even five years ago. Until recently, those cameras behaved mostly as optical sensors, catching light that determines the resulting image's pixels. The next generation of cameras, however, can blend hardware and computer-vision algorithms that apply to an image's semantic content, spawning creative mobile photo and video apps.

Read more
Cloudinary Delivers Simplified Image Management Workflow for Fairfax Media's Digital Transformation

Fairfax Media Limited [ASX:FXJ] is one of the largest media companies in Australia and New Zealand that engages audiences and communities via print and digital media. It includes recognizable mastheads including The Australian Financial Review, The Sydney Morning Herald and The Age. Fairfax Media operates numerous news and information websites, as well as tablet and smartphone apps, for online news sites.

Read more
Bleacher Report Scores with Real-Time Video Highlights Delivered by Cloudinary

Bleacher Report is a global digital destination for sports fans, creating and collaborating on content at the intersection of sports and culture. Owned by Turner, a division of Time Warner, Bleacher Report's website and social channels focus on sports culture for the next generation of fans. Bleacher Report also has a five-star mobile app and popular email newsletters, which are part of the company’s strategy for instantly delivering in-depth articles, results and video highlights personalized for users’ favorite teams, players and leagues.

Read more