SuzyUK - 7:07 pm on Mar 1, 2008 (gmt 0)

>>Poor Suzy... I know this is only tangentially related...

I'll let you off, but only cos you put that video link in of which a part is highly relevant :)

I watched it all, it's very interesting - wrt this discussion and image slicing it's the first bit (about 8 minutes in) which is an eye opener

Souder say's the rules (that front-end developers can follow) for improving page load times are in order of importance and look what's in at number one..

Rule #1 = Use CSS Sprites

so stop dicing and start merging! :)

in the video he uses an example of 60 icons merged together into one image - load once and reuse using CSS background positioning so it dramatically cuts the number of http requests - the exact same principle could be applied to the larger image slices used in page design, although admittedly in some designs it might be very hard to visualise how to merge "irregular" slices into a single sprite it is possible. (I have such a cool example of complex sprite but I don't think I can link it.. it shows that even merging irregular slices, not just square icons, can be done in a sprite)

when I say slice as opposed to dice that's in effect what I mean really, a slice is already just some merged parts of a graphic that might previously have been diced, a mini sprite if you like, it is just not on such a grand a scale as a full blown sprite

-Suzy

added: found a great online example

ask.com > right click on the ask logo and view the background image!

[edited by: SuzyUK at 1:30 pm (utc) on Mar. 2, 2008]