Compress React Native Assets — Smaller Bundles on Both Platforms
Compress the images in your React Native project before building — smaller iOS and Android bundles from a single asset folder, no code changes.
Quick answer
Drop your React Native project's assets folder into TinyPixels before building. It compresses every image — including @2x and @3x variants — in place, shrinking both your iOS and Android bundles with zero code changes.
How to compress images before a React Native build
Download and open TinyPixels
Free to install on Mac or Windows — no account needed to start.
Drop your assets folder in
Compress images including @2x and @3x resolution variants.
Compress in place, same resolution
Pixel dimensions stay identical — only file size drops, no code changes.
Rebuild for iOS and Android
Both platform builds ship smaller from the same compressed asset folder.
One asset folder, two platform builds
React Native's shared codebase means the same image assets get bundled into both the iOS IPA and Android APK/AAB. Icons, illustrations, and onboarding images exported from design tools are frequently far larger than needed for the resolutions the app actually renders them at, and Metro bundler doesn't re-encode them.
Compressing the shared assets folder once means both platform builds benefit simultaneously — smaller downloads, faster installs, and no separate compression pass needed per platform.
No code changes needed
Compress in place — require() and Image loads the same bytes, just smaller.
Both platforms benefit at once
One compressed asset folder reduces size in both iOS and Android builds.
All resolution suffixes covered
Compress @2x and @3x variants in the same batch pass.
Faster Metro bundling
Smaller committed assets mean faster bundling and CI build times.
Static assets vs. remote images
Pre-compression only applies to one of the two ways React Native apps load images:
| Source | Loaded via | Fix |
|---|---|---|
| Bundled static assets (icons, illustrations, onboarding) | require('./image.png') / static Image source | Pre-compress before bundling — this page |
| Remote images (CDN, user avatars, feed content) | Image source={{ uri }} | Handle server-side (CDN transforms, on-upload compression) — not fixed by pre-compressing local assets |
TinyPixels reduces the size of everything Metro bundles directly into your app binary. It has no effect on images fetched at runtime from a URL — those need to be optimized where they're served from.
Common mistakes with React Native assets
Only exporting @3x and letting the packager downscale
If you only ship a @3x asset, low-density devices still download the full @3x file and downscale it at runtime — provide properly sized @1x/@2x/@3x variants so each device gets an appropriately sized file.
Forgetting Android density-specific folders exist too
If your build also ships native Android resources for splash screens or app icons, those live in res/mipmap-* folders separate from the JS-bundled assets/ folder and need to be compressed separately.
Not re-checking asset size after a design refresh
Every time illustrations or icons get restyled, freshly exported files often reintroduce bloat — treat compression as a step in your asset pipeline, not a one-time cleanup.
Confusing Hermes bytecode optimization with asset optimization
Hermes speeds up JS execution, not image payload size — bundled image assets still ship at whatever size they were compressed to before build.
Frequently asked questions
Does React Native compress images automatically?
No. Images referenced via require() or Image source are bundled at whatever size they were added to the project, for both the iOS and Android builds. Metro bundler does not re-encode image content.
Does compressing images affect the @2x and @3x resolution suffixes?
No. React Native's resolution suffix system (@2x, @3x) still works normally after compression — you're only reducing the file size of each variant, not changing its pixel dimensions or how the packager selects the right one.
Does compressing images help both the iOS and Android builds?
Yes. A single React Native codebase shares the same image assets across both platform builds, so compressing them once reduces size in both the resulting IPA and APK/AAB.
Can I batch compress my whole React Native project's images at once?
Yes. Drop your assets folder into TinyPixels and every image — including all resolution suffix variants — compresses in one pass, ready to commit before your next build.
Shrink your React Native app today
Free to start. No credit card, no account, no cloud. See Pro pricing →
Related tools
Compress Android Assets
Shrink your Android app bundle with local compression.
Compress SwiftUI Assets
Shrink your Apple platform app bundle.
Compress Flutter Assets
Shrink your Flutter app bundle with local compression.
Batch Image Compressor
Compress every resolution variant in one pass.
Image Compressor Hub
Every format, platform, and framework in one place.
Compress Xcode Assets
Shrink your iOS app bundle with local compression.
Compress Unity Assets
Shrink your Unity project with local texture compression.
Compress Electron Assets
Shrink your Electron app installer with local compression.
Read more: How to reduce your app size on mobile and desktop → · Fix your Lighthouse score where it actually matters →