What Are CSS Sprites?

Sooner or later in SEO, you will eventually stumble across site load speed issues which are causing your site to load slow and potentially significantly increasing your bounce rate.  It is debatable whether Google currently track site load speed as a metric when considering positions in results, however judging by the simple fast design of Google search and Google chrome, and adding to the mix their mention of fast sites in their company “Our Philosophy” page; and I think it’s fair to say your not exactly going to lose a position by optimising for speed.

Whilst there are several considerations when addressing how to speed up your site, sites with a large number of rollover elements may benefit from the use of CSS sprites; a technique which has existed for some time but has only been formalised in to a technique over the last five years.  The practical benefit of using sprites comes from having the ability to download one image and use that file to reference every rollover image on the page.  This prevents the need to download several images for each of the elements of your page. The technique is done through some trickery using CSS and the creation of a central image file with both static and rollover images.

How to Create a Sprite

Your first point of call is to create a central image file which has all the images you need.  Here’s an example

navigation images

 

So You Have Your Master Image File, Now What?

Once you have created your master image file and have all your rollover and normal state images collected together in to one central image, the next step is to instruct your browser where to show each piece.  Before we go any further it is necessary to explain the mechanics of how this all works and what you are doing away from coding.

In lay, you must first place your master image behind the main wall of the site.  You then create a window from which to see the image hidden in the background and position that image so that only one aspect is visible through that window.  That window in itself can be assigned instructions and other commands, an example coming from making the window a hyperlink to another page.

So How Does One Go About Coding Such a Page?

The first step of the process is to find exact pixel references for each normal state element on your master image and index the corresponding rollover state of that image (We recommend placing these images as close as possible, obviously avoiding overlapping.   These references will identify how big the window needs to be and where to position in accordance with where the image falls on the master image.

From here on out I am going to leave it to my good friends at W3Schools.com to further elaborate on the coding aspect of this technique as it is outside of the remit of this article.  In short, you must use CSS styling to position the correct pixels of the normal state image in the window created and subsequently move that same image, upon a user rolling over the window created.  For a thorough walk through of how to create both the html and Style Sheets for a sprite, visit http://www.noobcube.com/tutorials/html-css/css-background-image-sprites-a-beginners-guide-/#prephtml

Sprites Best Practice?

Whilst sprites can reduce the amount requested from your server quite significantly, it should not be considered a fix all solution for every image on your page.  Doing so will create difficulties when changing the layout of your site or trying to add new elements.  It is best used for consistent images which are unlikely to change, such as branding and navigational elements.  Further it is best practice to create several sprites, although obviously not too large a number of them (their value comes from reducing the number of images after all), so to make changes more practical and not interrupt the entire styling of the page/site.

Always try to keep the rollover images as close to the normal state images as possible and in addition make the background of your sprite the same as that where the elements are located; this is so to avoid flashes of different colours which will highlight the technique.

No More Alt Attribute?

The eagle eyed SEO’s out there may have realised that by using styling sheets in such a way you lose the ability to create Alt attributes for your images, which may adversely affect your relevance.  Whilst it is debateable whether this is the end of the world and really worthy of proper consideration, I would simply recommend using styling sheets for aesthetic aspect of your site if your that bothered.  Through creating sprites for navigational items you are avoiding wasting alt attributes with tags like “home” and instead can save the regular <img> element for images which are specific to a page or may increase relevance (such as a logo with a keyword name).

Do Sprites Make Your Site Load Speed Increase?

The short answer is yes!  They are not an all-fixing solution and must be used in concert with techniques such compression, removing unnecessary white space, caching, externalising script and making use of Google’s own libraries, however they do marginally increase site load speed and can help to improve the site experience for site users.  Just in case you’re not quite convinced, it is telling that Google themselves have sprites running for most of their images.