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:
cl.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")
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

Build the Back-End For Your Own Instagram-style App with Cloudinary

Github Repo

Managing media files (processing, storage and manipulation) is one of the biggest challenges we encounter as practical developers. These challenges include:

A great service called Cloudinary can help us overcome many of these challenges. Together with Cloudinary, let's work on solutions to these challenges and hopefully have a simpler mental model towards media management.

Read more

Build A Miniflix in 10 Minutes

By Prosper Otemuyiwa
Build A Miniflix in 10 Minutes

Developers are constantly faced with challenges of building complex products every single day. And there are constraints on the time needed to build out the features of these products.

Engineering and Product managers want to beat deadlines for projects daily. CEOs want to roll out new products as fast as possible. Entrepreneurs need their MVPs like yesterday. With this in mind, what should developers do?

Read more

Your Web Image is Unnecessarily Bloated

By Christian Nwamba
Your Web Image is Unnecessarily Bloated

As a developer, it seems inefficient to serve a 2000kb JPEG image when we could compress images to optimize the performance without degrading the visual quality.

We are not new to this kind of responsibility. But our productivity will end up being questioned if we do not deliver fast. In order to do so, the community has devised several patterns to help improve productivity. Let's review few of these patterns based on their categories:

Read more

Google For Nigeria: We saw it all…

By Christian Nwamba
Google For Nigeria: We saw it all…

Note from Cloudinary: Christian Nwamba, a frequent Cloudinary contributor, recently attended, and was a main speaker, at the Google Developer Group (GDG) Conference in Lagos, Nigeria. Christian led a session teaching more than 500 developers how to “Build Offline Apps for the Next Billion Users.” The stack he used included JS (Vue), Firebase, Service Workers and Cloudinary. Below is his account of the conference and his talk.

Read more
Viral Images: Securing Images and Video uploads to your systems

When was the last time you got paid $40,000 for a few days of work? That is what happened last year to Russian independent security researcher Andrey Leonov, who discovered that if you upload a specially constructed image file to Facebook, you can make Facebook's internal servers, nested deep within their firewalls, run arbitrary commands to expose sensitive internal files in a way that could easily lead to a data breach.

Read more