Sobre el uso de los sprites

¿Será más rápido cargar una imagen grande o varias imágenes pequeñas?

No es una pregunta retórica, durante mucho tiempo, siempre se ha creido lo segundo y de hecho, la técnica del slice, partir una imagen en pedazos y cargar cada parte por separado, es algo que incluso poseen varios editores de imágenes como Photoshop o Fireworks.

Sin embargo, de un tiempo a esta parte, la idea ha ido cambiando y en estos momentos, hay una tendencia a lo contrario, al uso de los llamados sprites, es decir combinar varias imágenes en un solo archivo y luego, utilizar CSS para mostrarlas (más información)

¿Cómo hacemos esto? Es simple, sólo necesitamos un poco de aritmética.

Por ejemplo, supongamos que tengo tres íconos de 16x16 que quiero mostrar como enlaces y cada uno de ellos, tiene un efecto hover; necesitaría seis imágenes individuales. Las combino con un editor, poniendo una al lado de la otra y creo una sola imagen que tendrá 48x32:

En la fila superior tengo los tres íconos en estado "normal" (los que veré por defecto) y abajo los tres que mostraré cuando pase el mouse sobre ellos.

La propiedad background nos permite colocar una imagen de fondo y posicionarla, es decir, que si dimensionamos algo, podemos agregarle un fondo de mayor tamaño y  sólo mostrar una parte de esa imagen. Creamos unas clases CSS para que se vea el ejemplo:

/* las propiedades generales */
a.iconos {
  background:transparent url(URL_IMAGEN) no-repeat 0px 0px;
  display: block;
  height: 16px;
  width: 16px;
}

/* las propiedades de cada uno de los íconos */
a.icono1 {background-position: 0px 0px;}
a.icono2 {background-position: -16px 0px;} /* desplazamos la imagen 16 pixeles a la izquierda */
a.icono3 {background-position: -32px 0px;} /* desplazamos la imagen 32 pixeles a la izquierda */

/* las propiedades de los íconos con efecto hover */
/* de manera similar, desplazamos la imagen a la izquierda y 16 pixeles hacia arriba */
a.icono1:hover {background-position: 0px -16px;}
a.icono2:hover {background-position: -16px -16px;}
a.icono3:hover {background-position: -32px -16px;}

Lo mismo podemos hacer inline, escribiendo el estilo en la etiqueta HTML. Ene ste ejemplo usamos una imagen de 96x170 pixeles donde se combinan dos, una debajo de la otra:

En este ejemplo, usamos dos imágenes de 96x85 combinadas:

<div 
  style="background: transparent url(URL_IMAGEN) no-repeat 0px 0px; cursor:pointer; height: 85px; margin: 0 auto; width: 96px;"
  onmouseover="this.style.backgroundPosition='0px -85px';"
  onmouseout="this.style.backgroundPosition='0px 0px';"
></div>

La posición se define en pixeles, primero la coordenada horizontal y luego la coordenada vertical. La posición 0px 0px es la esquina superior izquierda, y el desplazamiento lo calculamos sumando los anchos y/o los altos de cada parte y colocándo ese valor como un número negativo.

¿Cuál es la ventaja? Fundamentalmente, cuando se trata de íconos con efectos hover, evitamos la demora que se produce cuando se carga la segunda imagen; al ser una sola, siempre está disponible y eso agiliza la visualizacion de las páginas.

Obviamente, no es algo para aplicar en cualquier caso y siempre hay que tener en cuenta que el tamaño de las imágenes es un detalle a tener muy en cuenta cuando se trata de velocidades de carga pero, es un método efectivo y muy recomendable.