En los años 80, las computadoras personales presentaban serias limitaciones para reproducir gráficos animados en la pantalla. Los videojuegos obligaron a crear distintas técnicas para lograr ese efecto sin sacrificar los precarios recursos hardware de la época. La solución ideal habría sido cargar sucesivamente en memoria los distintos fotogramas de la animación, pero esto era costoso en términos de rendimiento. Una opción mejor era cargar una sola imagen, grande, que contuviera todos los fotogramas, y mostrar en pantalla solo el sector correspondiente al fotograma necesario en cada instante de la animación. De esta manera, se obtiene el mismo efecto pero con apenas un acceso a memoria. El principio es el mismo que el de un proyector cinematográfico por el que se desplaza una cinta de fotogramas continuos, de los que sólo se muestra uno a la vez para crear la ilusión de movimiento.
En el mundo de los gráficos digitales, esos pequeños sectores que conforman una imagen grande se llaman sprites (duendes). Si bien los sprites perdieron importancia en el mundo de los videojuegos debido a la evolución del hardware, hoy encuentran su lugar en el desarrollo web. CSS Sprites es una técnica que consiste en agrupar distintos elementos gráficos en un mismo archivo de imagen y, a través de CSS, mostrar solo el que nos interese.
El objetivo es acelerar la carga de la página: en general, una imagen grande tardará menos tiempo que muchas imágenes pequeñas, ya que se realizará una sola petición al servidor en lugar de varias. El principal motor de esta técnica es el conjunto de propiedades background de CSS, que permiten asignar una imagen de fondo y establecer la ubicación del recorte que deseamos.
Esta técnica suele utilizar para lograr menús de navegación interactivos, con botones que cambian de color cuando pasamos el mouse por encima. En realidad, lo que se utiliza como fondo del botón es una sola imagen con sectores de distintos colores (uno para el botón normal y otro para el botón con el mouse encima). El efecto consiste en cambiar el recorte que se muestra.
Sin embargo, las posibles aplicaciones son innumerables, y en todos los casos el resultado es el mismo: un considerable aumento en la velocidad de carga de nuestro sitio web.