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:
Project Home Page:
Bookmark & Share
Most Popular Articles
- Mass virtual hosting security tip when using a reverse proxy to connect to other servers
- Solution for MariaDB Field 'xxx' doesn't have a default value
- How to lock Windows immediately upon smart card removal
- Stop using sleep mode with Windows Bitlocker for better security. Learn how to use hibernate in Windows 8.
- Planning a system to visually create responsive data-driven web page layouts & widgets in the Jetendo CMS browser interface
- Is Google Public DNS actually better then your ISP?
- My dog survived eating a box of Oreos
- Pros and Cons of CFML vs PHP and other languages