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/

Deja tu opinión

Sólo se permiten las etiquetas XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Post anteriores/siguientes:

Post (quizás) relacionados: