AsyncDownSamplingImage is a SwiftUI component that has similar interface to original AsyncImage and can perform downsampling so that we can reduce the memory buffer to store image data fetched from a server.
with downsampling, we can reduce the huge amount of memory use like the below.
| default AsyncImage | AsyncDownSamplingImage (×2~3 efficient) |
|---|---|
 |
 |
Moreover, the more the number of images increases, the more we can get the benefit.
Below is a comparision when I scrolled and show 100/1000 high resolution images (1000×1000px).
With AsyncDownSamplingImage, we changed Image size 1000x1000 into 160x160 which is same size as rendered Image.
| 100 Default AsyncImages | 100 AsyncDownSamplingImages (×10~ efficient) |
|---|---|
 |
 |
| 1000 Default AsyncImages | 1000 AsyncDownSamplingImages (×30~ efficient) |
|---|---|
 |
 |
AsyncDownSamplingImage aims to be used in a similar way to AsyncImage even if the implementation is different.
public init(
url: Binding<URL?>,
downsampleSize: Binding<CGSize>,
content: @escaping (Image) -> Content,
placeholder: @escaping () -> Placeholder,
fail: @escaping (Error) -> Fail
)public init(
url: URL?,
downsampleSize: Binding<CGSize>,
content: @escaping (Image) -> Content,
fail: @escaping (Error) -> Fail
)public init(
url: URL?,
downsampleSize: CGSize,
content: @escaping (Image) -> Content,
fail: @escaping (Error) -> Fail
)You can use AsyncDownSamplingImage in the following way.
@State private var url = URL(string: "https://via.placeholder.com/1000")
@State private var size: CGSize = .init(width: 160, height: 160)
...
AsyncDownSamplingImage(
url: url,
downsampleSize: size
) { image in
image.resizable()
.frame(width: size.width, height: size.height)
} fail: { error in
Text("Error: \(error.localizedDescription)")
}Documentation generated by DocC is available (still working in progress).
Pull requests, bug reports and feature requests are welcome 🚀