Rain is a free command line utility designed for minimizing border images for use in CSS, Qt and Android (right now requires small modification after processing). In addition to that rain can split resulting minimized image in three (either vertical or horizontal) or nine parts for usage with CSS in older browsers or any other platform, like Cocoa (see NSDrawThreePartImage and NSDrawNinePartImage reference).
How does rain work
Rain works by comparing pixels in every direction to the one specified as a starting point (center of the image by default). When it finds a pixel of different color that means that we can't minimize any more in this direction. Rain can print out offsets from each border in an easily-parsable and human-readable JSON format (
--json flag) to allow manual or automated usage in CSS/QSS files in border-image property. Sample output looks like this:
Let's imagine that designer sent us a really nice box that we need to implement in css on modern browsers that looks like this:
First of all it's obvious that if we are going to use this as a border-image we have a lot of repeating pixels that will increase file size. Let's minimize it using rain and print out values that should be used for border image.
./rain -jm -o minimized original.png
This is resulting image:
And these are border widths:
Let's test that we got it right (only works in Chrome and FF):
<div style="width: 300px; height: 100px; margin: 0 0 15px; border-width: 10px; -webkit-border-image: url(minimized.png) 10; -moz-border-image: url(minimized.png) 10"> </div>
Source code and precompiled binaries for 64 bit mac (10.6+) and Windows are available on github.