From Web to Mobile - How to Handle Images

Hi Guys,

Quite recently I’ve received a question from a customer of  How to retrieve a subset of the photos from a web app to the mobile device in order to show them on a mobile app and wanted to share here some guidelines.



So, imagine the scenario when you have web application photo database with thousands of photos and you are planning to develop a mobile app to retrieve a subset of the photos from the web to the mobile device in order to show them on the mobile.

And you are also going want to upload photos from the mobile app to your photo database.

Images are heavy, and besides affecting performance and also a risk on memory management on the mobile device.

So, what it’s the best approach for this type of transactions? 

Considering the use case described above, the best practice is to follow this approach:

From the server to mobile

Step 1: on the server side create a process to create thumbnails from the original images, in case you need to show thumbnails, 

Step 2:  use the file transfer plugin to download (async) the images. And, with the file plugin store them in the device physical storage. Then use the reference URI to these local images in the local storage database, not the binary.

Thumbnails can be synced to the local storage and shown is list or gallery view. However, whenever big images are required, use the ones downloaded.

From mobile to the server

For the upload, you should use the same file transfer plugin. Upload should be async so it doesn't stall the UI.

One important note is, even with this approach you need to be careful showing the images - they need to be released from memory, otherwise, it will start degrading the application performance.


hope it helps.



Hi Vera,

"you need to be careful showing the images - they need to be released from memory" - since memory management is otherwise fully transparent with the Platform, how do we do that?

Hi,

How can we achieve lazy-loading of images with this approach?

Hi,

sorry for the delay - holiday season was hard :)

@Kilian - about releasing the images from memory - was more like a heads up in case of having a list, make sure you have virtualization on, by the way, virtualization is on by default on the last versions, so no need to worry about it.

@Assif - you can use a List. virtualization does that. Check this article for more details https://medium.com/outsystems-engineering/virtualizing-the-virtual-dom-pushing-react-further-d76a16e5f209

Vera