If you are developing an embedded system that requires a graphical user interface, you’ll likely have quite a few icons and/or images to store in the flash/rom. If your hardware has limited space, you may have to optimize the size of picture so that they can fit into your flash with no or minimal loss of quality. Reducing image size may also be of interest for mobile websites that can be accessed by devices with lower hardware specs and relatively low network throughput (EDGE/3G).
I’ll use GIMP 2.6 – The GNU Image Manipulation Program to work on pictures in order to optimize their size.
Selecting the picture format
The most common picture file formats are bmp, jpg, png and gif.
BMP File Format (aka Bitmap Image File or Device Independent Bitmap) can not compress images except for 8-bit color depth, so it is not suitable for embedded systems.
JPG File Format compresses images but is lossy (the level of loss is adjustable) and only support 24-bit (color) and 8-bit (grayscale). It does not support transparency. This format offer the best 24-bit compression (depending on the quality setting used).
PNG File Format (Portable Network Graphics) can also compress 8-bit (256 colors), 16-bit (65536 colors) and 24-bit (16.7 Million colors). It is a lossless codec and supports transparency.
GIF File Format (Graphics Interchange Format) can only support 8-bit (256 colors) pictures. It supports transparency and animation. There is a patent associated with the codec, that is one of the reasons PNG was created.
If your user interface must use 16.7 Million colors and does not need transparency, JPG should be the obvious choice.
If your GUI must use 16.7 Million colors and need transparency, use PNG File format.
If your GUI can use 256 Colors, use either PNG or GIF.
Selecting the color depth
The color depth choice may be forced upon you if the hardware only support 8-bit video output for example.
In your hardware supports 16-bit, 24-bit or 32-bit framebuffer, then the picture file format choice may depend on your picture files as 24-bit is not also better than 8-bit.
Let’s assume your application is a media player and you’ve got a media icon.Let’s compare its size and quality with 24-bit and 8-bit color depth. In GIMP, go to Colours->Info->Colourcube Analysis to get the number of colors and to convert 24-bit to 8-bit go to Image->Mode->Indexed and play around with the Dithering options to get the best quality for your image.
|
|
|
As you can see, the 8-bit PNG image is only 58 KB that represents 127 KB savings compared to the JPG version (185 KB) with only slightly lower quality.
You can repeat this step with all icons and images of your graphical user interface and select which pictures you can convert to 8-bit without a losing quality.
Setting the right size / resolution.
The first is quite obvious, but I have seen many cases where a larger image is being resized by the application. This wastes space and does not always yield the best results in terms of quality.
So for example if your image is 348×345, but your GUI will display it in half size (174×173), you’d better resize it to the right size. There are different methods for interpolating pixels while resizing a picture (nearest neighbour, bilinear, cubic and Sinc (Lanczos3). Cubic and Sinc give the best results. To do that in GIMP, click on Image->Scale Image, set the Width to 50% and select Cubic or Sinc(Lanczos3) for Interpolation and click Scale. Please note It is better to resize before changing the color depth.
After this change, the video icon file size (PNG – 8-bit) is now 20 KB.
Cropping
Sometimes the border of an image is white (or unicolor). To further reduce the size you could also remove those white pixels. The way to do this in GIMP is to click on Image->Zealous Crop. If it does not work that means all pixel are not exactly white, you can use the Bucket Fill Tool to work around this issue.
After cropping, the image resolution is now 162×161 and the file size is 19 KB.
So after all those steps, we save 166 KB (reduced the file size by 89%).
Comparing compression depending on file format and color depth
To conclude, I’ll show a table comparing 24-bit picture size saved as JPG and PNG and 8-bit picture size saved as PNG or GIF using the default parameters in GIMP. I’ve only used Video_Icon.jpg and default parameters, so this is not a scientific method at all but it can provide a guide on compression ratio for different file formats.
| JPG | PNG | GIF | |
| 24-bit Picture | 185 KB | 118 KB | N/A |
| 8-bit Picture | N/A | 58 KB | 61 KB |
I’ve also saved Video_Icon.jpg with GIMP and 100% quality, the file size was 128 KB, if I decrease the quality to 90% the file size becomes 53 KB. So adjusting the JPEG quality is also another powerful way of reducing the file size.
Jean-Luc started CNX Software in 2010 as a part-time endeavor, before quitting his job as a software engineering manager, and starting to write daily news, and reviews full time later in 2011.
Support CNX Software! Donate via cryptocurrencies, become a Patron on Patreon, or purchase goods on Amazon or Aliexpress
