I came across another article on CSS Sprites today and it got me thinking of a better way to generate CSS sprites. CSS sprites to me have always been difficult and un-yielding. As a developer I love flexibility; and bundling all of my images into one, then mapping pixel boxes to different CSS backgrounds doesn’t sound flexible at all.
I can see it being very useful after I’ve had the site up for a while, and I’m dead set on images, but during the infancy of a website they’ve always seemed too clunky and time consuming to produce.
What I would love to see is an easy to use solution much like similar to Bundle Fu’s ability to bundle Javascript and CSS, we could use another plugin to dynamically create the sprite, the CSS, and even propose new html markup that would work with those sprites. It wouldn’t be too difficult. Here’s how it could work:
- Point ruby at a website, and grab all of the images.
- Take those images into Rmagic and determine optimal size of compiled image
- Individually add each image to the compiled image keeping track of the pixel locations
- For each image added, create a CSS entry with the pixel locations provided and a class name based on the name of the image
- Wash rinse and repeat till you have a fully compiled image, and CSS ready to use
- Bonus: generate .html.erb file that replaces the images currently in use
