ZOMDir > Blog

Monday, 6 January 2014

A faster website with CSS sprites

The last few days I've been working on the performance of ZOMDir.com. That was necessary due to the fact that some extra functionality slowed down the site a little.

CSS Sprites

To guarantee a good user experience it is necessary to have a quick responding website. I have done almost everything to speed up the site, but I've never used CSS sprites.

First I created a sprite with instantsprite.com and experimented with jsfiddle.net to get some experience. 

Pros and cons of CSS Sprites

In practice it was not possible for me to sprite all images used. Soon I concluded that:
  1. I was not able to repeat a CSS sprite image;
  2. You can't scale a CSS sprite image (100% for the desktop version, 50% for the mobile version of the site);
  3. The CSS sprite image is not shown when the page is printed.
Therefore I did not sprite all images. Nevertheless I was able to improve the performance. The new version of the website loads circa 12.5% faster than the old version.

However there are some drawbacks. With CSS sprites the user is not able to save the image. This implies that these sprited images will not be indexed by Google. Probably this has also consequences for the partially sighted. A sprited image doesn't have an "Alt" text.

An alternative, to handle this latest drawback, is to use code like this:

<div class="sprite iconname" title="This text will be shown in the tooltop"><span class="displaynone">Alternate text describing the image you will see</span></div>

Instead of this standard image code:

<img src="images\iconname.png" title="This text will be shown in the tooltop" alt="Alternate text describing the image you will see" />

No comments:

Post a Comment