Speed Up your Web Pages with a “Sprite”

Each time a browser makes a call to the web server for an image, it takes time. A page with a lot of images has to make a lot of separate image calls (or server pings). This adds up to a lot of time.

One way around this is to leverage what is called a “sprite” and your CSS. Instead of making multiple calls to the server for multiple files, simply create a single, optimized image that has all your icons and graphics on it. Think of it as a single rectangular canvas. Then, using CSS, you can reference the single image file, but just coordinates of the file to where the icon you need corresponds. The image will then appear as you desired.

This can really improve the performance of mobile sites especially, where load time means quite a bit. Additionally, it will help your SEO and PPC, as faster pages equal higher scores.

For more on sprites, check out these resources:

http://www.internetretailer.com/2011/07/12/image-fairy-can-speed-mobile-sites

http://www.spritebox.net/

http://www.webmonkey.com/2011/06/create-image-sprites-the-easy-way/


%d bloggers like this: