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 (No disponible – actualizado 08/06/17)
Además de generarte la imagen, puedes generar el código para desentramar el puzzle.
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?
Do take a look at https://cssspritegenerator.com. It does an extremely good job at producing high quality sprites