Do I need to declare 2x and 3x variants in pubspec.yaml?

No — Flutter automatically resolves 2x and 3x variants from the 2.0x/ and 3.0x/ subdirectories. You only need to declare the base asset path in pubspec.yaml. The flutter asset compressor includes a ready-to-paste pubspec.yaml snippet with only the base paths listed.

What JPEG quality should I use for Flutter assets?

For most Flutter UI assets, 80% quality is recommended — it achieves 30–50% size reduction with minimal visible quality loss. For assets with text or sharp edges, use 90% quality. For background images and decorative illustrations, 70% is acceptable.

Flutter Asset Compressor

Compress images and package them into Flutter asset density variants — 1x, 2x, and 3x — with the correct directory structure Flutter expects. The flutter asset compressor re-encodes images using the Canvas API, generates assets/images/, assets/images/2.0x/, and assets/images/3.0x/ directories, and includes a ready-to-paste pubspec.yaml snippet. Upload multiple images at once and download everything as a ZIP. All processing happens in your browser with no signup required.

Flutter Asset Compressor

Upload images and compress them into Flutter asset density variants — 1x, 2x, and 3x. The flutter asset compressor generates the correct directory structure (assets/images/, assets/images/2.0x/, assets/images/3.0x/) and includes a pubspec.yaml snippet. All processing happens in your browser — your files never leave your device.

Drop your files here

or click to browse (multiple files supported)

PNG, JPEG, WebP, GIF, BMP files are supported

Why Use Our Flutter Asset Compressor?

Instant Flutter Asset Compression in Your Browser

Compress and generate Flutter density variants instantly in your browser — no server upload, no cloud processing, no waiting. The flutter asset compressor produces 1x, 2x, and 3x variants with the correct directory structure in seconds, entirely on your device.

Secure Flutter Asset Compressor Online

Your images never leave your device. The flutter asset compressor runs entirely in your browser — no server uploads, no data transmission, 100% private. Safe for proprietary app assets, brand images, and production Flutter project files.

Flutter-Ready Directory Structure with pubspec.yaml Snippet

The flutter asset compressor outputs a ZIP with the exact directory layout Flutter expects — assets/images/, assets/images/2.0x/, and assets/images/3.0x/ — plus a ready-to-paste pubspec.yaml assets snippet. Drop it straight into your project.

100% Free Forever

The flutter asset compressor is completely free with no signup, no premium tier, no file size limits, and no ads. Generate unlimited Flutter asset density variants at zero cost, forever.

Common Use Cases for Flutter Asset Compressor

New Flutter Project Asset Setup

When starting a new Flutter project, use the flutter asset compressor to prepare all your image assets in the correct 1x, 2x, and 3x density variants from the start. The generated pubspec.yaml snippet saves you from manually writing asset declarations for every image.

Reducing Flutter App Download Size

Compress Flutter image assets to reduce your app's total download size on the App Store and Google Play. The flutter asset compressor re-encodes images using the Canvas API, stripping metadata and applying quality reduction — smaller assets mean faster installs and better store conversion rates.

Splash Screen and Onboarding Image Optimization

Compress large splash screen images and onboarding illustrations for all Flutter density variants. The flutter asset compressor ensures your high-resolution source images are correctly scaled to 1x, 2x, and 3x without manual resizing in Photoshop or Figma.

Migrating Assets from React Native or Native Apps

When migrating an existing iOS or Android app to Flutter, use the flutter asset compressor to convert your @1x/@2x/@3x or mdpi/hdpi/xhdpi assets into Flutter's density variant format. The output ZIP drops directly into your Flutter project with no renaming required.

CI/CD Asset Pipeline Preparation

Prepare compressed Flutter asset variants before committing to your repository. The flutter asset compressor produces production-ready assets that reduce repository size and improve CI/CD build times — especially important for large Flutter projects with many image assets.

Updating Existing Flutter Assets

When updating brand assets, icons, or illustrations in an existing Flutter app, use the flutter asset compressor to regenerate all density variants from the new source image. The output filenames match your existing assets — just replace the files and run flutter pub get.

Understanding Flutter Asset Compression

What is Flutter Asset Compression?

Flutter uses a device pixel ratio (DPR) system to serve the correct image resolution for each screen density. Images are organized into density variant directories: assets/images/ (1x — base), assets/images/2.0x/ (2x — medium-DPI), and assets/images/3.0x/(3x — high-DPI). Flutter automatically selects the appropriate variant at runtime based on the device's pixel ratio. Flutter asset compressionreduces the file size of each density variant using the browser's Canvas API — removing metadata and applying quality reduction — so your app downloads faster and uses less storage on device. Our flutter asset compressor generates all three variants from a single source image and packages them in the correct directory structure for immediate use.

