Efficient + Gentle image prefetching

[yschimke]

I'm trying to prefetch images for a Media app for artwork previews. The usage of them is at a small size, but I don't have control of the source images which may end up being quite large.

Issues I'm concerned about

• Not doing extra work fetching images that never change (force cache first policy in app and for prefetching)
• not loading a lot of images concurrently into memory as part of the prefetch
• not running a lot of requests simultaneously
• Caching an optimised size version of the images.

For the first point, I have an OkHttp interceptor that sets a very long tolerant cache policy for responses of image/ type.

For the rest I'm trying the following

        val dispatcher = Dispatchers.IO.limitedParallelism(5)

        withContext(dispatcher) {
            artworks.forEach { artwork ->
                val request = ImageRequest.Builder(application)
                    .data(artwork)
                    .memoryCachePolicy(CachePolicy.DISABLED)
                    .dispatcher(dispatcher)
                    .build()
                imageLoader.execute(request)
            }
        }

Does the dispatcher set on ImageRequest limit requests in flight? Or just slow it down by limiting the number of in flight threads?

How do I cache resized images? Use Coil 2 so the cache is above the HTTP layer?

[colinrtwhite]

Not doing extra work fetching images that never change (force cache first policy in app and for prefetching)

Agreed, using an OkHttp interceptor (either regular or network) should solve this. Even though Coil now has its own DiskCache, it uses the same cache control logic as OkHttp. Optionally, you can set ImageLoader.Builder.respectCacheHeaders(false) in 2.x to ignore cache control headers and always cache without expiry.

Not loading a lot of images concurrently into memory as part of the prefetch

I think your existing solution of using limitedParallelism works well for limiting how many in-progress decodes there can be at once. You can also call Bitmap.recycle on the decoded image to free it faster as long as it's not written to the memory cache.

Not running a lot of requests simultaneously

Using limitedParallelism works well for this too. Coil uses the provided dispatcher for all parts of the request (except when it needs to jump to the main thread) so limitedParallelism is safe to limit concurrency. Optionally, if you only want to limit parallelism of the BitmapFactory decode operation, you can use ImageLoader.Builder.bitmapFactoryMaxParallelism in 2.x. If you use that it won't limit network request concurrency.

Caching an optimised size version of the images.

You'll have to use 2.x to write custom entries to the disk cache. For 1.x, it might be possible to use an OkHttp interceptor to decode the response stream and replace it with a stream to a resized image. For 2.x I think this should work:

val dispatcher = Dispatchers.IO.limitedParallelism(5)

withContext(dispatcher) {
    artworks.forEach { artwork ->
        val request = ImageRequest.Builder(application)
            .data(artwork)
            .memoryCachePolicy(CachePolicy.DISABLED)
            .dispatcher(dispatcher)
            .build()
        val result = imageLoader.execute(request)
        imageLoader.diskCache?.edit(artwork)?.use { editor ->
            val bitmap = result.drawable.toBitmap()
            FileOutputStream(editor.data).use { sink ->
                bitmap.compress(Bitmap.CompressFormat.JPEG, 90, sink)
            }
            bitmap.recycle()
        }
    }
}

Hope that helps! 🙌

[yschimke]

nit: this doesn't seem like an compiling example

       imageLoader.diskCache?.edit(artwork)?.use { editor ->

Requires this extension method https://github.com/coil-kt/coil/blob/8b378c0e0c4bc2b676d19c974959552d089a100d/coil-base/src/test/java/coil/disk/DiskCacheTest.kt

[colinrtwhite]

@yschimke Ah you're right. We should maybe make that function public API.

[yschimke]

• Caching an optimised size version of the images.

From the example above, I actually want to reduce the image size (width/size), as well as file size. Is that actually possible via ImageRequest? or this approach, but checking the size of the bitmap is warranted.

Also if there is a possibility of SVG, how to I detect this in the listener, and avoid resizing and saving a new Bitmap?

[colinrtwhite]

From the example above, I actually want to reduce the image size (width/size), as well as file size. Is that actually possible via ImageRequest? or this approach, but checking the size of the bitmap is warranted.

If you want to resize the image before it's written to the disk cache you'll have to add an OkHttp interceptor that decodes the response body (using BitmapFactory if it's a JPG/PNG/etc.) then replaces the response body with the resized bitmap converted back into a stream that'll then be written to the disk cache.

Unfortunately Coil doesn't have built-in support for resizing or modifying images before they're written to the disk cache since it would add a lot of complexity.

Also if there is a possibility of SVG, how to I detect this in the listener, and avoid resizing and saving a new Bitmap?

Detecting an SVG is tough since there's no magic number at the beginning of the file like with JPG, WEBP, HEIF and GIF. You could create a fake SourceResult using the response body and pass it to SvgDecoder.Factory to use Coil's built-in heuristics to check if a stream is an SVG. We could probably make DecodeUtils.isSvg a public extension method on DecodeUtils.