Website optimalization tips: Sprites

Posted on 01-04-2010 in Advice

Nowadays, it is of the utmost importance for webpages to have quick load times. Many (important) sale opportunities | business opportunities may go out the window just because visitors often have to wait a long time before a webpage is loaded. Thankfully, there are many methods that can reduce a webpage's loading time. In the series "Website Optimalization Tips" we will discuss one optimalization tip per article. In this article, we shall dig deeper into: 'The use of sprites'

Downloading files

A webpage consists of many different files which must all be downloaded by a visitor once he visits the page. HTML, CSS, JavaScript, flash video's, Photo's and other images: These are all components that must be downloaded before a page is fully shown. The drawback here is that these files can't all be downloaded at the same time. Only a maximum of 2 can be downloaded simultaniously per damoain (For example: www.yes2web.nl). What this means is that even if a user's pc and internet connection can handle more downloads at the same time, he or she is still pulled back because of internet protocol limit. To get around this limitation and to reduce a webpage's loading time, all the images can be merged to form a single image, also known a 'sprite'.

Chart: Example of the download time of a webpage with 12 images, shown in seconds

Sprites

A sprite is a large image consisting several smaller separate images. This technique originates from the gaming industry: Many small graphics were bundled to form a single image file to make the game run smoother. This large image is then partially shown where needed, giving the illusion that what you see is a single image. An example of a sprite can be found in the image below. This image is taken from the game Super Mario Bros 3:

Image: A Sprite example from the gaming industry

This same technique can also be applied when building websites. Using it in websites which contain many (small) images like shadow borders, icons en backgrounds may come in handy. By using this method, your user only has to download a single image, which increases the page's loading speed. Yes2web.nl also uses a sprite. You may think that the menu, red bar and vacancy buttons all consist of different images, but the truth is that they are all part of one big sprite!

Besides the loading time reduction, using a large sprite image is relatively smaller in size (kB's) than using separate images. This is due to that the sprite can be efficiently compressed without any loss in quality.

Examples

Other high traffic websites besides Yes2web use this method to reduce loading times and bandwith costs. Here below are three examples of websites that use sprites.

1. Google.nl - Sprite google.nl
2. Nu.nl - Sprite nu.nl
3. Geenstijl.nl - Sprite geenstijl.nl

If you have ever asked yourself whether your website is loading fast enough, or if it meets the current performance requirements, or if you would just like to know more about sprites and other forms optimalization. You could always contact us at Yes2web.

« Back to Advice