Automatic Image Tagging with Cloudinary
Cloudinary serves so many purposes when it comes to your site's media: easy upload with any number of languages and methods, served from cloud and CDN for optimal speed, image manipulation on the fly by simple URL modification, and even background removal with one of their amazing add-ons. I used to attempt these type of functions with ImageMagick but the amount of processing needed to do them would bog down my server -- it was a losing battle.
I was so impressed and happy with Cloudinary's Background Removal add-on that I gave another add-on a run for its money: Imagga Auto Tagging. This feature allows you to upload images and have objects within them automatically detected and tagged as such! Let's have a look!
Why Image Tagging?
Image tagging is as important as tagging your written content -- you can quickly identify and use content based on a single word or group of words. Since images can take a blog post or page from too vanilla to beautiful, the ability to pull an image in based on keyword is invaluable. Completing this task manually would be a nightmare, so be happy Cloudinary's add-on does the hard work!
Image Tagging JavaScript
The first step in adding tagging to Cloudinary image uploads is enabling the Imagga Auto Tagging add-on. With the add-on enabled, you can upload your images within whatever language you choose (Cloudinary supports Node.js, Python, PHP, Java, Ruby, and more...); let's use Node.js:
var cloudinary = require('cloudinary');
cloudinary.config({
cloud_name: 'david-walsh-blog',
api_key: '###############',
api_secret: ''###############-'###############'
});
cloudinary.uploader.upload('sports-balls.jpg', function(result) {
console.log('result: ', result);
}, {
categorization: 'imagga_tagging'
});
The snippet above uploads an image to Cloudinary and directs Cloudinary to analyze the image to recognize objects to tag the image with. The result provides and array of matching tags and a confidence level in said tag:
// ...
"info": {
"categorization": {
"imagga_tagging": {
"status": "complete",
"data": [
{"tag": "baseball", "confidence": 0.5475},
{"tag": "tennis", "confidence": 0.4414},
{"tag": "football", "confidence": 0.4121},
{"tag": "soccer", "confidence": 0.394},
// ...
The Imagga Auto Tagging add-on also lets you provide an additional parameter to allow Cloudinary to automatically tag images with a tag that matches a minimum confidence threshold:
cloudinary.uploader.upload('sports-balls.jpg', function(result) { }, {
categorization: 'imagga_tagging',
auto_tagging: 0.4
});
If you've already started using Cloudinary and want to update a previously uploaded image, you can do that as well!
cloudinary.api.update('previously-uploaded-image', function(result) { }, {
categorization: 'imagga_tagging',
auto_tagging: 0.5
});
Pull Images of a Specific Tag
Grabbing images by tag is an essential function after you've had your images tagged. To grab images by a given tag, you can use:
cloudinary.api.resources_by_tag('arsenal', function(result) {});
...which provides an array of objects representing images (and their URLs) that match a tag. There's the full circle: upload, tag, and pull by tag when desired!
Adding meta data to your files, especially images which aren't easily searchable like text, can be a huge boost to your ability to find them in the future. Within my current blog theme, I have a disgusting snippet of code to search text in a post and serve a related image -- the image list, however, is explicitly created by me which is a nightmare to maintain. If I could send a few tags to Cloudinary and get a representative image, life would be way easier.
Cloudinary also offers URL-based APIs to perform on-the-fly image transformations like resizing, cropping, background removal, image tagging, image compression and more. If your website or app relies on images, give Cloudinary a try -- they may be exactly what you need!
