Even though high bandwidth connection availability and internet connection speeds have rapidly increased in the last few years, no one wants to wait around for pages to load. As mobile browsing from cell phones continues to exponentially grow despite reasonably fast speeds, patience for a page to load while on the go usually isn’t a trait held by many.

In effort to shorten load times, we use “sprites”. Sprites are an old technique used in computer graphics – they were most prevalent in video games prior to 1995. A single sprite is made up of two or many images composite into one, and then arranged on the screen along with other sprites, and background imagery. This was done to ease processing load so a game could incorporate more sound or graphics and play smoothly.

This same concept is being used today on the web. If a webpage has 10 images representing a state of a single object and each weighs 10kb, that’s 100kb worth of images to download. What’s more is that the browser needs to make a request to the server each time to get an image. These requests add up, between the HTML of a page, the CSS that presents the layout and gives the page style, and other functional code to make a page interactive, flash movies, etc etc; Each of these elements adds to overall load time.

We utilize tools to optimize individual pieces of a website to make them load more efficiently – or only when needed. Because images typically make up the bulk of these server quests, we make great effort to optimize them any we can. One such way is by using sprites.

Have a look at recently our launched http://www.fabreeka.com with a basic navigation sprite

Each of the navigation items would normally be one image. Combine that with each item’s rollover, and in this example we have 12 images! Yikes. We haven’t even got to the rest of the site yet. Instead, we’ve combined it into one and used some CSS techniques to pull it all together.

For another example of this technique, here is an example by Apple.

7 Buttons, 4 different button states (up, over, down, selected). That would be 28 server requests, before you can even start downloading the images!

Additionally, when a link title needs to be updated, we can easily modify one image and in one location. So while making a sprite work may take a little longer to develop up front, the time is quite literally well spent to save time later in the developement process and prevent site visitors from beign discouraged by long load times.