viernes, 7 de agosto de 2009

CSS Sprites Acelerando la web

La técnica de sprites es algo que se venía utilizando desde los primeros videojuegos en 2D para optimizar recursos en aquellos más que bien utilizados 8 bits. Es una técnica que se utiliza en distintas fuentes de información y su uso empieza a ser cada vez una mejor práctica para optimizar la web.

Sitios como Google o Yahoo entre otros utilizan esta técnica para acelerar sus sitios y es una buena práctica recomendada para interfaces web de dispositivos móviles, ya que sus recursos son más reducidos que los de los PCs.

Un buen conjunto de técnicas de desarrollo para móviles es fundamental a la hora de trabajar con estos dispositivos ya que, como se ha mencionado antes, carecen de recursos y los costes de uso de la red son más altos. Por ello desde Adama hemos configurado un nuevo curso de buenas prácticas en el desarrollo de interfaces web para dispositivos móviles, basadas en los estándares propuestos por el W3C.

¿En qué consiste esta técnica?


La técnica consiste en reutilizar imágenes y sustituirlas mediante CSS.

¿Qué beneficios se obtienen?


Minimizar la cantidad de peticiones HTTP para cargar todos los recursos de una página, reduciendo así los tiempos de carga y latencia. Además al utilizar esta técnica junto a otras de gestión y configuración de la caché, podemos almacenar las imágenes, por lo que serán descargadas solamente una vez, y reutilizadas en todas y cada una de las páginas de navegación de nuestro sitio.

El resultado es obvio, una mejor experiencia de navegación para el usuario, menos tiempo de espera, por lo tanto mayor rapidez de acceso y una mejora en la satisfacción del usuario, una de las piezas clave en la usabilidad.

¿Cómo se hace?


Bueno hay distintas técnicas, una común es disponer de una imagen maestra que muestre el estado "antes" y "después" de un comportamiento dado, por ejemplo antes y después de pasar el ratón por encima, o bien de hacer click, etc.

A modo de ejemplo voy a tomar un breve artículo sobre Fast Rollovers de Petr Stanicek’s (Pixy) que ilustra perfectamente esta técnica.

En un ejemplo clásico para hacer rollovers dispondríamos de 3 imágenes y un código similar a este:

#menu a {
...    
background: url("button.gif") 
top left no-repeat;    
} 
#menu a:hover {    
...    
background-image: url("button-over.gif");    
}
#menu a:active {    
...    
background-image: url("button-active.gif");    
}
/* etc... */ 

Esta técnica reemplaza las 3 imágenes por una sola, algo así:

imagen con tres estados

A continuación movemos la posición del fondo los píxeles necesarios para mostrar cada una de las imáges, uniéndo cada representación visual a un estado del enlace que puede ser a:active o a:hover.

#menu a {
    background: url("button.gif") 0 0 no-repeat;    
...    
} 
#menu a:hover {
    background-position: -157px 0;    
...    
} 
#menu a:active {
    background-position: -314px 0;    
...    
}
 

El resultado puede verse en la página del autor.

¿Cómo genero los sprites?


Bueno con cualquier software gráfico puede hacerlo, pero también tienes a tu disposición esta herramienta en línea con traducción al español que te permite subir varias imágenes y te la convierten a un sprite.

Articulos relacionados