Create Clean CSS Image Sprites With Glue
Every webmaster should know how useful CSS sprites can be in reducing the overall size of any given web page. Additionally, it’s far more convenient to have all of your images condensed into one simple PNG when designing a layout. Unfortunately, there aren’t that many high-quality sprite creation programs available online for everyday developers. One versatile utility that can easily whip up CSS sprites in a flash is Glue, an automatic command-line tool for stitching together images.
Glue offers impeccable performance and stability, spitting out sprites in record time while delivering a polished final product. It boasts automatic transparent border cropping, .less output, post-processing image optimization using OptiPNG, customizable CSS class names and customizable CSS output templates. It’s also incredibly lean, with the source code files on GitHub weighing in at just 338.4 KB zipped. Best of all, it’s child’s play to use in real world scenarios when you need to trim some of the fat from images and icons.
In order to install Glue, you’ll need to satisfy some dependencies first. Glue requires PIL, the Python Imaging Library. Obviously, you’ll need Python installed as well. Windows users can download and run the easy_install package, then open a terminal and enter
easy_install glue
On Mac OS X, you’ll need to install Homebrew and run
sudo brew install jpeg
and
sudo pip install glue
in a terminal. For Debian-based Linux distributions, just run
sudo apt-get install libjpeg62 libjpeg62-dev zlib1g-dev
followed by
sudo pip install glue
In order to create a sprite with Glue, simply fire up a terminal and enter
glue source output
. In this example, “source”is the folder containing the assorted icons or images you’d like to condense. The output will be a folder containing a CSS stylesheet and a PNG file. That’s all there really is to using Glue, though there are plenty of additional options for modifying your sprites. Enter
glue --help
in a terminal to see all of the available command arguments.
Those who rely on the GUI for web design often miss out on tools like Glue that provide the same functionality as more bloated programs while being faster and less resource-intensive. Ultimately, CSS sprite creation doesn’t require any fancy proprietary programs. Tools like Glue prove that power and simplicity aren’t mutually exclusive in the open source world. Whether you’re a professional web designer or just an amateur hobbyist, you’ll find that Glue is well worth giving a try.
No comments
Create Clean CSS Image Sprites With Glue | Webmaster Gurus
06.07.2012
[...] original post here: Create Clean CSS Image Sprites With Glue └ Tags: [...]
There are no trackbacks to display at this time.