The Ultimate Guide to Flutter Image Compress: Everything You Need to Know

Working with image-based applications can be challenging in Flutter, particularly when managing your app's performance. The size of images is a vital factor that can significantly impact your application's speed, efficiency, and storage utilization. This is where image compression enters the picture, and it's crucial to reduce an image's file size without significantly diminishing the image quality.

One efficient way we can accomplish this in Flutter is by using flutter_image_compress, a popular package explicitly designed for this purpose. This package allows developers to effectively reduce the size of images, resulting in better-functioning Flutter applications.

In this blog post, we will explore the workings and implementation of the flutter_image_compress package. We'll navigate through image compression, installation, and usage of the package, judging the quality of compressed images, troubleshooting, and more. So buckle up, and let's start this fascinating journey, making your Flutter projects more efficient and productive!

Remember, we're here together in this! If you feel stuck or confused, revisit the section for clarity. We have sprinkled code snippets throughout the blog to clarify your understanding.

Before we delve into the depths of flutter_image_compress, let's take a moment to understand why we need to compress images in the first place.

Why Use Flutter Image Compression?

High image quality is essential for a visually appealing application. However, high-quality images usually come with larger file sizes, which can be problematic for mobile apps. Larger file sizes result in longer loading times, use more memory, and can quickly drain users' data plans, leading to their dissatisfaction.

This is where image compression becomes incredibly crucial in Flutter applications. Image compression helps to reduce file size by reducing the file's data amount, enabling the app to maintain its original image quality as much as possible. This means your app can upload and download images faster, providing a smoother user experience.

Remember that the smaller the image size, the faster the image uploads, resulting in quicker data retrieval from the backend. Your users will thank you for the faster image uploads and quicker loading times!

Apart from enhancing user experience, a lesser-known advantage of image compression involves reducing the storage space consumed on the device. Compressed images save storage space, leaving more room for the user's device.

With library support like flutter_image_compress, image compression becomes incredibly easy in our Flutter projects. It allows us to compress our images and gives us the power to resize them before uploading and even obtain the image file size.

Exploring the Flutter_image_compress Package

The flutter_image_compress package is a powerful tool that allows us to compress images in Flutter apps. The library facilitates the compression of images efficiently on native platforms (Kotlin for Android and Objective-C for iOS), guaranteeing optimal performance in both Android and iOS apps.

One crucial question is, "Why can't we use existing Dart libraries for image compression?" While Dart supports some image compression libraries, their performance is sub-optimal for unknown reasons. Even isolates don't seem to alleviate the problem, hence the preference for a native implementation provided by flutter_image_compress.

Utilizing the flutter_image_compress package in your project requires you first to import the package. Here is how you can do it:

1import 'package:flutter_image_compress/flutter_image_compress.dart';

Once imported, you can easily leverage the methods provided by the library. We will delve deeper into the usage of this package in later sections.

Installation of the Flutter_image_compress Package

Incorporating the flutter_image_compress package into your Flutter project is a simple process. First, you need to define it in your pubspec.yaml file under the dependencies section. Always ensure to check pub.dev for the latest version.

1dependencies:
2  flutter_image_compress: ^<latest_version>

After entering this line and saving your pubspec.yaml file, you need to install the package via the terminal by running the command:

1flutter pub get

Once the package is fetched and installed, it can be imported into your Dart file.

1import 'package:flutter_image_compress/flutter_image_compress.dart';

Congratulations, you've successfully added the flutter_image_compress package to your project! Now let's get our hands dirty and look at how we'll use it for image compression.

Performing Image Compression with flutter_image_compress

With the flutter_image_compress package incorporated and ready in our Flutter project, it's time to leverage it for image compression.

To compress an image, flutter_image_compress provides several methods. Here's a basic implementation:

1. Compressing a file and getting a Uint8List.

1Future<Uint8List> compressFile(File file) async {
2  var result = await FlutterImageCompress.compressWithFile(
3    file.absolute.path,
4    minWidth: 2300,
5    minHeight: 1500,
6    quality: 94,
7    rotate: 90,
8  );
9  print(file.lengthSync());
10  print(result.length);
11  return result;
12}

