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.

2. The user’s Internet connection is too slow or your page’s size is too big (over 1MB for example): we will have to reduce your total page size as much as possible, that including using less images, flashes, and minify and compress your css and javascript. You can check the above guide for some ideas.

3. The page makes too many requests: if you have 10 images on the page, 5 background image, 5 css and 5 javascript files then the browser has to make at least a total of 25 requests to the server just to load the page. This whole process will obviously slow down the users’ load speed and increase the load on your server.

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.