Bitmap and image optimization

Bitmap and Image Optimization

Instructions

Images dominate mobile memory and bandwidth. A single 4000×3000 JPEG decoded naively takes 48 MB in RAM (4000 × 3000 × 4 bytes). This skill covers sizing, caching, and format selection.

1. Size Images to the Display Target, Not the Source

Decode to the on-screen pixel size, not the full resolution. The screen does not care about extra pixels.

Android (Glide):

Glide.with(view)
    .load(url)
    .override(view.width, view.height)     // decode to target size
    .format(DecodeFormat.PREFER_RGB_565)    // for opaque images
    .into(view)

Android (Coil):

imageView.load(url) {
    size(ViewSizeResolver(imageView))       // matches the view
    allowRgb565(true)
}

iOS (SDWebImage):

imageView.sd_setImage(
    with: URL(string: url),
    placeholderImage: placeholder,
    context: [.imageThumbnailPixelSize: CGSize(width: 512, height: 512)]
)

iOS native UIImage downsample:

func downsample(url: URL, to size: CGSize, scale: CGFloat) -> UIImage? {
    let opts: [CFString: Any] = [kCGImageSourceShouldCache: false]
    guard let src = CGImageSourceCreateWithURL(url as CFURL, opts as CFDictionary) else { return nil }
    let maxDim = max(size.width, size.height) * scale
    let thumbOpts: [CFString: Any] = [
        kCGImageSourceCreateThumbnailFromImageAlways: true,
        kCGImageSourceShouldCacheImmediately: true,
        kCGImageSourceCreateThumbnailWithTransform: true,
        kCGImageSourceThumbnailMaxPixelSize: maxDim,
    ]
    return CGImageSourceCreateThumbnailAtIndex(src, 0, thumbOpts as CFDictionary).map { UIImage(cgImage: $0) }
}

Flutter:

CachedNetworkImage(
  imageUrl: url,
  memCacheWidth: 512,     // decode at target size
  memCacheHeight: 512,
  placeholder: (c, _) => const ColoredBox(color: Color(0xffeeeeee)),
)

React Native — prefer FastImage or Expo Image; they downsample natively. Set resizeMode and explicit dimensions.

2. Format Selection (2026 defaults)

Use case	Best format	Why
Photos over network	AVIF	30–50% smaller than JPEG; wide OS support (Android 12+, iOS 16+).
Fallback for AVIF	WebP	Universal, better than JPEG/PNG, lossy or lossless.
Apple-first pipelines	HEIC	Native to iOS; smaller than JPEG.
Illustrations / icons	SVG or vector drawable	Scale for free; typically tiny.
Flat UI with transparency	WebP lossless or PNG-8	Smaller than PNG-24.
Animations	AVIF sequence / AVIS or animated WebP	Replace GIFs.

Content-Negotiation from your CDN:

Accept: image/avif,image/webp,image/apng,image/*,*/*;q=0.8

Return AVIF when Accept contains image/avif. Emit Vary: Accept.

3. Bitmap Config (Android)

• Use RGB_565 (2 bytes/px) for opaque photos on low-end devices — halves RAM vs ARGB_8888.
• Use HARDWARE bitmaps on API 26+ — zero-copy to GPU, but cannot be read back on CPU.

BitmapFactory.Options().apply {
    inPreferredConfig = Bitmap.Config.HARDWARE  // API 26+
    inSampleSize = calculateInSampleSize(width, height, targetW, targetH)
}

4. Caching

Every serious loader has a memory cache + disk cache. Size them generously:

• Memory cache: 20–25% of Runtime.getRuntime().maxMemory() (Android) or 50 MB cap (iOS).
• Disk cache: 128–256 MB; keyed by final transformed URL so variant decoding is hit, not recomputed.

Coil example:

ImageLoader.Builder(context)
    .memoryCache { MemoryCache.Builder(context).maxSizePercent(0.25).build() }
    .diskCache { DiskCache.Builder().directory(context.cacheDir.resolve("img")).maxSizeBytes(256L * 1024 * 1024).build() }
    .respectCacheHeaders(true)
    .build()

5. Preload Critical Images

For hero images on the next screen, preload before navigation:

imageLoader.enqueue(ImageRequest.Builder(ctx).data(heroUrl).build())

In SwiftUI use ImageRenderer or AsyncImage with .task { await prefetch() }. In Flutter use precacheImage.

6. Avoid Common Footguns

• Do not decode images on the UI/main thread. All major loaders do this for you; do not reimplement.
• Do not store bitmaps in StateFlow / @State. Store identifiers; let the loader return bitmaps per view.
• Do not apply BackdropFilter / blur over large images; blur once into a smaller buffer, then upscale.
• Placeholder-shimmer components should be cheap — Modifier.background or a single gradient.

7. Verify

• Android: adb shell dumpsys meminfo --package <pkg> | findstr Graphics shows GPU texture memory.
• iOS: Debug → Rendering → Color Misaligned Images (a misaligned image reports a yellow tint = slow path).
• Flutter: DevTools → Memory → filter by Image and ImageCache.

8. Production Metrics

Log per image: URL, source (cache/network), decoded width/height, decode time. A p95 > 40 ms or source=network > 50% on warm scrolls is a regression.

Checklist

• Images decoded at view/display size, not source size.
• Opaque photos use RGB_565 (Android) / thumbnail downsample (iOS).
• AVIF or WebP served with Accept content negotiation; JPEG/PNG only as fallback.
• Memory cache sized to 20–25% of heap; disk cache 128–256 MB.
• Hero images preloaded before navigation.
• No image decoding on main/UI thread.
• CI dashboard tracks p95 image decode time and bytes/screen.