Designing an image loading library

Mobile system design Senior Kotlin 2.0+ API 24+ Reviewed By Best Latest Apps

Order the steps

Order an image request through a loader.

  • Store in caches and deliver if the request is still active
  • Decode off the main thread at the target size
  • Download, joining any identical in-flight request
  • Check the memory cache by key
  • Check the disk cache

Choose an answer, then open Show answer below to check it.

Show answer

Answer: D E C B A

  1. Check the memory cache by key Fastest; no decode needed.
  2. Check the disk cache Avoids the network.
  3. Download, joining any identical in-flight request No duplicate downloads.
  4. Decode off the main thread at the target size Saves memory and time.
  5. Store in caches and deliver if the request is still active Skip if cancelled.

30-second answer

A request goes through a pipeline: check a memory cache (an LRU of decoded bitmaps sized to a fraction of the app's heap), then a disk cache of encoded bytes, then the network. Decode off the main thread, downsampled to the target view size, deduplicate identical in-flight requests, and cancel requests when the view or composable leaves the screen.

Practise saying it · 40 s. No recording, just a timer

Design an image loader.

Say your answer out loud, then check which of these points you covered:

  • Memory LRU, disk cache, network
  • Downsample to target size
  • Deduplicate
  • Cancel on recycle
  • Trim on memory pressure

Deep dive

Cache keys include URL plus size and transformations.

Bitmap memory is width × height × 4 bytes for ARGB_8888.

Respond to onTrimMemory by clearing the memory cache.

Respect HTTP caching headers for the disk cache.

Common mistakes

  • Decoding full-size images for thumbnails.
  • No cancellation, so fast scrolling loads images for gone rows.
  • An unbounded memory cache.

Senior take & follow-ups

Walk the pipeline and say what each layer is for.

Follow-up questions

Think of your answer first, then open the hint.

  1. Why a memory and a disk cache?

    Show hint

    Memory is instant but small; disk survives restarts.

  2. Why deduplicate?

    Show hint

    Ten rows with the same avatar should cause one download.

Compare on iOS: A fast image-loading pipeline The same pipeline and the same cache layers.

Related questions

Suggest a fix if something here is wrong or out of date.