About Sprites

[MrApples]

I've read about CSS Sprites, a method of website optimization in which images are stitched together in the same image to save HTTP requests, which delivers faster pages.

With that in mind, - In Theory - If all the images on a web page we're stitched together automatically into the same image, and displayed through use of divs and positioning (to only show the part wanted), would that speed up webpages? Would it put more on a graphics processor? Would it slow down the parsing?

I assume it is best suitable for icons and extras, but just in theory.

[sR Craig]

Hello MrApples,

You are correct!

Using CSS Sprites can typically go a very long way to helping with the optimization of your website. However, it is critical that some thought, common sense, and logic be put into the creation of your Sprites.

For example, It would do little good to put 20 smilies into one image map when on average, only one or two is used on a page. You could be loading 18-19 times what is necessary...

However, were it would help a create deal would be for things like:

The Full WYSIWYG Editor
The Quick WYSIWYG Editor
Instant Messenger Icons
Quote, Multi-Quote, and Quick Reply Buttons
Status Icons (EX1 (https://vborg.vbsupport.ru/images/cstyle/blue/statusicon/thread_new.gif) EX2 (https://vborg.vbsupport.ru/images/cstyle/blue/statusicon/thread.gif) EX3 (https://vborg.vbsupport.ru/images/cstyle/blue/statusicon/thread_lock.gif) EX4 (https://vborg.vbsupport.ru/images/cstyle/blue/statusicon/thread_hot_new.gif))
Etc...


The idea is to use image maps for things that you know the user is going to need when they go to xyz page.

When a Sprite is properly created you should find that the total size of the images combined is more than your Sprite. While this is not always the case, in many instances you are even better off increasing total size of the images with your Sprite if it will be reducing enough requests.

So to directly answer your questions:

Does it speed the loading of webpages? --Yes. (There are less connections which must be created [Reduces Server Load], the total size for all images typically drops, and page loads feel Snappy).
Would it put more load on a graphics processor? --No. (It does not put any extra load on the users GPU, as they are simply images which are being downloaded and displayed differently using CSS).
Would it slow down the parsing? --No.


If you stay tuned, I plan to release some Sprites w/ the CSS for things like the WYSIWYG Editor, and a few other things for which most people use the default vBulletin images for. I also intend to write an extensive tutorial which will cover when to use sprites, how to organize them, optimize them, etc...

BTW: When creating a new post on vBulletin.org there are ~30 images downloaded just for the upper part of the text editor. Thats ~30 requests that could be reduced down to just one. In the long run, its small optimizations like that can really make a difference.