Comments on: CSS Spriting Tips

By: Social Engine Templates

Social Engine Templates — Sun, 30 Aug 2009 06:46:10 +0000

At first the sprite approach was very difficult for me because I’d spend so much time trying to calculate everything out… but after a while I got better at knowing how to place the images and now it works great for me! this post was awesome, thanks!

By: Steve-o

Steve-o — Wed, 10 Jun 2009 13:17:19 +0000

“And I leave you with a thought: What if all images could be g-zipped together on the server and unpacked by the browser? 1 http request, easy to manage, more control of what is cached and for how long.”

mod_deflate…
expires headers…
cache control headers…
etc…

What do you mean “what if?”

By: Melissa Church

Melissa Church — Tue, 02 Jun 2009 09:08:48 +0000

I’ve been meaning to get to sprite-ing on my sites, but my problem is I spend way too much time on Word Press and to be honest I haven’t had much luck designing sprite elements that look any good in WP. I’m thinking I’m missing something when I dig into my themes and start messing with them. Maybe I’m not hooking the files up correctly on the backend?

By: Fred

Fred — Fri, 29 May 2009 03:57:14 +0000

@Jim Plush

You should absolutely use this on your site if you use CSS images, especially for tabs, menus and sprites to avoid image flickering effects.

// Re-enable CSS image cache in IE6 SP1+
if(document.all&&document.execCommand&&!window.opera)
try{document.execCommand(“BackgroundImageCache”,false,true);} catch(e){}

http://evil.che.lu/2006/09/25/no-more-ie6-background-flicker
http://blogs.msdn.com/cwilso/archive/2006/11/07/ie-re-downloading-background-images.aspx
http://msdn.microsoft.com/en-us/library/ms536419(VS.85).aspx

As for the example above, I would use 3 CSS sprites:

One wide sprite with: the 3 green and black and blue large width items
One mid-size sprite with: all the 5x ~160px wide items
One small sprite with: all the remaining ~25px and less circle items

Grouping things of similar size together while giving items some space to “breath” makes total sense.

Even with the examle above, moving the blue part top and the white part a little more more up would have save tons of unused space.

By: ksieke

ksieke — Thu, 28 May 2009 12:05:35 +0000

wups.. sry!
@art: but you can also have advantages by using big images in sprites.. just think about reducing the number of requests

By: ksieke

ksieke — Thu, 28 May 2009 12:03:00 +0000

Tip for too large sprites: crush them without loosing quality
for png: pngcrush
for gif: gifcicle

fyi: If you use gif or png depends on your sprite-image. Test both, crush them, compare file size and quality.

mfg, ksieke

By: art

art — Tue, 12 May 2009 03:40:07 +0000

never used sprites for big elements like in example, only for small icons or navigation elements

By: Phil

Phil — Sun, 10 May 2009 23:13:38 +0000

Sprites are great when used in moderation. I tend to split my images into 3 files:
1. fixed box size – Where the element within which the image is used, is a fixed size, these images can all be crammed together as there is no danger of them being incorrectly displayed with variable content.
2. repeat-y images and vertically variable boxes.
3. repeat-x images and (rare) horizontally variable boxes.

Try it – it makes sense!

And I leave you with a thought: What if all images could be g-zipped together on the server and unpacked by the browser? 1 http request, easy to manage, more control of what is cached and for how long. Images are also then held seperately in memory – if that is indeed beneficial? Would the processor time required to zip/unzip the files outweigh the improved download time though?

By: Gopal Raju

Gopal Raju — Sat, 09 May 2009 09:05:11 +0000

Useful tips! will definitely implement for my site redesign!

Gopal Raju
productivedreams.com
twitter.com/gopalraju

By: Joseph Hsu

Joseph Hsu — Tue, 05 May 2009 17:10:21 +0000

group sprites in seperate images based on usage, eg UI elements into one image and box corners in another, that way you make sure to use what you need.