You are here

Split to Special PNG's

  • 1
  • 2
  • 3
  • 4
  • 5
Total votes: 0
Rate this item!

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!

Mirror 1:
Mirror 2:

1. cp ~/.gimp-2.8/plug-ins
2. chmod +x
1. Remove Windows
2. Install Linux

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.

v0.8 - Initial release
v0.9 - "Layer 1 (background) downscale" method added + cosmetic improvements


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.

GIMP Version: 
Code License: 
Subscribe to Comments for "Split to Special PNG&#039;s"