Is there any way to load async images faster in swiftui?

114 views Asked by At

I'm making an app in SwiftUI where I'm using links from Firebase Storage to load images with AsyncImage.

The problem is that it takes about 1 second to load these images, which is a long time for a small image.

This is an example of how I'd load an image in my app:

var link = "https://firebasestorage.googleapis.com:443/v0/b/tribum-7b19a.appspot.com/o/1EVKeHBGLoULDCYA5nrS34Zbqgp1?alt=media&token=04f4444a-75bd-4895-9c79-516718174223"

//...

AsyncImage(url: URL(string: link)) { image in
    image
        .resizable()
        .scaledToFill()
        .frame(width: 25, height: 25)
        .clipShape(Circle())
} placeholder: {
    Image(systemName: "person.crop.circle.fill")
        .resizable()
        .foregroundColor(.gray)
        .frame(width: 25, height: 25)
}

As you can see, the link itself leads to an image from my storage, but the image might be too large for what I need (I only need a circle with width and height set to 25)

1

There are 1 answers

0
Alex Mamo On BEST ANSWER

The problem is that it takes about 1 second to load these images, which is a long time for a small image.

The image example you have added in your question, is not as small as you say. It's a 3000*2000 pixels image having almost 700KB. So downloading such an image in 1 second sounds reasonable to me. What you have to do in such cases, is to reduce the size of the image. You can do that when you upload the image to Storage using your own mechanism, or you can use a Firebase Extension such as Resize Images which:

Resizes images uploaded to Cloud Storage to a specified size, and optionally keeps or deletes the original image.