CSS Sprites are Stupid - Let's Use Archives Instead (Firefox Demo)

by mixmax • 17 years ago

58 37 17 years ago

tdavis2• 17 years ago

CSS sprites are stupid. So stupid, in fact, that I refuse to use them. It wouldn't be such a big deal, I suppose, if IE6 supported proper transparency. But as it stands, I still cannot, in 2009, safely use a 24-bit PNG for my CSS sprites.

If anything like this is ever standardized, which seems unlikely, and implemented in all the major browsers, which seems even more unlikely, MAYBE in 30 years we can use it in production.

But as far as fantasies go, it's one of the cooler ones!

pjhyett• 17 years ago

Doesn't yahoo.com use sprites? Not trying to be difficult, is the transparency issue the reason you don't like them?

edit: I suppose I could have read the article first

blasdel2• 17 years ago

Surely you mean 32-bit RGBA PNG?

tdavis2• 17 years ago

I have no idea why I would "surely" mean that. Is "32-bit RGBA PNG" a synonym for "24-bit PNG with Alpha Transparency"? If so, I suppose I could have been more explicit, though I've never once seen such images referred to as that.

andreyf• 17 years ago

What do sprites have to do with transparency? I thought they were just about displaying a part of the image with offset/size?

pkulak• 17 years ago

That's even hackier than using a sprite.

noss• 17 years ago

How about using data urls for embedding images in the CSS?

Ok so IE6 and IE7 doesnt support it... never experienced that before.

lhorie• 17 years ago

IE8 supposedly does, but then again, I've heard that there's a limit to how large an image you can embed in a data url in some browsers.

riso• 17 years ago

What would be nice is a script that extracts the image urls from the stylesheet(s), creates the sprite image for the used images, then creates another css file with the required offsets for the classes.

I have been putting off spending some time creating a script like this, mostly because I am pretty sure there is already one out there that does it.

dpifke• 17 years ago

Google Web Toolkit does this; I'm sure other web development frameworks do as well. A quick search for a standalone utility revealed: http://spritegen.website-performance.org/ .

mustpax2• 17 years ago

If you're looking for a way of bundling resource requests for arbitrary file types into single HTTP request, there is already a feature in the HTTP 1.1 that allows you to do this; it's called HTTP Pipelining [http://en.wikipedia.org/wiki/HTTP_pipelining]. Unfortunately this feature is off by default in Firefox, but you can override it to be on using about:config.

Other browsers don't yet support it, but they don't support archives yet either. As it stands, CSS Sprites are really the only cross-browser compatible option we have, and we're going to have to make do with them.

I like your idea, but it appears to me that this is better implemented on the HTTP layer.

TweedHeads2• 17 years ago

"most modern web servers handle pipelining without any problem. Exceptions include IIS 4 and reportedly 5."

Color me surprised.

cjbos• 17 years ago

IIS 4 came out with the NT 4.0 option pack. IIS 5 came with Windows 2000. At 10 years old, I wouldn't call them modern.

Batsu• 17 years ago

Does anyone have any further information on this? It's interesting to see that while most modern web servers handle this, most web clients do not or disable it be default.

If this offers nothing other than a performance increase, where is the issue?

mbrubeck2• 17 years ago

Pipelining reuses a single TCP connection, but still makes multiple HTTP requests. This means that you still send and receive a bunch of mostly-duplicated request/response headers, and still have the latency of multiple request/response round trips.

Archives/sprites/etc. are better in some ways than pipelined requests. Consider the case where the client is making a conditional GET request and the content hasn't changed on the server. If the content is bundled into a single resource, then you just have a single request and a single HTTP 304 response with no body. But if the content is served as multiple resources, then you have the exact same conversation repeated once for each resource. For a site with 100 images, this will use 100x the bandwidth and take nearly 100 times as long.

mustpax2• 17 years ago

If you're gzipping/deflating your HTTP connections, 100 304 response headers are not going to be your bandwidth bottleneck. Even if you are not, a 304 response has at most like 200 characters in it, 200 x 100, 20 kilobytes in headers responses, not exactly earth shattering.

Since you brought up the caching issue, when you change any resource in the bundle, you are going to have to redownload the whole bundle. The bigger the bundle the more likely that one of the resources inside might need to be updated over time. With pipelining you only have to retransmit modified resources. This is not even considering the higher likelihood that larger objects have of getting thrown out of the cache.

Also, most of the overhead in establishing a connection over a non-negligible latency internet connection is in the TCP handshake. Not in the time spent transmitting a few packets of headers.

sayrer• 17 years ago

Pipelining doesn't work.

gferd• 17 years ago

CSS Sprites aren't stupid, they're just clunky. Single browser technology, however, is positively retarded. Next?

Semiapies• 17 years ago

Not going to agree quite so harshly, but a technique based on forgotten functionality in one browser is rather gimmicky.

TweedHeads2• 17 years ago

Cool hack.

In the future, when network speed is not an issue, we should be able to send the whole web app (or page) in one packet.

One request, one response.

roc• 17 years ago

In the future, as network speed becomes less of an issue, web apps will increase in size and complexity to compensate.

achmed• 17 years ago

> when network speed is not an issue, we should be able to > send the whole web app (or page) in one packet

it is not the case that a faster network implies larger packets

kragen• 17 years ago

In the limit it does, because a faster network means more interrupts per second when the packet size is fixed. Thus, Ethernet jumbograms. Also, there can be problems with bit-rate-independent framing; for example, 802.11b loses a lot of its 11Mbps to the packet preamble, since the preamble is the same number of microseconds for compatibility with the older 802.11 standards. (I assume G solved this problem.)

I suspect you could gzip a working CP/M system into a 9000-byte Ethernet jumbogram.

stcredzero• 17 years ago

You could have a webserver generate the jar dynamically. In that case, everything could be in there.

there2• 17 years ago

    The same with an absolute URL:

    <img src="jar:http://kaioa.com/b/0907/test.jar!/img1.png" alt="img1" width="32" height="32"/>

my security sense is tingling...

fno• 17 years ago

If you are thinking of local directory traversal (src="jar:http://kaioa.com/b/0907/test.jar!../../somefile) then I think you are underestimating browser coders. Introducing that security issue would require a dedicated effort.

there2• 17 years ago

no, i was thinking that in certain scenarios where it might be possible to control the name of the file being shown, using jar:http:// could do a remote request and possibly expose some information.

Barnabas• 17 years ago

Here's some info about including image data as part of the URI: http://en.wikipedia.org/wiki/Data_URI_scheme.

Assuming the HTML is compressed, wouldn't this also achieve the same "poor-man's pipelining" result, as in less server connections? It seems to have broader browser support than the JAR thing.

Edit: I found this too... the MHTML method linked in this article is also interesting: http://danielmclaren.net/2008/03/embedding-base64-image-data...

tedunangst• 17 years ago

Data uri's can't be cached, so they can only help latency of a cold page load, but they make every page after that slower. (if you put the data uri in your html instead of the css)

derefr• 17 years ago

You could also put the Data URIs into a javascript file that plugs them into the document/css/whereever once it's loaded. The script would cache.

erlanger2• 17 years ago

Sprites are easy to use though and are well-supported.

erlanger2• 17 years ago

Sprites are easy to use though and are well-supported.

hello_moto• 17 years ago

Lucky me I'm using GWT and ImageBundle

http://code.google.com/p/google-web-toolkit/wiki/ImageBundle...

CSS Sprites are Stupid - Let's Use Archives Instead (Firefox Demo)

Related Stories