Sprites CSS

Los Sprites CSS son una manera de optimizar el uso de imágenes en un sitio web. Se trata de una técnica por la cual se crea un gran archivo gráfico, que contiene diversas imágenes y iconos que se utilizan en el sitio, para más tarde con CSS indicar qué parte de la imagen se desea mostrar en cada lugar, a través del atributo background-position.

A modo de curiosidad, ese nombre viene de la época de los primeros ordenadores personales, los míticos Spectrum, MSX o Amstrad, donde se utilizaban para hacer sencillas animaciones de los gráficos de los juegos de aquella época. Los sprites eran cada uno de los fotogramas que componían la animación de los componentes del juego. Para provocar el efecto de animación se mostraban los sprites, uno detrás de otro y con ello se conseguía que pareciera que los gráficos estaban moviéndose.

Los sprites CSS son algo parecido, pero en principio sirven para mostrar imágenes en un sitio web y no necesariamente animaciones de elementos de la página, aunque también puedan servir para eso. En este artículo veremos un ejemplo de un sprite CSS bien sencillo para que se pueda entender bien qué son.

Cómo los sprites CSS pueden optimizar la página

Lo primero que deseamos que se entienda es por qué los sprites CSS ayudan a optimizar la página. La razón es fácil de visualizar si sabemos que la mayoría del tiempo de descarga de una página se consume en la inicialización de las conexiones HTTP.

Si tenemos una página con muchas imágenes, pongamos 10, se tendrá que realizar una conexión HTTP para descargar el código HTML y otras 10 conexiones para descargar cada una de las imágenes que tiene la página. En total, se empleará más tiempo para hacer todas esas conexiones con el servidor que el tiempo real de descarga de los archivos.

Todo esto es razón para que las webs más actuales utilicen esta técnica, que trae consigo varias ventajas, pero sobre todo sirve para optimizar la descarga de las imágenes en un sitio web.

Ejemplos de páginas que usan sprites CSS

En Internet los portales más importantes usan sprites CSS, ya que es una técnica que, como hemos dicho, ayuda bastante a acelerar el proceso de carga de una web.

He descargado algunos de los sprites que utilizan sitios como Facebook o Youtube, que nos servirán de ejemplo para que entendamos qué son.

Estos son algunos de los sprites que se utilizan en la cabecera de la página de la red social Facebook.

Ahora podemos ver algunos de los sprites que utilizan en Youtube. La imagen original de sprites de Youtube mide más de 2000 píxeles de altura y tiene decenas de iconos y fondos para cajas, por lo que esto es sólo uno de los pedazos más representativos.

Un ejemplo sencillo de sprite CSS

Para acabar vamos a mostrar un ejemplo ultra-sencillo sobre el uso de sprites en CSS. El ejemplo sirve sólo para mostrar una de las muchas posibilidades de efectos que podemos conseguir con esta técnica.

Vamos a hacer un botón que al pasar el ratón por encima cambiará por otra imagen. Un efecto que conseguimos con la pseudo-clase hover de CSS.

Para comenzar, podemos ver a continuación la imagen que utilizaremos de fondo para el elemento, que tiene dos versiones, una encendida y otra apagada.

Ahora podremos generar dos clases CSS donde se asignen los estilos necesarios para implementar estas dos imágenes en dos elementos de la página.

.botoncerrar{
   width:28px;
   height: 15px;
   background: transparent url(imagenes/xsprite.png) no-repeat;
}
.botoncerrar:hover{
   background-position: 0 -15px;
}

Como estamos viendo, el elemento en si lo estilizamos para que tenga la altura y anchura deseada para la imagen. Luego le asignamos un fondo de imagen.

Para la pseudo clase hover utilizamos indicamos simplemente un desplazamiento en la imagen de fondo, para mostrar la versión encendida del fondo en vez de la apagada. Como se está viendo, la imagen utilizada para el fondo del elemento es siempre la misma, a través del atributo background-position indicamos que se vea un área distinta de esa imagen cuando el ratón esté encima del elemento.

Ahora podríamos asignar esa clase a un elemento y se transformará en un botón con efecto de activo / inactivo por medio de sprites CSS.

<div class=botoncerrar></div>

Si lo deseas, puedes ver una página donde hemos puesto en marcha este ejemplo.

En el siguiente artículo vamos a complicar un poco más este ejemplo para hacer un sprite con múltiples imágenes.