Image sprites

Dear Media Fragments Working Group,

There has recently been some discussion of the use of sprites on the
CSS WG mailing list (see the threads [1][2][3][4][5][6]).

CSS sprites [7] are being used more and more these days, in particular
by large websites such as Google, Yahoo and Amazon [8][9]. The main
reason for their increasing use is the reduced number of HTTP requests
required (only 1 large image is downloaded instead of possibly dozens
of smaller ones), which results in significant performance gains
[10][11]. As described in [7], though, before Yahoo published their
rules, and this is probably still the case for most websites, sprites
were just used as a convenient way to create rollover effects (and
other states) for menus and buttons without the need for JavaScript,
and saving slice-and-dice work to boot.

However, the way sprites are currently achieved is essentially just a
hack, which has its limitations. Suggestions that have come up on the
www-style mailing list to improve their support range from new
properties that lift some of the current limitations to proposals for
proper sprite support in CSS. Bert Bos, however, rightly pointed out
[5] that sprites are not limited to CSS and referred me to the Media
Fragments WG.

Having read the "Use cases and requirements" [12], sprites seem to be
covered by the "Region of an Image" use case (4.1.2), and the spatial
fragment dimension syntax (6.2.2). Section 7, however, indicates that
retrieving a media fragment would result in a separate, partial
request for each fragment, rather than a request for the entire
resource. This isn't very desirable for the use of sprites.

The whole saving-HTTP-requests thing might not be a big point for your
average multi-state menu sprite, but the main thing with those sprites
is basically that you've stuck all these images together because you
know you're going to need all of them anyway, making it kind of
pointless to go and request each fragment separately again.

So as I understand it, CSS sprites are the client-side version of the
server-side media fragments. Do they still form a use case that fits
within the scope of the Media Fragments WG? Would it be possible to
add some sort of client-side version of a media fragment which would
let the UA do the fragmenting itself, rather than having it do a
ranged request to the server? Or would there be some other solution
that could be used universally, and not just by CSS?


Regards,

Jorrit


[1] http://lists.w3.org/Archives/Public/www-style/2008Nov/0279.html
[2] http://lists.w3.org/Archives/Public/www-style/2009Jan/0181.html
[3] http://lists.w3.org/Archives/Public/www-style/2009Feb/0189.html

[4] http://lists.w3.org/Archives/Public/www-style/2009May/0157.html
[5] http://lists.w3.org/Archives/Public/www-style/2009Jun/0019.html

[6] http://lists.w3.org/Archives/Public/www-style/2009Jun/0058.html

[7] http://www.alistapart.com/articles/sprites
[8] http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
[9] http://www.websiteoptimization.com/speed/tweak/css-sprites/

[10] http://developer.yahoo.net/blog/archives/2007/04/rule_1_make_few.html
[11] http://developer.yahoo.com/performance/rules.html

[12] http://www.w3.org/TR/2009/WD-media-frags-reqs-20090430/

Received on Saturday, 6 June 2009 01:48:23 UTC