Pattern
Compute a URL from the view’s dimensions and the device’s pixel density, then hand the URL to your image loader.Android (Java)
Android (Kotlin)
iOS (Swift)
iOS (SwiftUI)
Tips
- Compute width after layout. Calling before layout returns 0. Use
viewDidLayoutSubviews(UIKit) /onAppear(SwiftUI) / view-tree observers (Android). - Round to design tokens. A
123 pxrequest and a124 pxrequest are two different cache entries. Snap widths to[160, 320, 480, 720, 1080]etc. - DPR clamp.
dpr ≥ 4rarely helps; clamp tomin(actualDpr, 3). - Pre-fetch hero images during splash / loading for fast first paint.
- Pair with library cache. Glide/Coil/SDWebImage/Kingfisher all cache by URL — Tenbyte’s cache + their disk cache = great offline UX.
Verify
Run the app and inspect the request URL in your debugger or proxy (Charles, Proxyman):content-type: image/webp on Android (and image/heic or image/webp on iOS depending on negotiation).
Operational tips
- Don’t ship the secret in the app. If you use Token Authentication, sign URLs server-side and hand them to the app via your API. Never embed the secret in the binary.
- Long TTLs. Image paths should have multi-month TTLs in cache rules — saves origin egress and helps offline scenarios.