Los sprites CSS son una manera de reducir el número de llamadas HTTP realizadas por los recursos de imagen referenciados de tu sitio web. Las imágenes se combinan en una única gran imagen con coordenadas X e Y definidas. Teniendo asignada la imagen generada a los elementos de página necesarios, la propiedad CSS background-position puede usarse para hacer visible el área requerida de la imagen sprite.

Esta técnica puede ser muy efectiva para mejorar el rendimiento, particularmente en situaciones dónde se utilizan muchas imágenes pequeñas (como iconos de menú). La página inicial de Yahoo!, por ejemplo, utiliza esta técnica exactamente para eso.

Gotchas

Hay un par de errores de navegador que hemos de tener en cuenta a la hora de crear un Sprite.

Opera

Opera (al menos hasta la versión 9) no reconocerá una posición de fondo mayor de 2042px o menor de -2042px utilizando este valor límite en su lugar. La herramienta tiene en cuenta esto creando nuevas columnas en la imagen cada vez que se alcanza el límite vertical.

Safari

Safari tiene un problema con la repetición de las imágenes de fondo. Afortunadamente esto puede ser resuelto fácilmente especificando un desplazamiento horizontal lo bastante grande (configurable).

Más información

A List Apart publicó un artículo titulado "CSS Sprites: Image Slicing's Kiss of Death" que explica los conceptos tras los sprites CSS. Si eres nuevo en esta técnica te recomendamos encarecidamente que vayas a A List Apart y eches un vistazo.