…A través de la optimización de la carga de imágenes con Sprites de CSS.

Por cierto, cada día nos visita más gente, y ya hemos llegado a un millar de páginas vistas con tan sólo un mes y medio On-Line! Y al ritmo que vamos ahora mismo, seguiremos haciendo un millar nuevo casi con cada semana… :) Gracias a todos los que vienen desde Google, los que empiezan a visitarnos regularmente ahora, etc. Sin vuestras visitas no habría sentido ninguno para el Blog! Gracias.

En las páginas web profesionales se suele dedicar mucho tiempo a optimizar la carga de las páginas. La gente quiere navegar por Internet teniendo una buena experiencia. Si al cargar la página web, un visitante tiene que esperar 2 o 3 segundos a que se acabe de cargar la página, el visitante no está teniendo una buena experiencia. De manera que es muy importante este aspecto, y hoy vamos a ver una de las mejores técnicas que podemos usar para hacer una página web más rápida, los Sprites de CSS.

Al grano, como muchos todavía no saben lo que es un Sprite:

Sprite: Consiste en un sólo archivo de mapa de bits, que contiene todo lo que sale por la pantalla. Para controlar la salida se proporcionan diferentes coordenadas X e Y en el mapa de bits. Se usaba mucho antiguamente para la programación de videojuegos 2D tipo MarioBros  ^^ Toda la pantalla solía ser una sóla imagen estática, pero se mostraba diferentes puntos de X o Y a cada momento creando ese efecto 2D típico ¡Qué recuerdos! Los sprites :)

Ejemplo

¡Sorpresa! No sólo vais a aprender a usar Sprites en CSS sino que además os voy a regalar una estupénda colección de iconos web para vuestros pies de página! Recién diseñados por Objetivo Creativo! En total son una colección de 13 bonitos iconos que reservaba para la futura web de Objetivo Creativo, y ahora los estoy aprovechando para hacer este tutorial, y que vosotros también podéis usar a partir de ahora :) Por supuesto, licencia Creative Commons By, podéis usarlos libremente siempre que quede claro que nosotros somos los autores.

Bien, lo primero que tenemos que hacer es coger los 13 iconos y juntarlos todos en una sola imagen, además quiero crear otro par de iconos para hacer rollovers, en total serán 26 iconos. Tengo 10 con unas medidas de 266x46px y otros 3 con unas medidas de 156×46… Los voy a disponer todos unos debajo de otros, y las versiones del rollover las voy a poner al lado de cada original. De manera que: 13 iconos por 46px de alto cada uno son 598px. Para el ancho debería ser 266, pero como he dicho que quería disponer lateralmente las versiones del rollover, será el doble, 532px.

Lo habéis adivinado, ahora tenemos que hacer un archivo nuevo de 532x598px! :-) Yo he ido importando en Fireworks cada icono a mi lienzo de 532x598px y ubicándolos con el panel de propiedades en x=0, y=0 | x=0, y=46 | x=0, y=92 (+46)| x=0, y=138 (+46) etc… Hasta colocar los 13 iconos…

Luego he seleccionado todo, y he hecho una copia de los 13 iconos originales, en la coordenada x=266 que es el ancho de cada icono. A esa copia, les he añadido algo de brillo, perfilado un poco mejor, y cambiado ligeramente los matices de color :) El resultado final, es la imagen de a continuación:

Iconos del Sprite

¿Qué tal? ¿Os gusta? Están todos en la misma imagen, es justo lo que queríamos… Si lo hemos hecho bien, el pixel más superior e izquierdo de, por ejemplo el tercer icono original, debería estar en la coordenada: x=0, y=92px y su versión un poco más iluminada y perfilada en la coordenada: x=256, y=92px Espero haberme explicado con claridad cómo llegar hasta aquí :)

Ahora un poco de código CSS:

#fi { width: 815px; margin: 0 auto; }
#fi_sprite_acn, #fi_sprite_acr, #fi_sprite_adm,
#fi_sprite_apd, #fi_sprite_aso, #fi_sprite_cll,
#fi_sprite_doc, #fi_sprite_lcc, #fi_sprite_omb,
#fi_sprite_ouf { width: 266px; height: 46px; background: url("../img/footersicons.png") top left no-repeat; display: table-cell }
#fi_sprite_xht, #fi_sprite_css,
#fi_sprite_wai { width: 156px; height: 46px; background: url("../img/footersicons.png") top left no-repeat; display: inline-table }
#fi_sprite_aso { background-position: 0 0; }
#fi_sprite_acn { background-position: 0 -46px; }
#fi_sprite_acr { background-position: 0 -92px; }
#fi_sprite_adm { background-position: 0 -138px; }
#fi_sprite_apd { background-position: 0 -184px; }
#fi_sprite_omb { background-position: 0 -230px; }
#fi_sprite_ouf { background-position: 0 -276px; }
#fi_sprite_doc { background-position: 0 -322px; }
#fi_sprite_lcc { background-position: 0 -368px; }
#fi_sprite_cll { background-position: 0 -414px; }
#fi_sprite_xht { background-position: 0 -460px; }
#fi_sprite_css { background-position: 0 -506px; }
#fi_sprite_wai { background-position: 0 -552px; }
#fi_sprite_aso:hover { background-position: -266px 0; }
#fi_sprite_acn:hover { background-position: -266px -46px; }
#fi_sprite_acr:hover { background-position: -266px -92px; }
#fi_sprite_adm:hover { background-position: -266px -138px; }
#fi_sprite_apd:hover { background-position: -266px -184px; }
#fi_sprite_omb:hover { background-position: -266px -230px; }
#fi_sprite_ouf:hover { background-position: -266px -276px; }
#fi_sprite_doc:hover { background-position: -266px -322px; }
#fi_sprite_lcc:hover { background-position: -266px -368px; }
#fi_sprite_cll:hover { background-position: -266px -414px; }
#fi_sprite_xht:hover { background-position: -266px -460px; }
#fi_sprite_css:hover { background-position: -266px -506px; }
#fi_sprite_wai:hover { background-position: -266px -552px; }

