Bueno, pues voy a iniciar una serie de artículos sobre cómo conseguir los mismos efectos reduciendo el número de peticiones buscando siempre la simplicidad, entendiendo por simple en estos casos, priorizar el uso de CSS antes que usar javascript porque como regla general, los CSSs de procesan antes que los JSs.
Empecemos con la técnica más simple, los sprites. Para los despistados, un sprite es una imagen que se repite a lo largo de un programa y que se usa como representación gráfica. En corto, se usa a menudo y además es información gráfica.
Los sprites son el abc de la optimización de los contenidos de cualquier web. Es decir, vamos a buscar una manera de almacenar información gráfica en un repositorio de información (en nuestro caso, en una imagen mucho más grande) para cargarla una única vez y desde ahí usarla para poblar todos los contenidos gráficos.
Por qué se hace esto? pues sencillo... porque generalmente se gasta como mucho un 25% del tiempo cargando el HTML y un 75% o más cargando otros contenidos, y los más pesados, suelen ser las imágenes por lo que si reducimos tanto el tamaño de las imágenes como el número de éstas, estamos aumentando la velocidad y el tráfico de todo el sitio web. Como regla general, 1 petición de una imagen grande se hace más rápido y se transfieren menos datos que esa misma imagen repartida en 10 peticiones de sus distintas partes.
Empecemos. Tradicionalmente, todos hemos usado los CSS de esta manera:
#nav li a {background:none no-repeat left center}
#nav li a.item1 {background-image:url('../img/image1.gif')}
#nav li a:hover.item1 {background-image:url('../img/image1_over.gif')}
#nav li a.item2 {background-image:url('../img/image2.gif')}
#nav li a:hover.item2 {background-image:url('../img/image2_over.gif')}
Esto equivale en este caso a 4 peticiones HTTP, más la transferencia de 4 ficheros.
El quid de la cuestión para crear reglas CSS que usen sprites, es la propiedad background-position, de modo que mediante el posicionamiento, se desplaza el background hacia arriba o abajo en función de la imagen que se quiera mostrar con números negativos para los píxeles para ver la imagen que queda más abajo en el sprite:
#nav li a {background-image:url('../img/image_nav.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}
Los sprites tal cual, tienen un problema... los "cachos" en que se dividen, tienen que ser suficientemente amplios para que al desplazar el fondo, no se vean artefactos al mostrarse porciones de los otros iconos que contiene el sprite, además, generalmente debe tener cada fragmento el mismo alto que el resto de sus hermanos. Vamos a ver... en un fichero pueden mezclarse sprites de cualquier tamaño, pero es recomendable organizarlo de modo que los sprites parecidos como por ejemplo las imágenes de fondo de las pestañas estén juntas una detrás de otras para no volverse loco a la hora de poner las coordenadas en el CSS. Para el manteniendo la imagen de los sprites, los nuevos sprites se añadirían a la imagen por "abajo".
Ahora, la pregunta del millón... ya tengo una web y quiero pasarla a sprites... pues hay herramientas que ayudan a ésto. Una de las mejores es la web SpriteMe, que analiza un URL que se le pasa y genera un sprite con todas las imágenes que detecta en él. Lo mejor del sitio éste, es que tiene una opción de exportación del CSS para el sprite generado que dice en qué entradas del CSS original hay que reemplazar el url(xxx) por url(yyy) + background-position + coordenadas del sprite. Realmente útil.
No hay comentarios:
Publicar un comentario