Image Management via Cloudinary

Posted on Feb 15, 2018

Image Management Cloudinary

Image Management via Cloudinary

Image and media management being done in-house a project has always been a herculean task. I had to bite the bullet when I started working on a product called Market Cube.

Marketcube.io is a SaaS-based marketplace engine that instantly transforms any Shopify store into a fully functional marketplace, for products or services.

One of the crucial features of Marketcube is visualizing product images and we had more than a ton of images to visualize hence we faced issues like the slow rendering of images as we were serving the images directly from the database using the same server and applying transformations to images were difficult.

To eliminate these problems, we researched and found a lifesaver in Cloudinary which gave us a lot of features for image manipulation and management.

Cloudinary is a cloud-based solution for managing images. It was very easy to integrate it into our project. We simply used the cloudinary package.

Cloudinary has a descriptive documentation which further eased our task to implement in our existing project. After migrating all our images to Cloudinary, the magic started, all of the images are now rendering very fast as they are delivered through a fast CDN.

Image transformation in Cloudinary is as simple as applying some filters to the image URL provided by Cloudinary. For example, we have used the following techniques in Marketcube:

  • We can render an image of required height and width using w_x and h_y, where x is height and y is the width of an image.
Example: http://res.cloudinary.com/marketcube/image/upload/w_400,h_400/v1517483884/ayhwxxjrs0zfp4d2i97f.jpg
  • One of the most awesome features is to focus the face present in the image. We can use ‘g_face’ to focus the face present in the image, this feature is best to be used in profile pics.
Example: http://res.cloudinary.com/marketcube/image/upload/w_400,h_400,c_crop,g_face,r_max/v1517483884/ayhwxxjrs0zfp4d2i97f.jpg
  • We can also change the quality of an image according to our need, ‘q’ is to be set to set quality in image URL.
Example:
http://res.cloudinary.com/marketcube/image/upload/q_60/v1517483884/ayhwxxjrs0zfp4d2i97f.jpg

Cloudinary provides us both ‘http’ and ‘https’ URL so that it is easy for SSL certified as well as not certified.

We can add tags to our images in Cloudinary while we are saving or updating images. It made management of images very easy, following tags were added to our images in Marketcube:

  1. The unique id of a user.
  2. The unique id of the product.

It is now very easy to track images of any particular user or product. It helped us in the following ways:

  1. If a user is deleted from Market Cube, then we have to simply remove the images containing the user’s unique id as a tag.
  2. If a product is deleted from Market Cube, then we have to simply remove the images containing the product’s unique id as a tag.

The Above Management of images keeps removing the unnecessary images from Cloudinary, hence reduces cost as our storage is being utilized properly.