AsyncDownSamplingImage

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.

Impact of Downsampling

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)

How to use AsyncDownSamplingImage

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)")
}

DocC

Documentation generated by DocC is available (still working in progress).

Contributing

Pull requests, bug reports and feature requests are welcome 🚀

License

MIT LICENSE