As part of this challenge you will assume the role of a frontend developer who has recently joined a prominent startup in the e-commerce space. After joining the business, you learn that the company is struggling with serving images to their end users in an efficient manner and as such the site has a very high bounce rate (a lot of visitors leave the site, without purchasing anything). This has been identified as a crucial issue and you are now part of the team that is tasked to resolve it.
After a handful of meetings, the main issues identified are:
- The marketing and design teams are overloaded with work to resize and crop images to be “web ready". The images are not served in modern formats for the endusers
- The design team needs to create a crop around a particular object or recolour images and they also struggle with automation. For the purposes of this exercise you need to create a crop around the person’s face and for the second image, you will need to recolour the bag. (Currently your company sells brown, black and orange bags)
After researching the market you find a product called Cloudinary which seems to be able to tick all the necessary boxes based on the requirements set out above.
Your task is to test Cloudinary and present your findings to the engineering managers in hopes that this solution will be the right one! To get started with the challenge you are required to go through the following steps:
Please note that if you already have an existing Cloudinary account, you don’t need to register for a new one only for this challenge.
- Visit the Cloudinary Website.
- Click on the "Sign up for free" button located in the top right corner of the page and register for a new account.
- Check your email inbox for a verification email from Cloudinary and follow the instructions to verify your email address.
- Once your email address is verified, log in to your newly created Cloudinary account.
In order to get your credentials, click on the Programmable Media icon in the top left corner, under the Cloudinary logo.
This will lead your dashboard where you can find your Cloud name, API Key, API Secret and API environment variable.
Now that you are done, choose an SDK you want to work with and install it. By clicking on "Quick Start" under the SDK logo, it will lead you to the essentials about that SDK of the documentation site.
The GitHub repository contains the two sample images in folder “Cloudinary challenge images”. Upload these to your Cloudinary account, via the Media Library using Cloudinary’s interface. You can find the upload button, in the upper right corner of your media library, by clicking on the “Assets” icon in the left side menu.
The requirement is simple. For the first image we need to create a crop around the face of the person in the center, in a 400X400 square, and for the second image we need to recolour the bag, as the company sells three versions but there won’t be time to take photos of those so you must use the original image and change the bag colour to both green and gray. Furthermore, we also need to save bandwidth so apply automatic quality optimisation and make sure to serve the image up in a next-gen image format.
Sample output for the transformed images:
Output of the first image:
Output of the second image with grey bag:
Output of the second image with green bag:
Useful links:
HINT: For the purposes of this challenge it doesn’t matter which Cloudinary SDK you’re going to use - pick the one that you’re most comfortable with. You can also do the optimisations and transformations by modifying the URL directly. In order to achieve the best optimisation, you have to work with the quality and format of the image.
Go to this form and add the transformed URLs. Please note that you need to submit both URLs in order to successfully complete the challenge. You need to make sure to add all transformations and optimisations to the final URL so please double check your work before submitting the form.