CSS sprite generator open sourced!

Published on 2 February, 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.

dvessel

16 years 11 months ago

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.

Anonymous

16 years 11 months ago

Why is the BSD license a problem with Drupal? BSD is GPL compatible. You can include BSD code in GPL projects, just not the other way around.

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? :)

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).

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

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.

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.

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

16 years 11 months ago

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

16 years 7 months ago

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

Wim

16 years 7 months ago

In reply to by Anonymous

No, because it doesnā€™t belong in core. I want to make core ready to support it without core patches.

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

14 years 5 months ago

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

14 years 5 months ago

Itā€™s ā€œNo.ā€

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