MarcosBL

Aprendiz de todo, maestro de nada

Reduce la carga de tu web con Image aggregation / CSS Sprites

Básicamente, la idea es combinar todos los elementos gráficos de tu web (iconos, botones, etc, no fotos de un sólo post y cosas asi) en un sólo elemento gráfico, y posicionarlo por CSS para cada elemento. De esta forma, evitar hacer docenas de peticiones al servidor web, que son resueltas en una sóla, y no sólo aceleras la carga de tu web, sino que eres cortés con tu servidor web. Y por si fuera poco, al combinar varias imágenes en una ,ahorras los headers identificaticos de cada una, con lo que el peso, encima, es menor, y consumes menos ancho de banda.

csssprites

 

Update para vagos:

En http://spritegen.website-performance.org/ puedes subir un zip con todas tus imágenes y ellos se encargarán de unirlas en una sóla, optimizarla, y generarte el CSS necesario para cada una de ellas. Simple, rápido y eficiente. Y como es Open Source, aqui queda un mirror para los tiempos de carestía: http://www.propiedadprivada.com/lab/css-sprites/