After the Optimization for Developers, you've to see others tricks to optimize a PNG File further. First, do not understimate the importance of creation conditions.
The PNG Optimization depends of the input file characteristics. In this sample, you'll see a PNG which contains 5 times more colors than another, and which is more than 67 times smaller.
| 13329 Colors | 68850 Colors |
|
|
| 50117 Bytes | 746 Bytes |
Do not hesitate to try your favorites tools on the big one, you'll never able to compress as the compressed one. Let's see why, and how.
Real PNG strenght is not its compression, but the step before, called Delta Filtering
. Thanks to that, you'll be able to create very small files. In this example, the filtering is optimal because each pixel has a RGB values very close to the next one.
| TOP / RIGHT | Pixel 1 | Pixel 2 | Pixel 3 | Pixel 4 | Pixel 5 |
| Line Pixel 1 | 0,0,255 | 0,0,254 | 1,0,253 | 2,0,252 | 3,0,251 |
| Line Pixel 2 | 0,1,255 | 0,1,254 | 1,1,253 | 2,1,252 | 3,1,251 |
| Line Pixel 3 | 0,2,255 | 0,2,254 | 1,2,253 | 2,2,252 | 3,2,251 |
Delta filter can convert
RGB values to maximize the compression potential. To be efficient, the filter transform RGB data to very compressible values. Think about that when you create your gradient PNG.
The big file is not compressible because filter is not efficient. Image seems to be identical as the small one, but in fact there are lot of differences between both of them. The not compressible
file is like a JPG picture you want to convert to PNG : too much differents values pixels, filter not efficient, so result is big file.
In this case, you've two solutions : create a new file, or just convert it to JPG.
PNG is good for images which contains few colors, like Paletted images. But you've to control the pixel complexity
: try to unify colors to optimize the PNG output file.
When it's possible, try to avoid dithering usage. Prefer a better quantizer, which can allow you to control the quantization parameters. Because of a quantized image will always be look better with user verification, always check yourself the output quality, and try to get the best results, playing with quantizer settings.
| Quantizer 1 | Quantizer 1 + Dithering | Quantizer 2 |
 |
 |
 |
| 256 colors, 6360 Bytes | 253 colors, 14778 Bytes | 252 colors, 6751 Bytes |
In this example, Quantizer 1 is not very efficient, image is deteriored. To control this deterioration, it can use the Floyd-Steinberg diffusion, to enhance image quality. The transition is hard, because it costs lot of bytes. Best solution is to choose a best quantizer, able to set a high quantification.
By avoiding the dithering method and using a best quantizer, you can get a better quality / size ratio. Indeed, quantizer can code similar values in the palette, favorising a smart Palette sorting. You can finally apply an adaptive filter to compress the PNG better. See also PNG Palette Optimization.
If your screen capture is too big, do not resize it. Just cut it, and show to your visitor what is really useful. The resizing effect can demultipliate the number of colors in image, because the software try to preserve the restitution integrity. Try to do not include unuseful part
in the image.
This capture is resized to 500 x 191. Result is very bad, because at start it was a PNG8 screen. By risizing, the software has preserve integrity, but many colors were added in transition. Result ? We have a RGB PNG, with 2102 colors, screen is less readable and is 23656 Bytes.
This area is totally unuseful for users. Just cut it :
It looks better now. Converted to PNG8, file is now more readable, and is just 5542 Bytes. Do the same with every screen captures, just capture the essential.
Another thing you've to avoid : conversion from JPG to PNG. Most of the time, the modified structure of JPG is not adapted for PNG (filter can not be efficient). Anyway, if you've already made your screen capture in JPG, you can try this trick. Here's the screen capture we've to optimize.
It is not looking very good because there are lot of artifacts on text. File is encoded to JPG, contains 14251 colors, and is 22406 Bytes.
Forget about PNG lossless conversion. Lot of colors, artifacts, file size will be bigger. First step to optimize that file, it's to converting it to PNG Palette, with only few colors, like 4. Quality result depends of quantizer you used to convert the image.
Once converted in PNG Paletted with 4 colors, the image can look worser than original. In this step, you can use your favorite palette editor to change RGB value. Remember? You just have to unify colors.
| PNG 4 Colors Not Optimized | PNG 4 Colors Optimized |
 |
 |
In this example, all blue values have been unified in one single color. This technique allows to unify
artifacts in a single color. Then, pixel becomes very compressible, because even if entries are differents, color used is identical. You favorite compression tool -i used ScriptPNG-, will be able to unify all the modified entries to one.
You can also modify other entries to optimize text constrast or image quality. Here, i modified the text color to white. Here's the screen capture after modification :
It looks better than original. Take a look at its size : file is just 1919 Bytes, 10 times smaller than JPG.
Probably the most know technique : converting a RGB PNG File to Paletted (or PNG8). This lossy technique consist to reduce the number of colors in the PNG output file.
| PNG24 | PNG8 |
 |
|
| 1912 colors, 14261 Bytes | 252 colors, 6751 Bytes |
Most of users do not see difference between both PNG files. The converted one contains only 252 colors, but use a very good quantification technique. It seems this image contains more colors, but it's not the case. Finally, the size difference is very notable -more than 2 times smaller-.
When you use a screen capture which displays text, you can maybe just delete the text, and you can use HTML/CSS instead. This allow the user to select text ; also, only one image is necessary (1 HTTP request).
| Two screen capture with integrated text | |
 |
 |
| 2 images, 8879 Bytes, Text can not be selected | |
| Two screen capture without integrated text | |
[autorun] icon=media\icon.ico open=bin\run.exe label=MyApplication shell=start shell\start\command=prog\run.exe shell\start=Run shell\read\command=notepad.exe readme.txt shell\read=Readme |
[autorun] icon=bin\scriptpng.dll,2 open=bin\scriptpng.exe label=ScriptPNG shell=Lunch shell\start\command=bin\scriptpng.exe shell\start=Run ScriptPNG shell\read\command=notepad.exe readme.txt shell\read=Readme |
| 1 image, 3344 Bytes, Text can be selected | |
This method can be used with images instead of text. For example, just see the ScriptPNG and ScriptJPG description page. This image is used for background, and others are above it.
PNG Transparency can be optimized. See also How to Optimize PNG Transparency.
