CSS sprite generator open sourced!

published on February 2, 2008

I already mentioned the CSS sprite generator in my article on Drupal’s page loading performance. More great news though: they open sourced it! See the blog posts by the authors, Stuart Colville and Ed Eliot.

It’s under the BSD license though, so it would never be accepted on Drupal’s code repository, which is a must. I contacted the authors, asking if they would be willing to dual-license it under the GPL.

The effects of such a module – if technically possible to generate CSS sprites completely autonomously – would be enormous. It would reduce the number of HTTP requests per page considerably: all CSS background images would be aggregated into a single image!
Even on “just” the Garland theme of a default Drupal 6 installation (this includes a logo and a small Drupal banner at the bottom), this would save 7 HTTP requests per page.

Big warning sign: I haven’t actually used the CSS sprite generator yet, so I have no idea yet if it could be done completely without user intervention. But at the least, it can be integrated into Drupal so that it could be much easier than it is now.

Update on February 6

Ed Eliot replied the same as greggles commented below, the license is not an issue: the BSD license allows you to relicense as GPL.

Other than that, more good news: a CSS Sprite Generator module has been announced by tjholowaychuk at Drupal.org – without actual code for now. According to him, there’ll be actually very little code we can reuse. That’s sad, but at least we have another implementation to compare against.

Comments

dvessel's picture

dvessel

That’s really cool. I haven’t looked closely at it myself but using sprites from my experience requires a lot of manual tweaking. It’s also limited to areas where you know the exact dimension in one axis or both depending on the nature of the background. Because of that, I doubt it would be possible to have it completely autonomous.

Without the sprite generating code, it’s possible to stitch it together in Garland. It just wasn’t designed with that in mind. Would be nice to do for Drupal 7.

Wim Leers's picture

Wim Leers

Drupal’s policy is that only GPL code is accepted into its CVS repositories. GPL-compatible code is not accepted.

Wim Leers's picture

Wim Leers

Thanks for the clarification, greggles! I think this is not a strict rule (anymore?) though: a lot of contrib modules include easily accessible external source code. Maybe that page should be updated?

You obviously made clear how little I know about licensing: this means I contacted the authors for nothing :) Would you be so kind to point me to a document that confirms this definitively? :)

greggles's picture

greggles

That page is largely a quote from Dries and Gerhard (CVS maintainer) agrees with it. I’m not sure how much more definitive something could get in the Drupal world ;)

My understanding is that jQuery plugins were allowed in because it’s hard to get the right version of them (you have to use svn, which is not easily accessible).

Wim Leers's picture

Wim Leers

I’ll need some time to figure out how realistic this is. If it is, then definitely yes :)

all drupal theme - peach's picture

all drupal them...

As much as I think this is a cool idea, I think it makes even more sense to just code the theme using a sprite background image. Why use a module to fight the symptons of ineffecient theme building. I’ve never used css sprites before but I will do some benchmarks to see if it makes a significant difference, it’s definitely promising as the ‘http requests’:’single file’ loading time ratio is growing with todays faster connections.

Wim Leers's picture

Wim Leers

You’re forgetting about modules’ CSS files! A theme rarely themes truly everything: often it’s the Drupal core theme you’re writing, but you’re not overriding modules’ CSS files. Otherwise, you’d be right, of course. Nevertheless, even for Drupal core themes, it’d be a lot easier if designers don’t have to do it manually.

Aaron Winborn's picture

Aaron Winborn

I’ve been using this idea, as have every game designer since the 80’s, in programming computer games for years. I read an article about using css sprites for the web a few months ago, and had a nice Ahha! moment. Good to see there’s some work being done on it. Thanks for tracking this down!

tjholowaychuk's picture

tjholowaychuk

Due to the nature of the Drupal contributions this would still be an issue because of course each module has their own CSS, their own images etc. Even if they were to use their own sprites image, there would simply just be many sprites images! eeek!

My goal is to benchmark the results heavily and find a good compromise between the least number of images, while not hindering the perception of the page loading. After all what good is a fast loading page if it “appears” slower from loading one large image.

I will tinker around with things and see how it goes, you can expect a public beta once I am happy with the feature set.

Anonymous's picture

Anonymous

So will your personal goal in Drupal 7 be to get the CSS Sprite Generator into core?

Wim Leers's picture

Wim Leers

Thanks, very interesting :) Have you got proof/examples that it works in even the most complex cases of CSS?

sunnybear's picture

sunnybear

Right now tool for CSS Sprites merging is the best on the market. In 98% of cases it converts all images to 2-3 big ones w/o any loses. Even SpriteMe project doesn’t have so fantastic logic.

Tdfs's picture

Tdfs
So will your personal goal in Drupal 7 be to get the CSS Sprite Generator into core?
I’ll need some time to figure out how realistic this is. If it is, then definitely yes :)
So will your personal goal in Drupal 7 be to get the CSS Sprite Generator into core?
No, because it doesn’t belong in core. I want to make core ready to support it without core patches.

So which is it?

Wim Leers's picture

Wim Leers

It’s “No.”

Note that there are ± 6 months between those two replies! ;)