Climens Codelog

Los sprites son en realidad simples imágenes que contienen varias imágenes y se muestran solamente una a una usando técnicas para recortarlos. Estos se han venido usando desde los primeros videojuegos para realizar animaciones, por ejemplo o para guardar iconos y dibujos. Eran tiempos en que la memoria era un lujo y las velocidades bajas por lo que poder guardar los sprites en el buffer de la memoria de video y así usarlos rápidamente era una ventaja.

Ahora, esto ya no suele ser un problema: tarjetas gráficas con cientos de megabytes de memoria, motores de cálculo 3D, montones de texturas. No es un problema por lo menos para los juegos pero en Internet el ancho de banda sigue siendo un lujo. No siempre para el usuario sino también para el proveedor de contenidos. Con los sprites se pueden conseguir varias cosas:

• Reducción del peso total de una página web, con el consecuente ahorro de tiempo de descarga y de coste del alojamiento (Ahorrando 10kb por visita, si hay 1.000.000 de visitas mensuales son unos 10Gb, que no es algo despreciable)
• Reducción del número de peticiones HTTP, con, de nuevo, ahorro del tiempo de descarga, reducción de la carga del servidor. Con un servidor menos potente se pueden servir más páginas.

Evidentemente si no tenemos cientos de miles de visitas, todo este ahorro en realidad no es para tanto, pero cada vez son más los internautas y es algo (y será) a tener muy en cuenta.

La técnica básica es jugar con las propiedades CSS  de width y height para recortar lo que muestra la imagen que se indica en el background y además usar las propiedades de background-position para desplazar el sprite y mostrar la zona que se desea ver. En A List Apart, como siempre tienen un artículo interesante sobre el tema.

Un caso real, explicado por los autores se puede encontrar en el rediseño de Google Code, donde se usaron sprites para las imágenes de la primera página, de modo que se descargasen todas a la vez y así ahorrar llamadas. Desde luego estos de Google son los genios del ahorro.

También existe un interesante libro sobre el tema, aunque mucho más extenso: High Performance Web Sites de Steve Sounders, empleado ex-empleado de Yahoo! (ahora en Google y artífice de las mejoras comentadas) que se dedica exclusivamente a este asunto. Además hay tiene una pequeña pero jugosa web sobre el tema.

Finalmente, si queréis probar las mieles de los sprites con vuestras propias imágenes existe el Generador de Sprites CSS online, aunque siempre será mejor usar algun editor de imágenes para estos menesteres.