Optimization of free space: discard PNG

Imagine a completely ordinary, routine task: our application should load external images, they should have a transparent background, and then we will perform some actions on them.

Often, without any hesitation, we say that it should be only png, after which the designers prepare thousands of content files for your application that dramatically fill the free space on the servers. But what if the task is to optimize the use of disk space?

It turns out that the technology that is quite successfully used by many applications is solving this problem without the png format.

All we need is to generate 2 gif files, one of which will store the image, and the second a mask of a non transparent background.
')
The size of two gif files is significantly less than the size of one full png.

So in the example below, the first gif image file takes up only 9 kb, and the mask for it is 3 kb.

Actually image


Proper mask


While the png - file with a transparent background for the same image will take about 35 kilobytes. Save 65%.

We can get only the third with a transparent background from two opaque images using only one built-in method BitmapData.threshold: the pixel of the image, where the corresponding pixel of the mask is less white, is replaced by a transparent pixel

gifImageBitmapData.threshold(gifMask.bitmapData, gifMask.getRect(gifMask),new Point(0,0),'<',0xffffffff,0x00FFFFFF,0xffffffff);

Bottom line: if you don’t need to pass a semi-transparent gradient, you just need to trim the background from the images, and besides, the quality of the image does not play a primary role, then you can use the above-described technology. As you can see, the amount of our code for image processing will not increase significantly.

The technology, of course, is not universal and has its drawbacks - 2 small files will probably load longer than 1 large file, but it does its job: the content for your application will be much smaller.