Speed up your website with CSS Sprite
First, let us look at reasons that may cause a website to load too slow on the users’ ends:
1. The server has to process too many things before sending back the output to the user’s browser: in this case we have to optimize the server’s process. By the way, if your Zencart is slow, have a look at our Zencart Speed Up Guide.
In this post, we will look at CSS Sprite technique and see how it can helps you to reduce the number of requests for each load and thus speed up the page’s loading speed:
In many design techniques such as the slide door technique we have to slice 1 image into 2 single images, this mean we will need 2 server requests. Also, there is the assumption that a full double-sized image must be heavier than a similar set of sliced images, since the overall image area will usually be larger, so people (including me) tended to cut 1 big image into smaller images to “reduce size”. All image formats have a certain amount of overhead though (which is why a 1px by 1px white GIF saves to around 50 bytes), and the more slices you have, the more quickly that overhead adds up. Preliminary tests suggest that all this indicates smaller total file sizes for CSS Sprites, or at the very least not appreciably larger sizes.
So what if we can use 1 single image only? We can still have the same image size in total (or even less in many cases) while saving tons of requests and thus speed up the load speed noticeably. The answer, surprisingly, found in the techniques used in our favorite old school 2D games. The basic idea is to using a single (large) image which contains multiple elements, then use css’s background position (and optional height/width setting) to selectively display only part of that large image. I have found a wonderful in depth article about CSS Sprite technique which you can read here on A List Apart.
Good luck and God Speed to You.