Comments on: CSS Sprite Generator Tool

By: johanhendrix

johanhendrix — Wed, 16 Apr 2008 14:15:35 +0000

can anybody point me to a example?
i don’t understand how to implement it..

By: Morethanseven » PHP Asset Packager

Morethanseven » PHP Asset Packager — Sun, 28 Oct 2007 23:50:14 +0000

[...] YAHOO!s performance rules. The recent release of the YSlow extension and another upcoming book from Stuart Colville and Ed Eliot cap things off [...]

By: Sammy

Sammy — Sat, 06 Oct 2007 18:51:32 +0000

That’s a nice litte tool. One thing that I find missing is an actual example of the thing, especially on the page “What are CSS sprites”. You explain it with words, and give a link to A list Apart, but this page just begs for an actual visual example of the technique (eg. an actual rollover link, the html, the css). I was aware of this technique before coming to the site, but it might be useful for people who are not.

Thanks.

By: Stuart Colville

Stuart Colville — Fri, 05 Oct 2007 13:13:30 +0000

@frances: Thanks for your feedback, we are looking into providing a fix for this issue shortly.

By: Frances Berriman

Frances Berriman — Fri, 05 Oct 2007 10:25:39 +0000

Hey. Just thought I’d drop by and say we’ve been playing with it a bit at work.

Only problem we’re having is when we’re combining a bunch of gifs, we’re having to get it back as a PNG and then re-save it out as a gif because the quality coming back wasn’t high enough as gif output.

So, it’s helpful to get it back as an image with the CSS positioning worked out for us, but we needed a little more quality control about compression of images.

By: Nate

Nate — Fri, 28 Sep 2007 20:52:52 +0000

This will save me a bunch of time as I try to make our site faster and more inline with yahoo’s performance model. Thanks.

By: Javascript News » Blog Archive » CSS Sprite Generator Released

Javascript News » Blog Archive » CSS Sprite Generator Released — Fri, 28 Sep 2007 17:15:54 +0000

[...] Stuart Collville and Ed Eliot just launched a new CSS Sprite Generator tool, which is the first of many in a series of web-site performance tools. For the uninitiated, a CSS Sprite is a single image file which contains several graphics. Using CSS background positions it’s possible to display any one of the graphics. By using a sprite you save on multiple http requests which helps speed up the rendering of your page. [...]

By: Stuart Colville

Stuart Colville — Fri, 28 Sep 2007 13:19:14 +0000

@Ian: Thanks for your comments. You’ve made some great points about the interface, and we are certainly thinking that some of the options do need better explanation and in some cases some options can be hidden away as advanced options.

No doubt we will look to make some updates based on your suggestions in the near future.

By: Ian Lloyd

Ian Lloyd — Fri, 28 Sep 2007 09:07:24 +0000

Stuart, Ed,

This is an excellent idea and one that I will use for sure. Admittedly it will be one that I use infrequently and for a brief moment in time - but I’m sure that’s the same for all users: get in, do the job, take the swag!

I know that you have provided help for the options on the site, but I’d be inclined to have it more inline. For example, talking about vertical and horizontal offset, it’d benefit from a mini graphic of some kind - perhaps appears when you hover over/focus on a thumbnail - to demonstrate visually what you mean. I was confused by the transparency part too (specifically the checkbox for ‘Use Background Colour for Transparency’ - wasn’t sure how that related to the field above).

Now I’m just looking forward to the next time that I have to create something using this technique