CSS Sprite: método para mejorar el tiempo de carga de una web.

CSS Sprites como cualquier otra técnica de programación se emplea para solucionar una determinada problemática.

¿Cual es la problemática?

Una de nuestras máximas prioridades a la hora de optimizar nuestra aplicación web debe ser reducir las peticiones que ésta hará al servidor una vez el HTML se haya cargado en el navegador del cliente. Cada archivo de hoja de estilos, cada archivo Javascript, cada imagen… cada elemento externo en definitiva, se solicita de forma separada y aumenta por tanto la transferencia y el tiempo de carga.

Ese aumento no es proporcional a la suma del tamaño de los archivos externos, es decir, la carga de 10 elementos de 5 KB no es igual de rápida que la de un elemento de 50 KB.

El tiempo de carga de un archivo externo se  puede dividir en:

• Tiempo de transferencia del propio fichero.
• Tiempo de conexión con el recurso.
• Tiempo de procesado de la petición del fichero.
• Tiempo de respuesta del fichero o recurso.

Además en todas estas transferencias hay que tener en cuenta que el volumen de información que se intercambia se compone de:

• El propio fichero.
• Las cabeceras asociadas.
• Las posibles cookies que se empleen.

¿Como podemos aliviar esto?

ejemplo de sprite

Evidentemente existen muchas técnicas que se pueden aplicar, vamos a abordar una de ellas:  CSS Sprite. Esta es una técnica que se empleaba en el desarrollo de los videojuegos en 2D para la animación de sus personajes.

Como ves, los sprites no eran más que imágenes que contenían a su vez varias imágenes pequeñas, que en el caso de los videojuegos se utilizaban para recrear una animación.

En nuestro caso, la solución a las múltiples peticiones para imágenes en nuestras hojas de estilo pasará por el uso de imágenes grandes que contengan a su vez varias imágenes más pequeñas. De esta forma, para mostrar diversos fondos o varios iconos, estaremos realizando una única petición al servidor, con el correspondiente ahorro en tiempo de carga y transferencia.

Un ejemplo sencillo

El mecanismo principal de uso en esta técnica está en el correcto posicionamiento de backgrounds para mostrar sólo aquella parte de la imagen que nos interesa. Pongamos como ejemplo un menú, en el que queremos mostrar un icono diferente por cada opción.

Partiríamos de una imagen que contiene los tres iconos:

Nuestro HTML podría ser algo parecido a:

1
2
3
4
5

<ul><code>
	<li class="option1">Opción 1</li>
	<li class="option2">Opción 2</li>
	<li class="option3">Opción 3</li>
</code></ul>

y para el CSS usaríamos

1
2
3
4

<code>.option1, .option2, .option3 { padding-left:20px; }
.option1 { background:url(iconos.png) 0 0 no-repeat;
.option2 { background:url(iconos.png) 0 -30px no-repeat;
.option3 { background:url(iconos.png) 0 -60px no-repeat;</code>

Como verás, hemos jugado con el posicionamiento vertical de la imagen para mostrar sólo aquella parte de la misma que nos interesa, la que contiene el icono en cuestión:

Ejemplo uso sprites

Se pueden hacer sencillas pruebas de medición de tiempos de carga usando firebug en FireFox o cualquier otra herramienta desarrollo vinculada a un navegador web, pero salta a la vista el ahorro en tiempo de carga que se puede conseguir.  Sin embargo el ubicar las imágenes de esta forma puede ser un poco tedioso al principio.

Fuente: Tutorial básico sobre CSS Sprite