Sprites CSS

Resulta lógico que, si al momento de que se carga el sitio Web en lugar de descargar veinte (20) imágenes para armar la plantilla, se descarga una (1) sola, el tiempo trascurrido se reducirá notablemente. El CSS Sprites, es una técnica que consiste en la carga de una única imagen que alberga cada uno de los diseños requeridos para formar o decorar la plantilla y acceder a cada imagen por su posición (x+y).

El truco consiste en el uso de las propiedades background-image (para la carga) y background-position para posicionarse dentro de la imagen y mostrar lo que realmente se desea.

<style>
.img1, .img2, .img3, .img4, .img5, .img6 {
  width: 16px;/* el ancho de cada imagen */
  height: 16px; /* el alto de cada imagen*/
  background-image: url('imagen.png');
  background-repeat: no-repeat;
}    
.img1 {
   background-position: -0px -0px; 
}
.img2 {
  background-position: -0px -26px;
}
.img3 {
  background-position: -0px -52px;
}
.img4 {
  background-position: -0px -78px;
}
.img5 {
  background-position: -0px -104px;
}
.img6 {
  background-position: -0px -130px;
}
.img7 {
  background-position: -0px -78px;
}
</style>

<p class='img1'></p>
<p class='img2'></p>
<p class='img3'></p>
<p class='img4'></p>
<p class='img5'></p>
<p class='img6'></p>
<p class='img7'></p>

Para elaborar la imagen no es necesario abrir ningún software de diseño, en la red encontramos sitios como CSSsprites, donde se puede generar una imagen única a partir de varias disponibles.