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
div) or any block-converted
display: block, such as a
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.
Let’s create a sample using two techniques: using an ...