CSS Sprites

Los CSS Sprites es una sencilla y efectiva técnica de CSS que nos permite ahorrar ancho de banda.

Realmente los sprites son imágenes que contienen varias imágenes y se muestran gracias a diversas técnicas que nos permiten recortarlas.

Inicialmente se utilizó en el desarrollo de videojuegos debido a su versatilidad a la hora de realizar animaciones, hoy también nos lo encontramos como una técnica CSS que nos permite ahorrarnos ancho de banda.

Gracias a esta técnica podemos reducir considerablemente el peso de nuestra aplicación web y lo que es más importante el número de peticiones HTTP, estas dos ventajas nos permiten reducir el tiempo de carga de nuestra aplicación web y reducir la carga en el servidor.

¿Cómo aplicar esta técnica?

Únicamente tenemos que utilizar las propiedades CSS que nos permiten alterar el alto y ancho (height, width), de este modo podemos recortar una imagen que mostraremos como background, además necesitaremos modificar las propiedades de background-position para desplazarnos por la imagen original y mostrar la zona deseada.

Pequeño tutorial para comenzar a utilizar esta técnica.

¿Cuándo utilizar esta técnica?

Debemos de tener en cuenta qque cada vez que nuestra aplicación web llama a imágenes, hojas de estilos, archivos javascripts lo que realmente estamos haciendo son peticiones HTTP que se solicitan de manera individual y aumentan la transferencia y el tiempo de carga.

En primer lugar debemos utilizarla si tenemos un número elevado de usuarios y nuestro servidor alcanza picos de carga altos, también sería conveniente su uso en aplicaciones web que tengan un gran número de imágenes de tamaño pequeño.

El concepto principal a tener en cuenta es que debemos tener cuidado con la suma del tamaño de los archivos externos, no es lo mismo cargar 15 elementos de 10 KB que un único elemento de 150 KB, en el segundo caso la carga sería considerablemente más ligera.

La explicación a esta última afirmación es que al cargar un alto número de elementos estamos realizando peticiones HTTP que incluyen cabeceras y que a su vez vienen acompañadas por cookies (las cookies son relativamente ligeras pero los usuarios navegan con conexiones asimétricas dónde la velocidad de subida es muy inferior).

Por lo tanto podemos llegar al caso en el que las cabeceras de los archivos pesen más que los propios archivos y a menudo la carga que ello representa en el servidor se duplica.

Ejemplos prácticos

Yahoo utiliza esta técnica para mejorar el rendimiento, el principal motivo es el gran número de pequeñas imágenes que utilizan para identificar cada uno de los servicios.

AOL también utiliza CSS Sprites en su página de inicio, y el motivo de su uso es idéntico al de Yahoo debido al gran número de imágenes que sirven para identificar todos sus servicios.

Estos dos ejemplos vienen muy bien detallados en WebSiteOptimization.

Generar aumáticamente un CSS Sprite

Crear este tipo de imágenes puede resultar complicado pero por eso lo mejor es utilizar alguna aplicación que genere el CSS Sprite de manera automática.

CSS Sprites Generator