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.
![](https://private-user-images.githubusercontent.com/44002126/275831450-254ee84d-1e08-4a61-b507-8f78f2e1d6d3.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg5NTQwMTcsIm5iZiI6MTcxODk1MzcxNywicGF0aCI6Ii80NDAwMjEyNi8yNzU4MzE0NTAtMjU0ZWU4NGQtMWUwOC00YTYxLWI1MDctOGY3OGYyZTFkNmQzLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjIxVDA3MDgzN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTA1MTcyNTliMmI5YTM5Y2NmYzE1OTljMjY1ZjZhNzZmMGE2ZDk2NGFiNGFiYzFlNDdmZWM1YzAzM2Y2ZjU2YjcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.brV9zJ-a12Uovv69lc3irb0yadgbCMXyL4O0WbqElZQ)
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 🚀