Lo primero es cargar la imagen anterior en un contenedor… Después definir los huecos visibles, y a continuación… ir dando las coordenadas X e Y, de la posición de cada icono con la propiedad background-position :) La razón por la cual hay que poner un menos delante, es que esa propiedad no se pensó en un principio para hacer Sprites, sino para ubicar una imagen dentro de un fondo de determinado, pero nosotros le hemos dado un nuevo uso a esa propiedad, y con el menos delante, ahora nos sirve para hacer Sprites ^^

Lo siguiente es poner el código XHTML

<div id="fi"><!-- FOOTERSICONS!! -->
<!-- First line of footersicons -->
<div id="fi_sprite_aso"></div>
<div id="fi_sprite_xht"></div>
<div id="fi_sprite_css"></div>
<div id="fi_sprite_wai"></div>
<!-- Second line of footersicons -->
<div id="fi_sprite_acn"></div>
<div id="fi_sprite_apd"></div>
<div id="fi_sprite_doc"></div>
<!-- Third line of footersicons -->
<div id="fi_sprite_acr"></div>
<div id="fi_sprite_omb"></div>
<div id="fi_sprite_lcc"></div>
<!-- Fourth line of footersicons -->
<div id="fi_sprite_adm"></div>
<div id="fi_sprite_ouf"></div>
<div id="fi_sprite_cll"></div>
</div><!-- /FOOTERSICONS!! -->

Creo que con esto no tengo que nada más que decir. No sé si será suficiente para dar por explicado el uso de Sprites en CSS. De todas formas, os recuerdo que todavía puedo responder cualquier posible duda en los comentarios!! :)

Por último voy a recordaros también que con el uso de Sprites se ahorra mucho tiempo de carga en las páginas, con el ejemplo anterior, nos hemos ahorrado la petición de carga de la nada despreciable, cifra de 25 imágenes. Eso son unos cuantos segundos ganados :) Por otro lado, también se matan dos pájaros de un tiro, y se elimina el famoso parpadeo de los rollovers hechos con la pseudo-clase :Hover…

Al pasar el ratón por encima de cada imagen, no se tiene que esperar a que cargue la nueva imagen de cada rollover, por que si una está cargada, ya lo estarán todas las demás también. Es decir, Adiós al molesto parpadeo de los :Hover

Personalmente el uso de Sprites es algo más elaborado de lo normal en una página web, la mayoría de las veces no merecerá la pena trabajar tanto, pero sí lo suelen hacer sobretodo grandes empresas como Yahoo, Youtube, etc. para las cuales esos 2 o 3 segundos optimizados en la carga de sus webs, es toda una ganancia transformada en dinero, dado el número de visitas que ellos manejan. Una página web de máxima calidad profesional usará Sprites siempre que pueda.

Como primera impresión podrá ser igual que otra página web cualquiera que no use Sprites, pero en realidad si usas Sprites su calidad será muy superior. En el diseño web, casi siempre son los detalles que no se pueden ver, los que marcan la diferencia entre una buena web profesional y otra cualquiera que puede hacer la mayoría!

Un saludo, y hasta la próxima! ;) Por cierto, dejad en los comentarios vuestras dudas, quejas, y/o agradecimientos. Será un placer aprender de vuestras opiniones ^^

“Creo que Heigth es ancho. Entonces Width es alto… Ok

Ah! Pues no funciona… ¿Será al revés? Width ancho, y Heigth el alto… :-)

Pues ni por una, ni por otra… Pfff!! ¿Lo abré escrito bien?“

A ver… ¡Profeee!!!

Hace algún tiempo que doy clases de HTML y CSS, y os aseguro que lo anterior es algo verídico que le ocurre a bastantes personas en sus inicios… Parece una tonteria, pero cualquiera que sea profesor me entenderá. Ya no sé qué hacer para meter algunas cosas tan simples, en las cabezas de la gente.

La eterna confusión del Width y Height