CSS Sprites Generator

What is it?

A tool to combine multiple images into a single image file and generate CSS classes for each image, to help with website performance.

This tool is made with Docker and Shell Script. Internally it use ImageMagick to combine the images and get image infos.

Useful links

• CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
• Implementing image sprites in CSS

Demo

See the demo folder. The demo/src/ folder contains the source images and the demo/build contains the generated files.

• The total size of the ten images is 66316 bytes, combining it the total size was reduced to 20216 bytes (69.52% reduction) and after optimization is 4645 bytes (93.00% reduction).
• The generated stylesheet file size is 784 bytes (not minified).

Using css-sprites-generator

Put the desired images in a folder, then run the below command mapping the source images folder and build folder.

• Map the source image folder to /usr/src/app/src
• Map the build folder to /usr/src/app/build

docker run --rm -v `pwd`/src:/usr/src/app/src -v `pwd`/build:/usr/src/app/build seudev/css-sprites-generator:1.0

Environment Variables

If necessary you can change the below variables. Pass it to the docker container (e.g docker run -e VARIABLE=value)

Env	Default Value	Description
DEBUG_ENABLED	false	Use true to enable the debug mode
IMAGES_PATH_PATTERN	src/*	The images path pattern used to filter the images.
IMAGE_FORMAT	PNG	The sprite image format.
SPRITES_BASE_CLASS	img	The CSS class name of the base style.
SPRITES_CLASS_PREFIX	img-	The CSS class name prefix of the image sprites.
IMAGE_SPRITES_FILENAME	sprite-result.png	The filename of the combined images.
IMAGE_SPRITES_BASE_URL		The base URL of the image sprites.
STYLE_FILENAME	style.css	The CSS filename.
EXAMPLE_FILENAME	example.html	The filename of the example HTML page.
PERCENTAGE_SCALE	2	The percentage reduction scale.
OPTIMIZE_IMAGE_SPRITES	false	Use true to optimize the image sprites, using the tinify API.
TINIFY_API_SHRINK_URL	https://api.tinify.com/shrink	The tinify API URL to compress the image. See https://tinypng.com/developers/reference
TINIFY_API_KEY		The tinify API key. Example: api:ewp9orweoifuwerfjoaewsirfu9aw3eu. Get your key on https://tinypng.com/developers
TINIFY_JSON_RESPONSE_FILE	tinify-response.json	The filename of the tinify shrink response.

Building this image

docker build -t seudev/css-sprites-generator:1.0 .

Licensing

seudev/css-sprites-generator is provided and distributed under the Apache Software License 2.0.

Refer to LICENSE for more information.