2. Compressing a file and getting a File.

1Future<File> compressAndGetFile(File file, String targetPath) async {
2  var result = await FlutterImageCompress.compressAndGetFile(
3      file.absolute.path, targetPath,
4      quality: 88,
5      rotate: 180,
6    );
7
8  print(file.lengthSync());
9  print(result.lengthSync());
10
11  return result;
12}

3. Compressing an asset and getting a Uint8List.

1Future<Uint8List> compressAsset(String assetName) async {
2  var list = await FlutterImageCompress.compressAssetImage(
3    assetName,
4    minHeight: 1920,
5    minWidth: 1080,
6    quality: 96,
7    rotate: 180,
8  );
9
10  return list;
11}

4. Compressing a Uint8List and getting another Uint8List.

1Future<Uint8List> compressList(Uint8List list) async {
2  var result = await FlutterImageCompress.compressWithList(
3    list,
4    minHeight: 1920,
5    minWidth: 1080,
6    quality: 96,
7    rotate: 135,
8  );
9  print(list.length);
10  print(result.length);
11  return result;
12}

The compressWithFile, compressAndGetFile, compressAssetImage, and compressWithList methods handle various compression needs. Whether you need a File or Uint8List, these methods have you covered.

(Note: Always call .lengthSync() on your original and compressed File to see the difference in size before and after compression.)

Customizing the Flutter Image Compression Process

The flutter_image_compress package allows you to customize your compression process with various parameters. In this section, we'll learn about each parameter and its use in the compression process. Let's examine the most commonly used parameters:

1. minWidth and minHeight: These parameters serve as constraints on image scaling. They define the minimum width and height you desire the image to be resized while maintaining the aspect ratio. Let's take an image of size 4000*2000, for instance. If we set the minWidth to 1920 and minHeight to 1080, the image's size will be calculated to maintain its aspect ratio.
2. quality: An integer from 0 to 100, that directly impacts your image quality after compression. The higher the value, the greater the quality retained. However, a higher quality value means a larger file.
3. rotate: This parameter is used to rotate the image in degrees. It accepts an integer value, where positive values rotate the image clockwise and negative values rotate it anticlockwise.
4. autoCorrectionAngle : This property only exists in versions after 0.5.0. It might conflict with the rotate attribute that needs self-correction. If you need the automatic angle correction, try setting it to true and ignore the rotate parameter, so it corrects the image orientation automatically.
5. format : This defines the format in which you want your image after compression. It can either be jpeg or png and the default is jpeg. The jpeg format is generally smaller in size than PNG, hence quicker to upload and download. However, PNG supports transparent backgrounds.
6. inSampleSize: This parameter is supported only on Android, which allows us to downsize the image bitmaps efficiently.

Knowing these parameters, you can compress your images according to custom requirements.

Resizing Image Before Upload (using Flutter_image_compress)

In image-heavy applications, you may need to allow users to upload images. However, due to their considerable size, high-resolution images can significantly slow down a Flutter application's performance. Therefore, resizing an image before uploading becomes something of great value.

With flutter_image_compress, we have a feature to resize an image while maintaining the aspect ratio, significantly reducing the image size. Here's how you can accomplish this:

1Future<File> resizeImageBeforeUpload(File file, String targetPath) async {
2  var result = await FlutterImageCompress.compressAndGetFile(
3    file.absolute.path,
4    targetPath,
5    minWidth: 1080,
6    minHeight: 720,
7    quality: 88,
8    rotate: 180,
9  );
10  print(file.lengthSync());
11  print(result.lengthSync());
12  return result;
13}

In the above code, we use the compressAndGetFile function to set the minWidth and minHeight parameters to the desired maximum resolution (1080*720). Remember, these parameters don't stretch your image if it's of smaller resolution than provided; they only downscale high-resolution images.

By using this method, we're not just resizing our image but also compressing it while retaining as much image quality as possible. This function enhances not just the upload times but also the image loading times in your app.

