Question about CSS sprites

[bristolcat]

I’m new to the forum and would like to say hello before I launch into my question. So, hello! :)

I’ve been working on a site for my friend’s rock band and I’m a little frustrated. I was half taught and half self-taught CSS in about 2003. Back then, I was told that my images shouldn’t total more than 50k. I’ve always kind of followed this rule and gotten by fine.

Now I’m developing this site and it’s fairly graphics-heavy. My friend wants a fairly elaborate menu and large header. I have a background image behind the content of the site, too. It’s not the most efficient design I’ve ever done. I was getting frustrated trying to pare these images down and last night I tried seeking help and/or a way to relieve my conscious if I had a 100k worth of images. So, I Asked Metafilter. They gave me a lot of great optimization hints and introduced me to CSS sprites. I found a really good explanation of sprites on CSS-Tricks, but I’m still somewhat confused.

Could I use CSS sprites for every image on my page? I have some images that are alpha pngs that overlay the top banner on my page. Even barring those, would it be a good idea to have large banners and background images as sprites? None of my images repeat.

Another question – if the point is to reduce the number of requests and put all of your images in one file, what’s stopping me from just making my site one big image and laying my dynamic content over that? It’s fixed width and height. That would certainly make things easier, but it seems counter to the way I’ve always been taught to do things.

I’ll be using this as a template for Joomla. There are a lot more details in that AskMetafilter link. I asked the questions in that link, too, but AskMefi isn’t really a forum and I thought I’d come here to dip into a community of CSS developers and see what you all thought.

Thanks in advance!

[Spunkmeyer]

CSS Sprites are fantastic. Visit http://www.thedailyspunkmeyer.com and you’ll see that all my images are css sprites. While larger images seem like they take longer to load than smaller images, they don’t really. The fact that all the smaller images are loading separately tricks the eye into thinking they all load faster. Try this, create a css sprite (I assume you know how you do this) for a couple images and then run a speed report at http://www.websiteoptimization.com/services/analyze/ Focus on the speed for 56k /ISDN 128k especially. Cable speeds won’t really give you a good indication whether you’ve done anything.

If you’ve notice a speed increase using sprites, then use them. Also, less HTTP requests means the site needs less external files to render and things will load faster.

[Author]

Posts