Magic of Real Time Image processing with Alibaba Cloud OSS

In the world of cloud, object storage is one of the most common use cases. Taking advantage of cheap and practically limitless storage is not only convenient but also very cost effective. This is where Alibaba Cloud Object Storage Service comes in handy. But we will explore a feature of OSS which goes beyond just object storage, and helps organizations with elastic and real time processing for images on the fly. To understand this in detail, let’s look at the problem statement first.

Problem Statement

WhereBnB is an organization that helps travelers find the perfect accommodation for their next travel. Apart from accommodation, it also helps users get to know the city and its various attraction points so they can plan their trip better. WhereBnB has a mobile app, which is built natively in both Android and iOS. It also has a web application that can be accessed as a website on laptop, iPAD and various other devices.

Since WhereBnB has to store lots of images on its platform to show the users pictures of various hotels, accommodation options and also of attraction points all around the city, storage of images is a big component of their cloud spending. Also, many times the images need to be resized, cropped and processed in multiple ways in order to make it useful for a certain device from which the user might be accessing wherebnb.com

This means that for a single image, whereBnB needs to have multiple copies, fit for laptop screen, mobile screen, iPAD screen and so on with various requirements in different scenarios. This increases their overall spending as they are storing multiple copies of the same image to make it suitable for different use cases.

Current Solution

The cloud architects at WhereBnB thought that since there could be multiple reasons for processing an image, a new processing request should always be completed in real time, so that they don’t process the image for a number of use cases that are never experienced in real life. For eg: the team resized the image only for large device screens and popular phone screens. If a new user comes on their application using iPAD, the image will be resized on the fly for that device. Since there are very few users coming to their website on iPAD, it made sense to not process the image for it beforehand and increase the storage cost. There are many such cases for which this technique can be used.

The architects used the power of serverless computing to achieve this. Every time a new request comes, by the power of functions compute, it will be processed on the fly (incurring compute expense) and then stored for future possible use. This approach saved the company some money by not storing images beforehand for unlikely scenarios.

Current Issues

Even though with serverless computing, unlikely processing scenarios were avoided, there were still a lot of images which were being stored and used regularly. The organization still paid for multiple versions of the same image sitting in their buckets. A solution was needed to further optimize this situation and save further cost for the team.

Image Processing

WhereBnB now adopted the Image Processing feature of Alibaba OSS. With this feature, which is unique in the cloud industry, the team would store only one high definition image and all the other versions required will be processed in real time without having to store these images permanently. There are a lot of processing tasks that can be completed using Image Processing.

Let’s explore the features in detail here:

Here is the iconic statue of the sitting Lion at Trafalgar Square in London. WhereBnB lists this as a must visit location for travellers going to London.

This image is uploaded on the team’s OSS bucket in Singapore region and has the following address:

https://wherebnb.oss-ap-southeast-1.aliyuncs.com/trafalgarsquare.jpeg

But this is a heavy image (2.9 mb, resolution: 5951 × 3973). We want to reduce the size of this image to 600px for whereBnB’s mobile application. In order to do this, we don’t store different version of this image, but rather use Image Processing in OSS and pass this URL to the mobile app:

https://wherebnb.oss-ap-southeast-1.aliyuncs.com/trafalgarsquare.jpeg?x-oss-process=image/resize,w_600,limit_0

That’s it! By adding ‘?x-oss-process=image/resize,w_500,limit_0’ the image can be processed in real time to a new size!

Let’s see what else can we do here. What if the team wants to create an icon out of this image which can be used as a thumbnail on the folder for “Places to visit in London”. We do this by adding parameters as follows:

https://wherebnb.oss-ap-southeast-1.aliyuncs.com/trafalgarsquare.jpeg?x-oss-process=image/resize,w_500,image/circle,r_500

Here, we resized the image as before but also converted the image from a rectangle to a circle which can now be used as a thumbnail! We never need to store any more versions of this image ever again. With Image Processing, we can process the image in real time whenever we want. The WhereBnB team is pretty excited with this because now they don’t have to store various versions of the same image. Let’s see what else can they do here:

Resize and Blur the Image:

https://wherebnb.oss-ap-southeast-1.aliyuncs.com/trafalgarsquare.jpeg?x-oss-process=image/resize,w_500/blur,r_3,s_2

Resize and Crop the image to show only the Lion:

https://wherebnb.oss-ap-southeast-1.aliyuncs.com/trafalgarsquare.jpeg?x-oss-process=image/resize,w_500/crop,x_150,y_50

These were some of the useful real time processing features and there are many more as follows:

1. Custom Crop

2. Indexed Cut

3. Rounded Rectangle

4. Rotate/AutoRotate

5. Sharpen/Contrast/Brighten

6. Quality transformation/Tone

7. Add Watermark

8. Format Conversion.

All these features and their respective parameters can be explored on the official documentation here.

With the Image Processing feature, organizations can reduce their cost on storage of images by storing one version of the image in the bucket.

Billing

When you use IMG, the following fees are incurred:

• Image processing fees: Image processing fees are only charged after you exceed the free quota. The fees are charged based on the size of the source images.
• Request fees: A GetObject request is generated each time when you use IMG to process an image. You are charged based on the number of generated requests.
• Traffic fees: You are charged for the outbound traffic over the Internet based on the size of the source images.

That’s it! It’s time to explore Alibaba Cloud OSS Image Processing!

This post was first published on Alibaba Cloud Community blog here