How to loading images from firebase storage faster?

Question

I make an app where I have to show profile images and where you can click load more.

I have to load my firebase storage images faster and I don't know how to do that

My code:

await FirebaseStorage.instance
              .ref('profileImages/${data[i]["uid"]}_profile_picture.jpg')
              .getData();

I already tried to compress the image and more things, but I don't know them anymore.

How can I load the images faster?

Firebase storage is not a CDN. If image load speeds is important for your use case then you should look at using some CDN like [Cloud CDN](https://cloud.google.com/cdn). Also checkout: https://stackoverflow.com/q/68879868 — Dharmaraj, Apr 16 '22 at 08:58
how long does it take? if its 2-3 seconds its normal, just add a loading animation when u click to download images and remove loading when you have the data, also you can resize the images before upload [https://stackoverflow.com/questions/23945494/use-html5-to-resize-an-image-before-upload](https://stackoverflow.com/questions/23945494/use-html5-to-resize-an-image-before-upload) i resize them to 800px and take under 100kb — codmitu, Apr 16 '22 at 14:58
hello c0dm1tu I already found a solution and also posted the solution under this question but thanks — liam spiegel, Apr 16 '22 at 15:19

liam spiegel · Accepted Answer · 2022-04-16T14:03:32.657

Problem:

The problem was that firebase storage is too slow.

But I found an easy solution.

Solution:

You have to make your image into a network image

To do that complete these steps:

1. Get the URL of the image

To do that use this code:

 var ref = FirebaseStorage.instance.ref().child("profileImages/${uid}_profile_picture.png");
// this is the URL of the image
      String url = (await ref.getDownloadURL()).toString();

2. Save the URL

If you do it for something like profile images then add the URL to cloud firestore when you add the image and change the image and use this code:

await FirebaseFirestore.instance
        .collection('users')
        .where("uid", isEqualTo: FirebaseAuth.instance.currentUser?.uid)
        .get()
        .then((value) async {
      await FirebaseFirestore.instance.collection('users').doc(value.docs[0].id).update({"profileImageURL": url});
    });

If you do it for something like your app icon then use this code:

(await SharedPreferences.getInstance()).setString("logoURL", url);

3. Get the URL from an image

If you use the first way to save the URL(If you do it for something like profile images) then use this code:

await FirebaseFirestore.instance
        .collection('users')
        .where("uid", isEqualTo: uid)
        .get()
        .then((value) {
       url = value.docs[0].data()["profileImageURL"];
    });

If you do the other way to save the URL(if you do it for something like your app icon) use this code:

(await SharedPreferences.getInstance()).getString("logoURL");

4. Display the image

To display the image use this code:

Container(
  height: 100,
  width: 100,
  child: Image(image: NetworkImage(url)), 
);

Hope it helps!

How to loading images from firebase storage faster?

1 Answers1