Re: Image sprites use cases

On Sep 3, 2009, at 7:23 AM, Boris Zbarsky wrote:

> Alex Kaminski wrote:
>> Is it really so? I can imagine that using background-position for  
>> sprites
>> does indeed have memory impact, but if the spite is specified with
>> image-region then I guess the browser can easily optimize memory  
>> usage.
>
> The whole point of using sprites is that the single image is decoded  
> all at once, no?  That's sort of how image formats work; they tend  
> to not be amenable to only decoding part of an image.

It is handy to be able to keep related states of the same button in  
the same file, rather than giving each one a separate name and  
accessing through a file system. For instance, I think it would be  
pretty cool to be able to just select a layer of an image for a  
particular state, something like this, perhaps:

url(big_button.psd)(1)  /*for 'at-rest' state */
url(big_button.psd)(2)  /*for 'hover' state */
url(big_button.psd)(3)  /*for 'pressed' state */
url(big_button.psd)(4)  /*for 'disabled at-rest' state */
url(big_button.psd)(5)  /*for 'disabled hover' state */
url(big_button.psd)(6)  /*for 'disabled pressed' state */

That's more states than I would personally used, but you get the idea,  
I hope. Or maybe an 'image-layer' property would be better, so that  
the url didn't have to repeat each time.

Not that I am holding my breath waiting for browsers to support multi- 
layer file formats or anything. But it does seem like layers (or  
frames in a gif animation file, perhaps) would be well suited for  
keeping strongly related and same-size resources like this together  
and easily accessible from CSS. I would love to see something like  
this in an <image> spec, if there was a multi-layer unencumbered  
format that compressed as well as, say, PNGs.

> Sprite techniques make the total size of the image much bigger than  
> the sum of the sizes of the sprite images.  See http://blog.vlad1.com/2009/06/22/to-sprite-or-not-to-sprite/ 
>  for some discussion.

That's pretty interesting. Thanks for the link.