Los sprites CSS son una técnica que mejoran la velocidad de descarga de una web, básicamente se trata de utilizar una sola imagen de fondo y mediante CSS recortar los pedacitos que van a cada sitio y así reducir el número de llamadas HTTP.

Para que te hagas una idea la página de resultados de Google se construye con esta imagen:

Y aunque Google no sea un ejemplo de buenas prácticas en su diseño web, tablas y etiquetas perfectamente reemplazables por CSS…

…sí es cierto que Google es un gran ejemplo cuando hablamos de velocidad.

5 formas para generar Sprites CSS

Hay varias herramientas para ayudarte a usar esta técnica, varios generadores de Sprites CSS, algunos muy básicos como CSS Sprites Generator (1) y otros más configurables:

2.- CSS Sprites

Además de generarte la imagen, puedes generar el código para desentramar el puzzle.

3.- CSS Sprite Generator

Genera ambos, imagen y CSS

4.- SmartSprites

Un proyecto en Java para Windows y Linux.

Y lo mejor para el final:

5.- SpriteMe

Es sencillamente un bookmarklet que utiliza coolRunnings, un proyecto de código abierto.

Lo ejecutas en tu navegador y detecta las imágenes que pueden convertirse en Sprite en tu web y lo mejor, te la genera y exportas el CSS:

Ha sido creado por Steve Souders, conocido por YSlow y visto en CSS-Tricks

Cuestionario

Yo debo reconocer que es una tarea pendiente, sobre todo en pqpq.es, en los botones siempre los uso por el tema de la carga en los distintos estados pero aún no he tenido hueco de hacerlo en todo el sitio.

¿Utilizas tú esta técnica?

En caso afirmativo ¿Los creas de forma manual o con algún generador?