How Our Flutter Asset Compressor Works

1Upload your source images: Drag and drop PNG, JPEG, WebP, GIF, or BMP files. Use your highest-resolution source image (3x or higher) for best results — the flutter asset compressor scales down to generate 1x and 2x variants. Files are loaded into your browser with no server upload.
2Select density variants and JPEG quality, then click "Compress & Generate Variants": The flutter asset compressor generates 1x (full resolution, compressed), 2x (66% of source, compressed), and 3x (full resolution, compressed) variants. PNG files are losslessly re-encoded; JPEG files are re-encoded at the selected quality. All processing runs in your browser.
3Download the ZIP and drop it into your Flutter project: The ZIP contains the correct directory structure and a pubspec_assets_snippet.yaml file. Copy the snippet into your pubspec.yaml and run flutter pub get.

What Gets Compressed and Generated

1x Variant (assets/images/): The source image re-encoded at full resolution with metadata stripped. PNG files are losslessly re-encoded using the Canvas API — removes EXIF data, ICC profiles, and embedded thumbnails. Transparency is fully preserved.
2x Variant (assets/images/2.0x/): The source image scaled to 66% of its original dimensions and compressed. Flutter serves this variant on medium-DPI screens (device pixel ratio ≈ 2.0). Scaling uses bilinear interpolation via the Canvas API.
3x Variant (assets/images/3.0x/): The source image re-encoded at full resolution — treated as the high-DPI variant. Flutter serves this on high-DPI screens (device pixel ratio ≈ 3.0) such as iPhone Pro and high-end Android devices.
pubspec.yaml Snippet: A ready-to-paste YAML block listing all compressed assets under the flutter: assets: key. Flutter automatically resolves 2x and 3x variants from the subdirectories without listing them separately.

Important Limitations

The flutter asset compressor generates density variants by scaling the source image — for best results, always upload the highest-resolution version of your image (ideally 3x or higher). Scaling up from a low-resolution source will produce blurry variants. Note that Flutter's asset resolution system requires the base asset path to be declared in pubspec.yaml — the 2x and 3x subdirectory variants are resolved automatically and do not need separate declarations. For vector assets, consider using SVG via the flutter_svg package instead of raster density variants.

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 Flutter Asset Compressor

A flutter asset compressor reduces the file size of Flutter image assets and generates the correct density variants (1x, 2x, 3x) that Flutter uses to serve the right resolution on each device. Our free flutter asset compressor online runs entirely in your browser — your images never leave your device.

Flutter uses device pixel ratio (DPR) to select the correct image variant at runtime. Images in assets/images/ are the 1x base; images in assets/images/2.0x/ are served on medium-DPI screens; images in assets/images/3.0x/ are served on high-DPI screens. The flutter asset compressor generates all three variants from your source image automatically.

No — Flutter automatically resolves 2x and 3x variants from the 2.0x/ and 3.0x/ subdirectories. You only need to declare the base asset path (e.g. assets/images/logo.png) in pubspec.yaml. The flutter asset compressor includes a ready-to-paste pubspec.yaml snippet with only the base paths listed.

Yes, completely. The flutter asset compressor runs entirely in your browser. Your images are never uploaded to any server and never leave your device. All processing — scaling, compression, and ZIP packaging — happens locally in your browser.

Yes — 100% free, forever. No signup, no account, no premium tier, no file size limits, and no ads. Generate unlimited Flutter asset density variants completely free.

Upload the highest-resolution version of your image — ideally your 3x source or higher. The flutter asset compressor scales down to generate 1x (33% of source) and 2x (66% of source) variants. Uploading a low-resolution image and scaling up will produce blurry variants.

No — the flutter asset compressor preserves alpha channel transparency when re-encoding PNG files. Flutter app icons, UI elements, and illustrations with transparent backgrounds are fully supported. The Canvas API maintains the original alpha values during re-encoding.

For most Flutter UI assets, 80% quality is recommended — it achieves 30–50% size reduction with minimal visible quality loss. For assets with text, sharp edges, or fine detail, use 90% quality. For background images and decorative illustrations, 70% quality is acceptable.

Extract the ZIP into your Flutter project root. The assets/images/ directory will be created (or merged) with the correct structure. Copy the pubspec_assets_snippet.yaml content into your pubspec.yaml under the flutter: key, then run flutter pub get. Flutter will automatically resolve the 2x and 3x variants at runtime.