5 ms·
CSS Sprites are Stupid - Let's Use Archives Instead (Firefox Demo)
- tdavis 17y agoCSS 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 17y agoDoesn'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
- blasdel 17y agoSurely you mean 32-bit RGBA PNG?
- tdavis 17y agoI 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.
- blasdel 17y agoA 24-bit PNG would have no transparency, being 3 8-bit channels for RGB. Alpha transparency is a channel too! To be fair, the PNG spec is really bad about referring to alpha as if it were something entirely different from a color sample. I have spent way too much time thinking about PNG minutiae for a project at work...
- andreyf 17y agoWhat do sprites have to do with transparency? I thought they were just about displaying a part of the image with offset/size?
- pkulak 17y agoThat's even hackier than using a sprite.
- noss 17y agoHow about using data urls for embedding images in the CSS? Ok so IE6 and IE7 doesnt support it... never experienced that before.
- lhorie 17y agoIE8 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 17y agoWhat 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 17y agoGoogle 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/ http://spritegen.website-performance.org/ .
- mustpax 17y agoIf 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 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.
- TweedHeads 17y ago"most modern web servers handle pipelining without any problem. Exceptions include IIS 4 and reportedly 5." Color me surprised.
- cjbos 17y agoIIS 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 17y agoDoes 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?
- mbrubeck 17y agoPipelining 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.
- gferd 17y agoCSS Sprites aren't stupid, they're just clunky. Single browser technology, however, is positively retarded. Next?
- Semiapies 17y agoNot going to agree quite so harshly, but a technique based on forgotten functionality in one browser is rather gimmicky.
- TweedHeads 17y agoCool 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 17y agoIn the future, as network speed becomes less of an issue, web apps will increase in size and complexity to compensate.
- achmed 17y 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 17y agoIn 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.
- deleted 17y ago[deleted]
- sp332 17y agoMany home routers and network devices I've seen have optional short preamble/long preamble.
- stcredzero 17y agoYou could have a webserver generate the jar dynamically. In that case, everything could be in there.
- there 17y agoThe 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 17y agoIf you are thinking of local directory traversal (src="jar:http://kaioa.com/b/0907/test.jar!../../somefile 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.
- there 17y agono, i was thinking that in certain scenarios where it might be possible to control the name of the file being shown, using jar:http:// http:// could do a remote request and possibly expose some information.
- Barnabas 17y agoHere's some info about including image data as part of the URI: http://en.wikipedia.org/wiki/Data_URI_scheme 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-into-a-webpage http://danielmclaren.net/2008/03/embedding-base64-image-data...
- tedunangst 17y agoData 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 17y agoYou 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.
- erlanger 17y agoSprites are easy to use though and are well-supported.
- erlanger 17y agoSprites are easy to use though and are well-supported.
- hello_moto 17y agoLucky me I'm using GWT and ImageBundle http://code.google.com/p/google-web-toolkit/wiki/ImageBundleDesign http://code.google.com/p/google-web-toolkit/wiki/ImageBundle...