To optimize a PNG image you can use these strategies:
1. Color and bit depht reduction
1.1. Autmatic (lossless)
1.2. Manual (lossy, using color quatization)
2. Compression
2.1. internal
2.2. external optimizers
1. Color and bit depth reduction
Color reduction is one of the most important optimization tasks for PNG and GIF.
The color reduction is made in RIOT in two ways:
- automatic reductions (such as bit depth reductions or when using the automatic mode)
- manual reductions (when using color quantization)
1.1 Automatic (lossless)
The bit depth translates to the possible number of colors that can be stored in an image.
Some images will be stored in True Color. This means 24 bits are used for each pixel if the image does not contain transparency, or 32 bits per pixel if the image is transparent.
24 bits (2^24) gives 16,777,216 color variations. This is a lot. But if your image actually contains 7 unique colors, this is a waste of space, because each pixel allows for a much wider range.
The fact that is contains 7 unique colors, doesn’t mean the pixels with the same color won’t occupy extra space. Imagine that instead of representing a number of 1 to 7 using 10 fingers, while 3 are unused, you use 7 but require millions of unused fingers to be present. Those fingers need to there, even if they are not used.
RIOT will analyze the source image and it will try to use the smallest number of unique colors and the optimal bit depth.
This is possibile for 256 or less colors.
For 7 unique colors, this means RIOT can decrease the bit depth to 4 (2^4 = 16 colors). So instead of 24 bits per pixel it will only need 4 bits per pixel and some extra space for a palette.
Internally a so called “palette” will be built using the actual unique colors. The palette will contain the colors, and the pixels will only contain a reference to the index where the oclor is found in the palette.
In a less spectacular way, but still an optimizaton, RIOT can decrease the bit depth from 8 or 4 bit in case an already palletized image is the source to the optimal bit depth and to the actual number of colors, making the unused colors blank.
Thinks are actually more complicated when it involves alpha transparency (semi-transparent areas), but you get the idea.
1.2 Manual color reduction (lossy)
Going further, you could have an image with a higher number of unique colors like 4000 stored in 24 bit.
Lossless reductions won’t work, because we will need to change some pixel’s color to be able to only use 256 or less colors.
For this thing color quantization comes to the rescue.
Color quantization is a process that reduces the number of distinct colors used in an image, usually with the intention that the new image should be as visually similar as possible to the original image.
So, from 4000 colors, you can get the most used 256 colors, adjusting a bit the colors to the closest available color.
From 256 colors you can get naughty and squize some bytes out by using the max colors slider even more.
Color quantization can be used in RIOT only with the following color reduction presets:
- Optimal x colors Palette
- Grayscale 256 colors Palette
RIOT implements the following algorithms:
- Xiaolin Wu
- NeuQuant neural-net
Both algorithms have advantages and disadvantages
Xiaolin Wu produces accurate colors, but it is suitable for images with few distinct colors, when you need to keep the exact colors.
Xiaolin Wu's author description should probably make things clearer: ( or not :))
Greedy orthogonal bipartition of RGB space for variance minimization aided by inclusion-exclusion tricks.
NeuQuant is superior in image quality when used with a high color image and a high number of quantized colors.
The high-quality but slow NeuQuant algorithm reduces images to 256 colors by training a Kohonen neural network “which self-organises through learning to match the distribution of colours in an input image. Taking the position in RGB-space of each neuron gives a high-quality colour map in which adjacent colours are similar.” It is particularly advantageous for images with gradients.
This algorithm should be used for higher color counts.
Optimization Recommendations
- Choose Xiaolin Wu for images with few distinct colors, especially when you need fewer than 64 colors
- Choose NeuQuant for images with many distinct colors, but don”t use it to output less than 64 colors, because it was not designed for this
- Reduce the number of unique colors using the slider until the image starts to look different than the original
Design Recommendations
Use as few colors as possible
Prefer solid colors over gradients when designing PNG graphics
Compression
Compression can be made internal or external
Internal compression
About internal compression there is not much to say. Select from the drop down a compression level.
The minimum level is the fastest, but the compression level will be lower. While the maximum level will be the slowest, the level of compression will be the highest.
External optimizers (compression)
When using the external optimizer, you can use one of the three offered by RIOT or use your own optimizer.
To use your own optimizer, click Add PNG optimization tool.
A pop-up window will appear. Search the tool using the browse button and finally click ok.
Now RIOT is ready to work his magic. All that’s missing is a click on the Play button.
