How to split images into small, medium and high resolutions with Backendless API Service | Backend as a Service Platform

Message:

Subscribe rss
Blog categories
All | Backendless features
How to split images into small, medium and high resolutions with Backendless API Service
June 8, 2018 by Oleg Vyalyh

Images displayed in your app often may be responsible for the bandwidth consumed by the device, which has a direct impact on the performance, battery level and the amount of memory which the app allocates. As a result, optimizing images can often bring noticeable performance improvements for your app: the fewer bytes it needs to download, the smaller impact is on the client’s bandwidth and the faster app will download and render content on the screen.

Let’s imagine you have an app where you store pictures to show them to your app’s users. But what happens if the resolution of these images is high and they are taking a lot of space? Download of these files is time-consuming and, as a result, it slows down your app making the user experience substandard.

A recommended approach is to create image thumbnails with lower resolutions relative to the original one. These thumbnails can be used to preview the image in the application.

The thumbnails can be generated using Backendless API Services (the Business Logic section). If you are not familiar with how to create your own API Service, please check the How to generate a QR code with Backendless API Service post, which describes the process of API service creation in greater detail.

In this article, we will focus on the task of generating thumbnail images with different resolutions.

Below is the source code for the service which performs the task:

We would also need at least one image file for testing. So, let’s just go to the Files section and upload a test picture into images directory:pasted image 0 - How to split images into small, medium and high resolutions with Backendless API Service

Once it is done, go to the Data section and create the  images table with two fields:

column name:  name, data type STRING

column name: original, data type FILE REFERENCE

Switch to the DATA BROWSER section and create a new object as shown below. The original  column must contain a file reference to the file for which the thumbnails will be generated by the service:pasted image 0 1 - How to split images into small, medium and high resolutions with Backendless API Service

Now run CodeRunner in the debug mode and try your service in action using the API Services section of the Business Logic screen:

the imageId  argument is an objectId of the record in the images table.

pasted image 0 2 1024x497 - How to split images into small, medium and high resolutions with Backendless API Service

And here is the result:

pasted image 0 4 - How to split images into small, medium and high resolutions with Backendless API Service

As you can see, the newly created images have different file sizes, and you can use any of those thumbnail types for the preview purposes in your app.

Share this post
Tweet about this on TwitterShare on FacebookGoogle+