React Native Asset Compressor
Compress and resize images to @1x, @2x, and @3x React Native asset densities in your browser — no signup required. The react native asset compressor generates all three density variants from a single source image, applies quality compression, and packages them as a ready-to-use ZIP. Upload multiple images at once for batch processing. All processing happens locally on your device.
React Native Asset Compressor
Upload images and generate @1x, @2x, and @3x React Native density variants — all compressed and packaged as a ZIP. The react native asset compressor treats your source image as @3x and downscales to @2x and @1x automatically. All processing happens in your browser. Your files never leave your device.
Why Use Our React Native Asset Compressor?
Instant @1x @2x @3x Variant Generation
Generate all three React Native density variants from a single source image in seconds — entirely in your browser. The react native asset compressor downscales your @3x source to @2x and @1x using high-quality Canvas interpolation, with no server upload and no waiting.
Secure React Native Asset Compressor Online
Your images never leave your device. The react native asset compressor runs entirely in your browser — no server uploads, no data transmission, 100% private. Safe for proprietary app icons, splash screens, and production React Native assets.
Batch Process Multiple Images at Once
Upload multiple images simultaneously and generate density variants for all of them in a single pass. All output files are packaged into a ready-to-use ZIP archive with the correct React Native naming convention — image.png, image@2x.png, image@3x.png.
100% Free Forever
The react native asset compressor is completely free with no signup, no premium tier, no file size limits, and no ads. Generate unlimited React Native asset density variants at zero cost, forever.
Common Use Cases for React Native Asset Compressor
App Icon Generation for All Screen Densities
Generate @1x, @2x, and @3x variants of your React Native app icons in one step. The react native asset compressor ensures your icons look sharp on every device — from low-density Android screens to high-DPI iPhone Retina displays — without manually resizing in Photoshop or Figma.
Splash Screen and Onboarding Image Optimization
Compress and resize splash screens and onboarding illustrations to all three density variants. The react native asset compressor reduces file sizes while preserving visual quality, helping your app load faster and reducing the total bundle size for App Store and Play Store submissions.
UI Asset and Illustration Preparation
Prepare UI illustrations, background images, and decorative assets for React Native screens. The react native asset compressor generates correctly named density variants that React Native automatically selects at runtime — no code changes needed, just drop the files into your assets directory.
Expo and React Native CLI Projects
Works seamlessly with both Expo and bare React Native CLI projects. The react native asset compressor outputs files following the standard React Native naming convention (image.png, image@2x.png, image@3x.png) that both Expo and Metro bundler recognize automatically.
Design Handoff and Asset Export
Convert design exports from Figma, Sketch, or Adobe XD into React Native-ready density variants. The react native asset compressor accepts any PNG, JPEG, or WebP export and produces all three density files in a ZIP — ready to hand off to developers or drop directly into the project.
App Store and Play Store Submission Prep
Reduce your React Native app bundle size before App Store and Play Store submission by compressing all image assets. The react native asset compressor applies quality compression to each density variant, helping you stay within size limits and improve download conversion rates.
Understanding React Native Asset Compression
What is React Native Asset Density?
React Native uses a pixel density system to serve the correct image resolution for each device screen. The three standard densities are @1x (base resolution, ~1 CSS pixel = 1 device pixel), @2x (Retina / standard high-DPI, 2 device pixels per CSS pixel), and @3x (high-DPI iPhone and flagship Android screens, 3 device pixels per CSS pixel). When you reference an image with require('./image.png'), React Native automatically selects the correct density variant at runtime based on the device's screen density. Our react native asset compressor generates all three variants from a single source image, correctly named and compressed.
How Our React Native Asset Compressor Works
- 1Upload your source image: Drag and drop a PNG, JPEG, WebP, GIF, or BMP image. Use your highest-resolution asset as the source — ideally the @3x version or a design export at 3× the intended display size. The file is loaded into your browser — no data is sent to any server.
- 2Choose output format, quality, and density variants: Select PNG (recommended for icons and assets with transparency) or JPEG (smaller for photos). Choose JPEG quality if applicable. Select which density variants to generate — all three, @2x and @3x only, or @3x only. Processing runs entirely in your browser using the Canvas API.
- 3Download and add to your project: All density variants are packaged as a ZIP archive. Extract and place the three files in the same directory in your React Native project. Reference the asset with
require('./image.png')— React Native handles the rest automatically.
What Gets Generated
- @1x Variant (image.png): The base resolution — one-third of the source image dimensions. Used on low-density screens and as the fallback. Typically the smallest file of the three variants.
- @2x Variant (image@2x.png): Two-thirds of the source image dimensions. Used on standard Retina displays (most iPhones and mid-range Android devices). The most commonly served variant in practice.
- @3x Variant (image@3x.png): Full source image dimensions. Used on high-DPI flagship devices (iPhone Pro, high-end Android). Largest file size but sharpest rendering on supported screens.
- Compression Applied:PNG output strips metadata and re-encodes losslessly. JPEG output applies the selected quality level (60–90%) for additional size reduction. High-quality Canvas downscaling (imageSmoothingQuality: 'high') is used for all variants.
React Native Asset Naming Convention
React Native's Metro bundler uses a specific naming convention to identify density variants: image.png for @1x, image@2x.png for @2x, and image@3x.png for @3x. All three files must be in the same directory. The react native asset compressor outputs files with exactly this naming convention — no renaming required. This works with both Expo (managed and bare workflow) and bare React Native CLI projects.
Related Tools
JSON Key Shortener
Shorten verbose JSON keys to single letters or abbreviated forms — shows size reduction and provides a downloadable key mapping file for restoration. Free online JSON key shortener.
JSON vs MessagePack Size Comparison
Compare JSON byte size vs MessagePack encoding for any payload — shows exact savings, type-by-type breakdown, and MessagePack hex preview. Free online JSON vs MessagePack comparison.
String Decompressor (GZIP/LZ)
Decompress GZIP+Base64, DEFLATE+Base64, and LZ-String compressed payloads back to readable text — supports all three LZ-String variants. Free online string decompressor.
ZIP File Extractor
Extract files from any ZIP archive client-side — browse contents, preview text files, download individual files or all at once. Free online ZIP extractor, no signup required.
Frequently Asked Questions About React Native Asset Compressor
A React Native asset compressor resizes and compresses images to the three standard density variants used in React Native apps — @1x (base), @2x (double), and @3x (triple). Our free react native asset compressor online generates all three variants from a single source image and packages them as a ZIP. Your files never leave your device.
React Native uses a pixel density system where @1x is the base resolution, @2x is twice the pixel density (for standard Retina displays), and @3x is three times the density (for high-DPI iPhone and Android screens). The react native asset compressor generates all three from your source image automatically — React Native selects the correct variant at runtime based on the device screen density.
Yes, completely. The react native asset compressor runs entirely in your browser using the Canvas API. Your images are never uploaded to any server and never leave your device. All resizing and compression happens locally — safe for proprietary app icons, splash screens, and production React Native assets.
Yes — 100% free, forever. No signup, no account, no premium tier, no file size limits, and no ads. Compress and generate unlimited React Native asset density variants completely free.
The react native asset compressor supports PNG, JPEG, WebP, GIF, and BMP input formats. PNG output preserves transparency (alpha channel). JPEG output uses the selected quality setting. React Native natively supports PNG and JPEG — PNG is recommended for icons and assets with transparency.
Place the three files (image.png, image@2x.png, image@3x.png) in the same directory in your React Native project. React Native automatically selects the correct density variant at runtime based on the device screen density. Reference the asset with require("./image.png") — no additional configuration needed. This works with both Expo and bare React Native CLI projects.
Use the @3x (highest density) image as your source for best quality. The react native asset compressor treats your source as @3x and downscales to @2x and @1x, which always produces sharper results than upscaling. Ideally, your source image should be at least 3× the intended display size — for example, if the image displays at 100×100 points, use a 300×300px source.
Yes — the react native asset compressor supports batch processing. Upload multiple images and each one will generate its own set of @1x, @2x, and @3x variants. All generated files are packaged into a single ZIP archive for download, with each file correctly named following the React Native density naming convention.
There is no artificial file size limit. The practical limit depends on your browser's available memory. For typical React Native assets — icons, splash screens, and UI images — the react native asset compressor processes them instantly.