css sprites

caratula
Introducción

Los sprites CSS son una manera de reducir el número de llamadas HTTP realizadas por los recursos de imagen referenciados de tu sitio web. Las imágenes se combinan en una única gran imagen con coordenadas X e Y definidas. Teniendo asignada la imagen generada a los elementos de página necesarios, la propiedad CSS background-position puede usarse para hacer visible el árearequerida de la imagen sprite.
Esta técnica puede ser muy efectiva para mejorar el rendimiento, particularmente en situaciones dónde se utilizan muchas imágenes pequeñas (como iconos de menú). La página inicial de Yahoo!, por ejemplo, utiliza esta técnica exactamente para eso.


 
EFICIENCIA Y VELOCIDAD DE CARGA
Una página web compleja puede tener que cargar decenas o cientos de imágenes,tanto imágenes de fondo como imágenes de contenido. Hemos visto que las imágenes de fondo se manejan con las propiedades tipo background y que entre estas propiedades tenemos algunas como background-position que nos permiten establecer dónde debe situarse la imagen.

 
Uno de los problemas con las que se enfrentan las páginas web es que son cada vez más complejas y con frecuencia incluyen ungran número de imágenes. Cargar una imagen conlleva una petición al servidor, una respuesta del servidor, carga en el navegador, etc. e incluso si las imágenes son de pequeño tamaño todas estas peticiones consumen tiempo y hacen que la página cargue con lentitud.
Gracias a las facilidades que ofrece CSS para el manejo de imágenes de fondo podemos mejorar la eficiencia del procesado de imágenes y lavelocidad de carga de la página.
 
 CONCEPTO DE SPRITE CSS
En programación el concepto de sprite puede tener distintos significados. En CSS nos referimos a sprite para hacer alusión a un conjunto de imágenes diferentes agrupadas todas ellas en una misma imagen. Por ejemplo:

 
 
Esto que vemos es un ejemplo típico: diferentes iconos se agrupan en una imagen siguiendo una “cuadrícula”. Lacuadrícula es un elemento que usan los diseñadores gráficos para saber que cada icono ocupa exactamente el mismo espacio (por ejemplo 64 pixeles de ancho y 64 pixeles de alto), pero una vez terminan de crear el diseño la imagen se suele guardar sin cuadrícula (es decir, no se ven líneas de división entre las distintas imágenes). El fondo tipo tablero de ajedrez en los programas de diseño como Gimp óPhotoshop indica que la imagen es una transparencia, no forma parte de la imagen en sí.
En el caso de agrupar iconos en una sola imagen, el número de iconos puede llegar a ser muy grande, en algunos casos pueden ser decenas o cientos.

 
 
En la imagen anterior tenemos 7x7 iconos en una sola imagen. Supongamos que en cargar una imagen en la página web se tardara 0,1 segundos. Si cargáramoslos 49 iconos por separado requeriría 4.9 segundos mientras que cargando el sprite únicamente necesitamos 0.1 segundos (esto es una simplificación, pero nos vale como ejemplo). Este es el motivo por el que se usan los sprites en diseño web y en CSS.
Hasta ahora hemos visto las imágenes dentro del sprite como imágenes todas iguales, cada uno en un espacio de la cuadrícula, pero esto no tiene porqué ser así. Por ejemplo se puede usar algo de este tipo:

 
 
Aquí vemos cómo las distintas imágenes que componen el sprite siguen una cuadrícula, pero cada cuadro es de distintas dimensiones. Por ejemplo, el icono de la estrella tiene distinto tamaño que el icono del pulpo o el icono del escáner.
También puede crearse el sprite considerando que una imagen ocupa varios espacios de la cuadrículacomo vemos aquí:

 
 
En la imagen anterior vemos algunos iconos que ocupan un cuadro completo, otros de menor tamaño que solo ocupan parte de un cuadro y por otro lado una imagen de una cabeza de pájaro de mayores dimensiones que ocupa varios espacios de la cuadrícula.
Un sprite no sólo puede contener iconos, también puede tener otro tipo de imágenes como logos, botones, imágenes que...