I thought today I’d do a quick introduction to Cloudinary. Cloudinary is a SAAS product I’ve been using for a few years now to handle all of my ‘digital assets’. By ‘digital assets’ I mean images, although they do handle videos too. It’s somewhere to store all your images and videos.. “But we can just use S3!” I hear you cry.. well yes you can but Cloudinary offer so much more!
Storage
Yes they offer storage. You can upload images, either through their web console or via their API. (There’s good libraries for all the main languages). As an example I found a nice image, like this one from Unsplash.com courtesy of Vincent Guth.
Once uploaded the file gets a unique ID. In this case: vincent-guth-Sdc35GnHgvI-unsplash
Transformations
Here’s the clever bit. Once I have the image uploaded and the ID I can do all sorts of cool stuff with it without ever touching Photoshop. All I need is to be able to manipulate a URL. So I can create a thumbnail of the image by calling:
What is going on?!
So the URL is split into various parts:
- The first part is just the URL for my account. (https://res.cloudinary.com/bowett/image/upload/)
- The next part is the transformation I’d like to perform (w_200).
- The final part is the ID of the image I’d like to perform the transformation on. (vincent-guth-Sdc35GnHgvI-unsplash.jpg)
So in my thumbnail example above the only transformation I’m performing is setting the width to 200. The important part here is that this resizing isn’t happening in the HTML, it’s happening server side at Cloudinary. They are creating a completely new image on the fly when the URL is called and serving it.
Other Transformations
They have loads of available transformations. But here are some I use regularly.
Quality
Let Cloudinary compress your images. You can either specify the quality you want e.g. q_90 or you can let them choose for you with “q_auto”.
Greyscale
By specifying e_grayscale you can create a colourless version.
Shape Transformation
You can specify a corner radius with r_20.
Conclusion
Hopefully I’ve given you a taste of what’s possible and you can see the power that Cloudinary makes available. This article only scratches the surface so I encourage you to sign up for an account and have a play around.