18 mayo, 2008

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>

2 comentarios:

Omar dijo...

Hola, sé que el artículo lo has escrito hace un tiempo, pero me interesó el tema y busqué alguna aplicación (ya que me hubiera gustado implementarlo) que realizase el trabajo. Escribí un pequeño post sobre ello en mi humilde blog por si te interesa: http://www.el33.es/2008/06/09/optimiza-la-carga-de-tu-sitio-web/

Saludos¡

PD: me resultan bastante interesantes tus post ;)

alsanan dijo...

Muchas gracias, Omar. Un enlace en tu blog hubiese sido de agradecer. Interesante también, por cierto.

Publicar un comentario en la entrada

Últimos links en indiza.com