CSS sprite map automation is now released as open source

Being able to generate a sprite map of all the non-repeating images used in your CSS files can help cut down on the number of requests to load your web site.  This optimization technique has been used on many high profile web sites, including Facebook.com.

When I set out to build our solution, I initially wrote it with PHP.  However, today, I converted it to CFML so that it uses the same language and integrates better with my  Jetendo CMS application.

I had looked at existing solutions before writing my own, and I didn't see one that was automating everything for you, and I didn't like how some of them packed the images.

My code is able to pack them very efficiently to minimized wasted space, and it generates compatible, minified CSS code with the "background-position" pixel coordinates automatically inserted.    No need to do math or manually update them each time you change an image.  It's 100% automated.

It even puts a version number on the URL of the sprite map file so that the browser will immediately download the latest sprite map when it changes.

The public CFC methods allow you to use cssSpriteMap-dot-cfc in many different advance use cases since it supports a number of options such as directory aliases, adjustable sprite padding, adjustable file names and paths, and the option to disable minification so the generated CSS code is nicely indented.  You can load and combine multiple CSS files, load 1 CSS file or load the CSS as a string before further processing.

The best thing about all of this is that I've made the code available as an open source project under the MIT License.

I plan on posting more details and documentation on cssSpriteMap-dot-cfc project home page in the near future.  For now, you can check out the project on GitHub.com:

https://github.com/jetendo/cssSpriteMap-dot-cfc

Project Home Page:

https://www.jetendo.com/manual/view/current/2.2/cssSpriteMap-dot-cfc.html