Search code examples
androidiosimagestatic-files

Best approach for serving images for mobile

I am currently working on a back end system that supports profile for the application users. The system is integrated with Android and iOS applications. In the mobile app, there is a profile page to display the users profile image, buttons for changing the image and other details.

Images are required to be in either JPEG or PNG format and has a maximum size limit of 2MB.

Currently my back end uploads and serves an image in the following way:

  1. When an image is sent as multipart/form-data, the image's meta is extracted, inserted or updated (if one already exists) in a SQL database and the image is saved in an assets directory.
  2. When an image is requested in HTTP GET, it is sent back as a Base64 encoded data-uri; in a browser, I can display it as part of an HTML img tag src attribute.

Now the mobile app developer has asked me to change the serving (downloading) process as described in (2). Specifically, they have asked to respond with a link to the static image in the server instead of the encoded Uri.

Now, I have read some good points on the use of data-uri and how it makes the image delivery more portable (I can support both JPEG and PNG without any modification to support different formats on browser); on the other hand, I have also read how Base64 encoded images can get larger in size compared to original binary image, how the response payload becomes larger which means more in flight processing and can prove slow on mobile network.

Now, I am not sure what approach is most suitable. The mobile apps need to display the image only when the profile is clicked. They can either save the image as application data in the mobile filesystem or, fetch the image every time and display it.

What will be great is that if someone can help answer the following:

  1. Should I keep serving images as data-uri or, do I change the backend to serve a link to a static file?
  2. Are there any differences in performance, based on my use case, between either of the approach?
  3. For a mobile app, is it more favourable (by which I mean easier to implement in code and maintain), to use links to static files compared to data-uri?
Solution

  • Should I keep serving images as data-uri or, do I change the backend to serve a link to a static file?

    I would keep serving the images as data-uri. That means you are likely pulling the data out of the blob in the database and just sending it along. That allows the data to be updated in the database without having to worry about updating static images on the server side.

    Are there any differences in performance, based on my use case, between either of the approach?

    A static image might be faster for, as you said, base64 images can be larger. But, it might not be either. You should probably restrict the images to a maximum size, and/or resize it to such when they upload it. I wouldn't be too concerned, I've written several apps that read hundreds of base64 images in seconds with no appreciable lag.

    For a mobile app, is it more favourable (by which I mean easier to implement in code and maintain), to use links to static files compared to data-uri?

    It's probably easier to use the data-uri, since the mobile app is going to need to convert it into a file format that works with the ImageView or whatever they need to display it in.

    If the image is only used by the user on their device, do you really need to have them upload it? (You would if you want the same profile image to appear on every device they own) Or, can it just be stored locally in the apps data store, or local SQLite database?