Spritemapper is an application that merges multiple images into one and generates CSS positioning for the corresponding slices.
Improve loading times. Only 10% of a webpage's loading time is due to the actual page—the other 90% is spent downloading styles, scripts and images. By reducing the amount of images and better utilizing the connection, CSS spritemapping can reduce your website's loading time.
Just plain old CSS. You don't have to write any extra syntax to make Spritemapper work. Just define the directories of images you want spritemapped and use the CSS background declaration as usual.
Batteries included. The package consists of a simple command-line tool that does the job via a Python package including its own PNG and CSS parser. There are no 3rd-party dependencies. Anybody who has ever had the pleasant job of installing PIL should have a pretty good idea about what we're trying to avoid.
No space wasted. Spritemapper's image packer implements simulated annealing to ensure that the images are packed tightly.
Open a terminal—Terminal, urxvt or whatever—and run
sudo easy_install spritemapper. Let stir for five seconds. Done.
The latest source release is available as a tarball on Spritemapper's PyPI page.
Make sure you have Python installed and that it is
in your PATH, also
include the 'Scripts' directory inside of your Python installation if you
want to run
spritemapper directly from the Command Prompt.
Go to Spritemapper's GitHub download page, download the latest .msi installer and run it.
You'll need Git and Python setuptools.
git clone git://github.com/yostudios/Spritemapper.git— copy the source code
cd Spritemapper— enter directory
python setup.py install— install Spritemapper
spritemapper /path/to/myfile.css and it
does its magic. Give the old
--help a quick look, too.
Configuration options can be specified in one of two ways: inline in the CSS, or using passing an INI file with defaults. For CSS it looks something like:
/* spritemapper.output_css = foofile.css */
You can do the exact equivalent using an INI file, like this:
[spritemapper] output_css = foofile.css
Paths are always relative to the CSS file being processed.
Creating a webfont using spritemapper.