Has anyone utilized CSS image sprites?

I've been experimenting with various means to cut down on load time. Has anyone used CSS image sprites successfully?

I found these two useful pages via this article: http://www.vbulletin.org/forum/showthread.php?t=234486

http://cssglobe.com/post/3028/creati...ul-css-sprites
http://csssprites.com/

I use it all the time in my development work. Quick and easy, no js to mess with.

Think it's worth it to combine vbulletin images on a production site?

It really depends on your design. I pretty much only use them for nav bars that require rollovers. Keep in mind, you can't IF condition an image.... so you need to take into account that ALL groups will be seeing the exact same thing everytime.

Originally Posted by Brian Cummiskey

It really depends on your design. I pretty much only use them for nav bars that require rollovers. Keep in mind, you can't IF condition an image.... so you need to take into account that ALL groups will be seeing the exact same thing everytime.

However you can use if condition on vBulletin 4 css which is a very important bonus imo.

CSS sprites is a huge bonus for big boards , any big board owner definately should use it.

Thanks for the advice.

I'm planning on putting more commonly used images from postbit in one sprite and images in the header in another. I figured I can cut back on a lot of requests right there.

If you don't have lots of images , you can keep them in one file and if you use mod_expire you can cache that image and reduce incredible amount of httpd calls.

speaking of, where/how are you supposed to set expire rules?

You can set it within httpd.conf or .htaccess

Following rules will work

Code:

<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType image/jpg "access plus 7 days"
ExpiresByType image/gif "access plus 7 days"
ExpiresByType image/jpeg "access plus 7 days"
ExpiresByType image/png "access plus 7 days"
ExpiresByType text/css "access plus 72 hours"
ExpiresDefault "access plus 24 hours"
</IfModule>

If you add these to httpd.conf , just tail access_log and visit same page twice. On your second visit you'll receive httpd status 304 for cached files

oh okay - great!

Can js files be added in there as well?

Surely you can

Another question - how can I made the social bookmarking links sprites?

For example, I have a Facebook link...
http://www.facebook.com/share.php?u=%url%,/images/vbseo/facebook.gif,Share on Facebook

Right now would it have to be something like...
http://www.facebook.com/share.php?u=%url%,/clear.gif" class="postbitsprite facebook",Share on Facebook

actually, I answered my own question. This works:
http://www.facebook.com/share.php?u=%url%,/clear.gif\" class=\"postbitsprite facebook\",Share on Facebook

but strangely it doesn't work in the LinkBack pulldown

anyone have any ideas on the above?

so with this method all default vbulletin images could be integrated just in 1 file?