O'Reilly logo

Programming the Mobile Web by Maximiliano Firtman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

CSS Sprites

CSS Sprites is a great modern web design technique for reducing the number of image server requests on a web page. There are a lot of online resources and books available on this technique. For now, suffice it to say that if you have many images in your site (preferred logos, icons, background images, flags, etc.), you can reduce all of those to one big image with all the originals inside and use a CSS mask to determine which portion of it to show in each container.

This technique has a great impact on web performance, but for mobile applications, we should think twice before using it and analyze the possible problems. First, we need full background-position CSS property compatibility (the mobile standards include this, so it’s not really an issue). The second consideration is that we will not be using img tags. In their place, we will use any block element (div) or any block-converted element using display: block, such as a span or a tag. This means that we cannot provide alternative text for the images, and the browser won’t know how much space to allocate for each image until it renders the CSS file.

Finally, in some browsers this technique can have an impact on rendering performance, because the big image will be duplicated in memory for each usage. We need to balance the performance gained through the reduction of requests with the performance lost in the rendering engine in some browsers.

Samples and Compatibility

Let’s create a sample using two techniques: using an ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required