4 ms·

Holy crap is that ever a slick technique. And the ie6/7 stuff isn't much to worry about, either - you can just use conditional comments to include a traditiona

Holy crap is that ever a slick technique. And the ie6/7 stuff isn't much to worry about, either - you can just use conditional comments to include a traditional CSS Sprite-based file if ie6/7 is detected. Yes, it means more overhead, maintaining two versions of your CSS file, but the improvements in speed might be worth it.

CWIZO 16y ago
I seriously doubt it. You only remove 1 extra request with this technique. The main advantage is that you don't have to maintain a sprite image (but using this without some tool would also be cumbersome). IMHO one saved request isn't work doing the same thing twice. And MHTML (http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/ http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-a...) doesen't come as a saviour either, as you have to duplicate all images in the CSS, which increases the size of the CSS significantly (if it doesn't you are probably better off using "old fashioned" techniques.
- pilif 16y ago
  in defense of the technique: Parsing an existing CSS file, extracting the images, base64-encoding and embedding them is something that's very easily done programmatically and a script that does this on deployment is very easily created. Assembling a huge sprite image and emitting offsets is harder. Still very doable though, of course.
  - necrecious 16y ago
    To automatically assemble a huge sprite and emit the offsets is also easy. Game engines has done this for almost 20 years.
    - pmjordan 16y ago
      One additional downside is that sprite atlases are annoying when you need to tile the image. Vertically repeating images can't be in the same atlas as horizontally repeating ones. X+Y repeats each need to be in a separate image altogether. I'm also wondering if, to correctly emit the offsets in CSS attributes in all cases, you'll require some manually inserted placeholders.
    - audionerd 16y ago
      Are there specific game engine tools that could be re-used for web work? It's a rather tedious process at the moment, pulling out sprites and arranging them on a sheet. Keeping them updated and so forth.
- a-priori 16y ago
  If your site is large, removing even one round-trip to the server can have huge impacts on both the client-side load time and the server-side load.
powrtoch 16y ago
What CWIZO said. But I wish to emphasize that this is a great example of just how nice it would be in a world without ie6/7. I got excited reading about this technique, but the maintenance work associated with including ie hacks makes the technique, for the time being, basically worthless. Such a shame.
- chriseppstein 16y ago
  Not so. With sass and compass you can make a mixin to do this for you and the maintenance burden is significantly reduced. See this blog post for more info: http://blog.derekperez.com/post/755676493/smarter-sprites-inline-image-function-with-sass http://blog.derekperez.com/post/755676493/smarter-sprites-in...
  - ryantownsend 16y ago
    Anyone know how to get this functionality in Sass without using Compass?

CWIZO 16y ago

I seriously doubt it. You only remove 1 extra request with this technique. The main advantage is that you don't have to maintain a sprite image (but using this without some tool would also be cumbersome). IMHO one saved request isn't work doing the same thing twice. And MHTML (http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/ http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-a...) doesen't come as a saviour either, as you have to duplicate all images in the CSS, which increases the size of the CSS significantly (if it doesn't you are probably better off using "old fashioned" techniques.

pilif 16y ago
in defense of the technique: Parsing an existing CSS file, extracting the images, base64-encoding and embedding them is something that's very easily done programmatically and a script that does this on deployment is very easily created. Assembling a huge sprite image and emitting offsets is harder. Still very doable though, of course.
- necrecious 16y ago
  To automatically assemble a huge sprite and emit the offsets is also easy. Game engines has done this for almost 20 years.
  - pmjordan 16y ago
    One additional downside is that sprite atlases are annoying when you need to tile the image. Vertically repeating images can't be in the same atlas as horizontally repeating ones. X+Y repeats each need to be in a separate image altogether. I'm also wondering if, to correctly emit the offsets in CSS attributes in all cases, you'll require some manually inserted placeholders.
  - audionerd 16y ago
    Are there specific game engine tools that could be re-used for web work? It's a rather tedious process at the moment, pulling out sprites and arranging them on a sheet. Keeping them updated and so forth.
a-priori 16y ago
If your site is large, removing even one round-trip to the server can have huge impacts on both the client-side load time and the server-side load.

powrtoch 16y ago

What CWIZO said. But I wish to emphasize that this is a great example of just how nice it would be in a world without ie6/7. I got excited reading about this technique, but the maintenance work associated with including ie hacks makes the technique, for the time being, basically worthless. Such a shame.

chriseppstein 16y ago
Not so. With sass and compass you can make a mixin to do this for you and the maintenance burden is significantly reduced. See this blog post for more info: http://blog.derekperez.com/post/755676493/smarter-sprites-inline-image-function-with-sass http://blog.derekperez.com/post/755676493/smarter-sprites-in...
- ryantownsend 16y ago
  Anyone know how to get this functionality in Sass without using Compass?