Cloudinary LogoFor each scripting language, there are various image manipulation libraries for actions like cropping, resizing or optimizing each item.

The problem is that some libraries are lacking some features, they may not be available on "that" hosting account, etc. and you may be in need of a better solution.

Cloudinary is a web service for processing and manipulating images in the cloud with the requests we can send using the HTTP and URL based APIs provided.

Cloudinary

It starts with handling the uploads (including multiple files at once) and accomplishes standard jobs like cropping, resizing, optimizing or converting them so easily.

Let's say you have uploaded an image named "product.jpg" and sized 600*400px using the API. You want to display a small thumbnail in the product listing page:

a little bigger one in the product detail page:

and the original one in a lightbox

Amazing right? They are all created on-demand, cached for future use and served from Amazon CDN for faster delivery.

But, Cloudinary offers more and smarter methods for today's web which will impress you like automatically fetching user photos from social networks.

In order to fetch my Facebook photo in real-time, I would just use:

And, for the Twitter profile image:

@umutm profile photo

As you  can see, I fetched them by resizing at the same time. Pretty sick huh. Or, maybe I should have added rounded corners to it:

: ) You got the point. It is really so handy.

One lovely feature is "face detection". The service can detect the face in any given image and crop only that part. An example:

Cloudinary Face Detection

Let's say, you have uploaded 10,000 product photos and decided to resize all of them to a new size. Will you do them one-by-one? Sure no. You can group and tag the uploaded images and apply bulk actions over them. So nice.

Another feature that CSS sprite fans will +1 is the "sprite and auto-CSS-generation". Let's say you have uploaded 4 logo images and tagged them as "logo".

In short, you can just define the CSS classes in your HTML and the rest is handled automatically. So, so good.

Cloudinary Admin

For consuming Cloudinary's API easier, there are libraries provided:

There is also an admin panel for viewing the total usage, created transformations and more.

And, besides the paid plans, there is a generous free plan (500 MB storage, 1,000 MB monthly bandwidth, 50,000 images ).

To sum up, Cloudinary is a very useful service for any image processing needs without anything server-side. It will work on any website/server/setup flawlessly as there is nothing to install. Things are very straightforward with almost no coding.

With a web of multiple devices, resolutions and responsive outputs, there are definitely so many opportunities brought by the service.

P.S. More samples and features are regularly shared at Cloudinary Blog.

How to join the giveaway?

There are 3 x 3 months Basic accounts being given away (worth$120/account) to WRD readers.

If you want to join the giveaway, you can choose one of the methods below or do both to increase your chances:

Winners will be selected randomly on 14 May 2012 (1 week later). Good luck to all.

The winners

Here they are:

  • @invert87
  • kinda (comment #578947)
  • Cédric (comment #577820)

Congratulations and thanks to everyone for joining.

WebResourcesDepot Feed