Web Design Tips, Tutorials & More!

Sprite and CSS

The use of sprites to increase speed of loading on high traffic websites is becoming more and more popular. Dating back to when the net first really got started and most people were on dial up a means of fast loading a heavy traffic website with the use of minimal load on a server, the format hasn’t changed it just basically got put on one side when faster net became available. Now with items like mobiles, it is once again coming to the fore.

Combining with CSS sprites both make your webpage a lot fast, but they also give less of a call on your server. Basically, what a sprite is, it’s a combination of your images as one file. By utilizing CSS and its three states of hover standard and click, you can then move from one image to the next.

Optimization as a result of this should be pretty obvious as it takes far less time to download one sprite image than it would have to download a group of images. And it also is only a single request for the HTTP. If the site is a heavy traffic site there well be huge benefits. This is one of the reasons why sites like Digg and Yahoo make use of this.

This format could be applied to almost all graphics. It also means that background images can now be used in things like forms and increase your page design. Page icons that are standard like a block of information as well as alerts can be made into sprites.

Implementation of sprites is a process of deciding which images to include in the .png file. This file has to be of the height and breadth of the images you intend to include. It is sometimes a good idea to add some white space between the images. Use a graphics toolbox of some description to see what the file sizes are and then combine them into a master image file that is a .png. Once it is combined, you will then need to apply the image bit by bit into the page. It is done using CSS’s background and the url()  as the method.

You will use the following format:

By doing this, you have used many classes and can apply the background image in different places. You also need to have a CSS background property so use this.

You can now move around between the icons and the page elements.

If you are using the graphics in the Navibar, you will see how crucial it is to alight everything perfectly with the extra spacing between the images to make them line up correctly. It also enables them to become more visible. Sometimes, it takes time to get this exact, and you need to add more space here and take some from there. You do need the pixels to be perfectly aligned so that when you use a roll over it works correctly. Try making use of the gridlines in a program like Adobe. This enables you to count both across and down.

One of the easiest tools to use in the making of a sprite is SpriteMe. This saves a tremendous amount of time as you can generate the correct coordinates for every image easily.

Leave a Reply