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
display only the appropriate portions of it in certain situations.
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.