Image Optimization
Images are the #1 source of memory and bandwidth waste in mobile apps. A single unoptimized HEIC from iPhone 15 Pro is 20MB. Serving it full-size in a 100×100 thumbnail wastes 99% of those bytes.
Image Optimization Strategy
- **Format**: Request AVIF or WebP from your CDN - 30-50% smaller than JPEG at same quality. Most modern Android and iOS devices decode both natively
- **Resolution**: Request images sized to the display size × pixel density. A 100×100 avatar on a 3× screen needs 300×300 pixels - no more
- **CDN transforms**: Use Cloudinary or imgix URL params to resize on the fly: `https://res.cloudinary.com/demo/image/upload/w_300,h_300,c_fill,f_webp/avatar.jpg`
- **Blurhashs / thumbhash**: Server generates a tiny (20-byte) blurred placeholder; show immediately while full image loads. expo-image supports `placeholder={{ thumbhash }}` natively
- **Prefetch**: `Image.prefetch(uri)` - start downloading before the item scrolls into view using `onEndReached` to trigger prefetch of next batch
- **expo-image cachePolicy**: Use `'memory-disk'` for feed images. Disk cache persists between app sessions - already-viewed images never re-download
Tip
Tip
Practice Image Optimization in small, isolated examples before integrating into larger projects. Breaking concepts into small experiments builds genuine understanding faster than reading alone.
Reducing network payloads and memory usage with WebP/AVIF and CDN resizing
Practice Task
Note
Practice Task - (1) Write a working example of Image Optimization from scratch without looking at notes. (2) Modify it to handle an edge case (empty input, null value, or error state). (3) Share your solution in the Priygop community for feedback.
Quick Quiz
Common Mistake
Warning
A common mistake with Image Optimization is skipping edge case testing - empty inputs, null values, and unexpected data types. Always validate boundary conditions to write robust, production-ready react native code.
Key Takeaways
- Images are the #1 source of memory and bandwidth waste in mobile apps.
- *Format**: Request AVIF or WebP from your CDN - 30-50% smaller than JPEG at same quality. Most modern Android and iOS devices decode both natively
- *Resolution**: Request images sized to the display size × pixel density. A 100×100 avatar on a 3× screen needs 300×300 pixels - no more
- *CDN transforms**: Use Cloudinary or imgix URL params to resize on the fly: `https://res.cloudinary.com/demo/image/upload/w_300,h_300,c_fill,f_webp/avatar.jpg`