CODEWITHSUNDEEP
firebaseflutterfirebase-storage
Pranet Hiranandani
Pranet Hiranandani

Reputation: 23

Firebase Storage Flutter Displaying images takes too long to load

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.

Upvotes: 2

Views: 2235

Answers (2)

Stero
Stero

Reputation: 1

you can use LoadIndicator or use DB, to store Pictures on local Device

Upvotes: 0

Hydra
Hydra

Reputation: 1000

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

Upvotes: 1

Related Questions