This script intended to be used on images consisting of one opaque top layer containing a sharp-edged object (e.g. logo, text, cut-out, etc.) with anti-aliased edges and one or more additional smooth layers (shadow, glow, etc.). The script saves such an image as three PNG files (layers), intended to be stacked (e.g. on a web-page using absolute CSS positioning). The result achieved by this is significantly smaller amount of data needed to be downloaded with a visually similar result.
NOTE: before running the script ensure that there is no background layer!
Download:
Mirror 1: https://yadi.sk/d/edzcJiIJkZrrZ
Mirror 2: http://www.mediafire.com/view/71edb721zwrmu6d/split_to_special_pngs.py
Installation:
Linux:
1. cp export_mozjpeg.py ~/.gimp-2.8/plug-ins
2. chmod +x export_mozjpeg.py
Windows:
1. Remove Windows
2. Install Linux
Usage:
1. Open Filters > Web > Split to Special PNG's
2. Specify the base filename (click the "page" button to the right to specify it correctly): set it to "output" to get "output_layer1.png", "output_layer2.png" and "output_layer3.png" files in the result.
3. Alpha quantization produces smaller files, but be careful not to set it too small or you may get the the posterization effect or lose details.
History:
v0.8 - Initial release
v0.9 - "Layer 1 (background) downscale" method added + cosmetic improvements
Examples:
Exported as is: 93.0 KB, 92.3 KB after optipng
Exported with alpha quantization (128 levels): 88.4 KB, 86.7 KB after optipng
Exported with the script (three PNG files): 58.5 KB, 48.5 KB after optipng
Layer 1 (background, RGBA, alpha-quantized): 27.5 KB, 19.8 KB after optipng
Layer 2 (edges, RGBA, alpha-quantized): 24.4 KB, 22.1 KB after optipng
Layer 3 (object, indexed): 6.5 KB, 6.5 KB after optipng
HTML and CSS code examples
<div class="logo"><img src="img_common/logo_layer1.png" width="856" width="590"></div>
<div class="logo"><img src="img_common/logo_layer2.png" width="856" width="590"></div>
<div class="logo"><img src="img_common/logo_layer3.png" width="856" width="590"></div>
Width and height are specified explicitly because layer 1 (background) may be downscaled (if you used the corresponding option when exporting).
div.logo {
position: fixed;
margin-top: 0px;
left: 50%;
margin-left: -428px;
width: 856px;
height: 590px;
}
The resulting image will consist of all the three layers and will be horizontally centered.
Recent comments