Getting Image File Size in Flutter

Have you ever wondered how to get an image's file size in Flutter? Ostensibly simple, but necessary for image compression operations. Being aware of the image size can play a critical role in deciding the compression scale, thus retaining the optimal balance between size and quality. We can determine a file's size in Flutter by using the lengthSync() function.

Here is an example:

1Future<int> getImageFileSize(File file) async {
2  int fileSize = file.lengthSync();
3  print("File Size is: $fileSize");
4  return fileSize;
5}

In the above code, we get the file size (in bytes) using lengthSync(). We can further convert this byte value into KB, MB, or GB per our requirements.

Knowing the image file size is a stepping stone towards intelligent image compression, which can dynamically compress images based on their original file size.

Comparing Image Quality Before and After Compression

While image compression plays a vital role in enhancing app performance, it's also crucial to consider the impact of compression on the quality of images. Most compression algorithms work by sacrificing some amount of image quality to reduce file size. Yet, with flutter_image_compress, you can maintain a fair balance between the two.

When compressing images, you must consider the image quality necessary for your application. For instance, a portfolio app for a photographer might need high-quality images, thus requiring a lower level of compression. On the other hand, a social media app where users upload numerous pictures may afford to compromise a bit on image quality to improve app speed and storage efficiency.

The code snippet below demonstrates how to compare image quality before and after compression:

1Future<void> compareImageQuality(File file, String targetPath) async {
2  var originalSize = await getImageFileSize(file);
3
4  var compressedFile = await compressAndGetFile(file, targetPath);
5  var compressedSize = await getImageFileSize(compressedFile);
6
7  print("Original Image Size: $originalSize bytes");
8  print("Compressed Image Size: $compressedSize bytes");
9}

In the above method, getImageFileSize is a function that takes a file as an argument and returns the size of the file. After comparison, you will usually observe that the size of the compressed image is significantly smaller than the original image size, all while retaining a decent image quality.

Common Challenges and Troubleshooting with Flutter_image_compress

As with any software library, you might encounter challenges while working with the flutter_image_compress package. However, don't worry. There are solutions and workarounds to these problems! Here are some troubleshooting tips to rectify the most common issues:

1. Compressing returns null: In some situations, the compression process may return null. This could happen if the file or the directory doesn't exist or the app doesn't have the necessary permissions to read/write the file. To fix this, ensure that the relevant files and directories exist and that your app has the required permissions.
2. Out of Memory (OOM) exceptions: Working with large images can lead to OOM exceptions due to over-utilization of memory. In such cases, resizing the images as a first step may prove beneficial before performing other intensive operations.
3. Runtime errors: Because of some compatibility issues, all APIs might not be compatible with all devices, and UnsupportedError may be thrown. To address this, be prepared to catch the exception and resort to jpeg compression on unsupported devices.

1Future<Uint8List> compressAndTryCatch(String path) async {
2  Uint8List result;
3  try {
4    result = await FlutterImageCompress.compressWithFile(
5      path,
6      format: CompressFormat.heic,
7    );
8  } on UnsupportedError catch (e) {
9    print(e);
10    result = await FlutterImageCompress.compressWithFile(
11      path,
12      format: CompressFormat.jpeg,
13    );
14  }
15  return result;
16}
17

Remember, a knowledgeable developer knows how to code and solves problems that pop up along the way!

Conclusion

In conclusion, handling images efficiently in mobile applications is key to delivering smooth user experiences. The flutter_image_compress package is an incredibly easy and flexible tool in your Flutter toolset to handle image compression and resizing. Not only does it help optimize the image sizes and ensure images load faster and storage consumption is considerably reduced, leading to a performance-optimized app.

While there's no 'one size fits all' solution for image compression, and every app will have different needs, the flutter_image_compress package has enough flexibility to cater to a vast array of requirements. We hope this post helps you efficiently manage your images in Flutter, leading to delighted end-users. and high-performing apps.

Happy Fluttering!

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.