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) |
|---|---|
| Screenshot 2023年02月03日 at 21 58 31 | Screenshot 2023年02月03日 at 21 58 48 |
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 (×ばつ1000px).
With AsyncDownSamplingImage, we changed Image size 1000x1000 into 160x160 which is same size as rendered Image.
| 100 Default AsyncImages | 100 AsyncDownSamplingImages (×ばつ10~ efficient) |
|---|---|
| Screenshot 2023年02月04日 at 2 11 31 | Screenshot 2023年02月04日 at 2 12 06 |
| 1000 Default AsyncImages | 1000 AsyncDownSamplingImages (×ばつ30~ efficient) |
|---|---|
| Screenshot 2023年02月06日 at 1 08 46 | Screenshot 2023年02月06日 at 1 07 29 |
.package(url: "https://github.com/fummicc1/AsyncDownSamplingImage.git", from: "1.1.0")
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)") }
IncrementalImage is a component that can load image data in chunks.
The size of buffer is set by bufferSize parameter in bytes unit.
let url = URL(string: "https://via.placeholder.com/1000") IncrementalImage(url: url, bufferSize: 1 * 1024)
Documentation generated by DocC is available (still working in progress).
Pull requests, bug reports and feature requests are welcome 🚀