The Situation
Everyone who had to do image processing before knows that it can get a pain in the a** real quick. As long as you have to support basic resizing with JPGs only it’s OK. But it’s getting tremendously complex as soon as you need to support more specific tasks like intelligent cropping, filling up transparent backgrounds or generating different image formats. You spend a lot of time on getting things to work reliably when you should actually be coding up your web-application.
We exactly faced this situation: our product team wanted exactly these features for our new product – the Looks. Users can upload images of their own, add products, music & videos and small bits of text & so create their own Looks on STYLIGHT. As if it wasn’t enough, they also wanted a complete redesign of the website ‐ and of course it should be shipping yesterday.
To be honest, that would have been impossible with our manpower. Back then we used a very basic, self written image uploader to support profile pictures (honestly: It was very basic!). Additionally we had some image processor in the backend written in C that is used for the processing of product pictures provided by our shops. But since this has been written ages ago, the code was old, complex & would have needed a lot of love from our backend-developers before it could have been used for new tasks. So we started looking for external services in order to ship a convincing, working product in time without removing feature request & upsetting our product team & designers.
Searching for a Savior
During our search we soon stumbled upon the solution for this helpless situation: Cloudinary
Cloudinary streamlines your web application’s image manipulation needs. Cloudinary’s cloud-based servers automate image uploading, resizing, cropping, optimizing, sprite generation and more.
That sounded good, but do they have libraries & a complete API (let’s be honest, most so called APIs are not worth the name) or do I have to write that on my own?
Cloudinary provides a full suite of tools for managing your Web resources in the cloud: Online management console, APIs, client side libraries and more.
OK, but how about CDNs. As a growing company building an online-fashion community in over 9 countries, performance is king!
With Cloudinary, your site will load faster through intelligent use of Content Delivery Networks (CDNs). Cloudinary’s cloud-based manipulators will help offload time-consuming asset manipulation tasks.
We said: OK sounds good. It will be worth it even if they deliver only half the stuff they promise on their homepage. So we decided to give them a chance.
The technical Side
In the first step we introduced Cloudinary to our WebApp to handle user uploaded pictures by their jQuery based image uploader. A requested feature from our product team was to support image cropping. So we combined it the jWindowCrop plugin. So while the user determines his view port, we upload the original image file in the background. Once the user has decided which part of the image he wants to crop to, we send the cropping coordinates together with the Cloudinary image ID of the original picture to Cloudinary and get back the URL for the cropped image. How easy is that? Finally an API that works as described in the docs!
In this step we also request some more image resolutions. Those are rendered upon completion of the API call (“eager”). Hence your users will feel no delay when an image is requested for the first time.
It almost sounds too simple, but honestly, these guys saved us hours & hours of time in which we were able to focus on our core product instead. The icing on the cake is that Cloudinary also supports face detection, so we also threw out our lousy profile picture up-loader & the user now can be sure to see his smiling face when his uploaded profile picture gets cropped for his profile page. Additionally if you use Facebook authentication on your homepage, you can request the profile pictures & different formats of it directly through Cloudinary. All it needs is one URL again. No need for caching images! They even update automatically, when the user decides that he needs to add his new dog to his facebook profile picture 🙂
In conclusion
That’s was just a small amount of features we currently use. You can find more stuff on their website & very interesting performance related topics on their blog. And if you got any questions, an email to the team was always enough to get a quick reply. There is also a free limited account, so give the service a try. I promise, you won`t regret it!
