Ahorrando ancho de banda con sprites y CSS

Aunque hace mucho tiempo que no se utilizaba la técnica de unir varios gráficos en uno sólo para ahorrar espacio de memoria, hoy día con las conexiones tenemos un problema similar, por lo que la técnica vuelve a tener sentido. En el blog Climens Codelog y en este artículo de AListApart comentan cómo utilizar esta técnica que, entre otros sitios, se utiliza en la página de Google Code, donde se aprovecha la siguiente imagen para cargar de una vez los recursos gráficos fijos:



Para extraer cada una de las imágenes contenidas, se utilizaría CSS aplicado a una capa div, de forma que indiquemos el ancho y alto de la imagen y posicionemos esa imagen como imagen de fondo y con el desplazamiento adecuado para que se muestre el sprite. Por ejemplo, este símbolo de RSS (     ) y que está ubicado en las coordenadas x:28 y:374 dentro de la imagen, se ha obtenido aplicando el siguiente código:

<style>
#rss {
  width:15px; 
  height:15px; 
  background:url(http://code.google.com/images/sprites.gif) -28px -374px no-repeat;
}
</style>
<div id='rss'></div>