Grunt Montage: Generating CSS Sprites

By: James


  • javascript
  • grunt
  • css

Introducing Grunt Montage

Montage is an open-source Grunt plugin for automatically generating CSS sprites from a list of images. It uses ImageMagick to generate composite images and creates the corresponding stylesheet enabling you to build your sprites as part of your deployment process.

Why CSS Sprites?

If you haven’t heard of/used CSS sprites before, I highly recommend reading Chris Coyier’s article article on the subject. In short, they allow you to massively reduce the number of HTTP requests to your server by combining a large number of images into a single one, requiring only a single request. Once you’ve combined all of your images into one, you can use the background-image and background-position CSS properties to display only the appropriate portions of it in certain situations.

Why Grunt?

Grunt is a hugely popular JavaScript task runner. It allows you to automate mundane tasks that tended to be manual processes in years gone by. Things like JavaScript minification, unit testing and linting are all now commonly automated with Grunt.

By writing a Grunt task to handle generation of CSS sprites, we are able to maintain a directory of, for example, emoji icons, and have Grunt combine them all into a single sprite image at deployment time. Instead of manually creating that image, which would require more effort to change in the future, we have the ability to simply add, remove and change individual icons at any time.

Using it

You can find comprehensive details on using Grunt Montage in the readme on GitHub. The plugin is published on npm so can be installed in the usual way, with npm install grunt-montage. Enjoy!

About the Author