Firebase Storage Flutter Displaying images takes too long to load

Question

I'm creating sort of a tutorial application and have to display images from firebase storage with a step-by-step tutorial. Currently I'm using the .getDownloadUrl function and am displaying the images using Cached Network Images(External library) with the URL. The images are replaced when the step is completed and it takes at least 2-3 seconds to load an image and can get quite irritating for a user. Also, to minimize latency I shifted the Cloud Storage location nearby to where a user would be, this improved the speed slightly. Is there a better way to display images, apart from storing the links on Cloud Firestore or saving all the URLs in one list at the start.

Solution

The most common approach is to compress/resize (or both) your images. By doing this you have a few options:

1. You can display the thumbnail by default and only load the full image (or load it in the background) when the user requests it (eg. they click on details about the tutorial)

2. Load a different version of the image depending on the screen size (you don't need to display an image meant for desktop on a mobile device)

3. Replace the old image with the compressed one. Depending on what the content is, you probably don't need images larger than 200kb, and that's being generous.

You could also consider storing your images using a next gen format, such as WebP as it is considered one of the most efficient image types. But, it's not yet supported on all devices, so you'd want to include a fallback type.

You said you're caching the images which is a good step to reduce load times. You also said you shifted the storage location to be closer to the users. You could also try to find a CDN that is even closer to your user's locations (probably diminishing returns).

You seem to be against storing the downloadUrls in your database. This would help as all you'd have to do is load the image, instead of ping the bucket for the url and then load it.

Another potential solution for your use case could be to download the images for this tutorial, as well as the next one so when the user clicks next the images are already downloaded.

Unfortunately there isn't a lot else you can do. There's a lot of data packed into an image and it takes some time to load and render it

Comments

[brian beuning]

Before optimizing, measure where the time is going.

[Jay]

This is going to be tough to answer. Asking if there is a better way to display images is pretty broad. The question states it takes 2-3 second to present the image; is that due to a coding issue? Are the images too large? Maybe there's a problem with the internet connection? Common practice is to store links in Firestore, why not do that? Have you tried reducing the image size? See? There's a lot of data that could be related that we don't know about. You may want to consider adding your code and then clarifying the question with additional details as it may be something you're overlooking.

[Pranet Hiranandani]

Thank you for your help. Most of my images are already compressed and less than 100kb. I can also try using WebP images. Would that be faster? I could use the caching method, that might be better if it loads all the URLs at the start. I won't be able to download the images as that'll probably take a lot of storage space on the user's device and probably take time to load at the start. Please let me know if I can do anything else. I really appreciated your help.