Image Compression in Android

In any application, images play a critical role. It aids in the better communication of our message. It does, however, have significant drawbacks. It expands the APK’s size. You may have noticed that programs that deal with photos (whether local or downloaded from the internet) are larger in size, and we also know that the smaller the application size, the more downloads it receives. As a result, if we lower the size of the photos used in the program, the APK size will be reduced as well. So, in this article, we’ll learn about picture compression so that, in the future, if you want to utilize images in your app, you can simply refer to this blog and select the most appropriate image format to lower the APK size.

In this article, we’ll go over the following topics:

• What is the purpose of image compression?
• WebP image, PNG image, Vector image, and JPEG image

What is the purpose of Image compression?

The greatest way to communicate our message to our users is through images. In comparison to texts, we can express information considerably more effectively using visuals. However, the difficulty with photos is that they can rapidly become bloated. Images that are excessively large or have too many pixels or resolutions can degrade the performance of your application. For example, if your app is loading a 5MB image over a 2G network and it is taking too long, you may lose one user. Not only will downloading the image consume extra bandwidth, but it will also deplete the battery. As a result, it is critical to ensure that the images used in your application are compressed to provide a better user experience.

PNG 

Portable Network Graphics is the most widely used picture format in Android nowadays. They offer a high-resolution image format that is pleasing to the eye. However, we must additionally use some picture compression techniques as a result of this. PNG compressions are lossless, which means you can restore your original image from the compressed version, with no color loss. In a PNG image, each row of pixels is taken and processed separately. The entire PNG compression process can be broken down into two steps.

• Filtering: In this step, we’ll keep track of the value at each pixel and calculate the difference between that value and the value at the next or previous pixel, or the value up or down a pixel. As a result, the major goal is to achieve the smallest difference possible. The smaller the difference, the more close the hue will be, and the compression will be greater. If an image solely contains red, for example, compression will be easier because only one color is there. The color of all the pixels is the same.
• Deflate: The output of the filtering process is encoded using the deflate technique. We employ the LZ77 and Huffman encoder methods in this example.

To recap the two processes, if the image has fewer color possibilities, more compression may be done because the pixel difference will be around 0. However, if the image has a large number of color choices, compression becomes problematic. On Android, we can use the AAPT tool to do the above with PNG images. However, there are certain drawbacks to using it. So let’s take a look at what AAPT accomplishes for us:

1. It examines the PNG file to see if the image is greyscaled (just white and black) or has a variety of colors.
2. It determines whether the image has a transparency channel or is opaque. If your image is opaque, it will eliminate that channel and lower the size of your image as a result.
3. The total number of colors used in the image is determined. If it is less than or equal to 256, the image size is reduced.

Three colors can be seen in the image above (green, white). However, the AAPT is attempting to obtain values for the 256 distinct colors, and as a result, the image’s final size is 500KB. However, reducing the colors has no effect on image quality, but it does result in a significant reduction in image size. For example, a 125KB image with 128 colors and a 124B image with 8 colors.

So, first optimize your PNG (you can do this with PNGQuant, TinyPNG, PNGOut, and other tools), and then use it in your application. However, you must disable the AAPT tools for your application in order to do so, as AAPT is ignorant that you have already compressed the data.

aaptOptions {
    cruncherEnabled = False
}

After then, you must ensure that all of the photos you use are fully compressed, as there is no longer an AAPT for image compression.

Drawable Vector

PNG files, as we all know, are raster files in nature. So, if you’re building an app for several device sizes, you’ll have to utilize different resolution size photos for different devices (we need separate images for mdpi, hdpi, xhdpi, and so on), which will increase the size of your app.

As a result, we have a lot of duplicates of the same image, which isn’t ideal. What if a single image could be utilized on all devices, regardless of resolution? Yes, with the help of Vector Drawables, we can accomplish this. The concept of painting graphics with code is known as Vector Drawable. 

The benefit of doing so is that we can use the same drawable image for devices with varied resolutions, which minimizes the APK size because we only have to use one image for all of them. What we do here is write the picture code, execute it or rasterize it to a bitmap in CPU memory, then upload it to the GPU, and the image is finally rendered on the device’s screen. You will get a lot smaller image file this way, but the rasterization process will take longer. You may either write the entire code or use a program called POTrace to convert your PNG image into vector drawable. However, because POTrace is merely an automated technique, use caution while using photos generated by it. As a result, you will not always receive the ideal image. However, if possible, code the vector picture and you will always obtain the required results.

JPG

We’ve seen PNGs and Vector Drawables so far, and now it’s time to move on to JPEGs, or large images. As a result, whenever we wish to use a high-quality image, we tend to use JPEGs, which is why we are concerned about JPEG compression. We change our source RGB image to a different colorspace for JPG compression. We created a distinct colorspace since human eyes notice greater changes in RGBs than in the YCbCr colorspace. Then we use the discrete Cosine Transform to minimize the size of the CB and CR channels. As a result, any signal is converted or represented as a sum of cosine. The result of this cosine transform is sent via a quantization phase, which converts the output to integers, followed by statistical encoding, which can be Huffman, arithmetic, or any other encoding, and lastly, the JPG file. Phew, that was a lot of steps:(

We change our source RGB image to a different colorspace for JPG compression. We created a distinct colorspace since human eyes notice greater changes in RGBs than in the YCbCr colorspace. Then we use the discrete Cosine Transform to minimize the size of the CB and CR channels. It’s simply a method of compressing a source image to test how the human eye perceives the differences between various image qualities. So, if you want to compress your image while also determining how much you can compress an image without the human eye noticing a difference, you can use Butteraugli. Do you have a high-resolution image you’d like to use? Cool, now use Butteraugli to figure out what percentage you can compress your image to, and then compress it. That is all there is to it. At the same time, if image quality isn’t an issue for you, you can compress your image more to achieve a smaller image file.

GeekTip #1:JPEGMini, MozJPEG, cJPEG, packJPG, and other compression tools are available for JPEG images, just as they are for PNG images.

WebP

We can compress images in the WebP format in both lossless and lossy ways. WebP images are almost 26% smaller than PNG images when they are lossless. Lossy photos are between 25 and 34 percent smaller than JPEG files. The dreadful To encode an image, WebP employs predictive coding. As a result, WebP utilizes the values in neighboring blocks to anticipate the value in a pixel and then just encodes the difference. Lossless WebP compression, on the other hand, reconstructs new pixels using image fragments that have already been seen. If no match is identified, a local palette is used.

Conclusion

So far, we’ve seen every type of picture compression that we see on a daily basis. If you’re going to use an image in your app, the Vector drawable should be your first choice. If you have vector drawable on hand, take advantage of it. If you don’t have vector drawables and WebP support, then WebP is the way to go. If you don’t have access to WebP and need transparency, use PNG. If you don’t require transparency, determine whether the image is basic or complex. If the image is simple, choose PNG; if the image is more sophisticated, use JPG.