Sprites: Qué son, cómo y por qué debería usarlos en mis proyectos

Las continuas implementaciones de lo que será en el 2014 HTML5, nos permiten ir un paso más allá con el lenguaje, que ya no está únicamente diseñado para entornos web, y que se adentra en la fase frontend (incluso backend acompañado de node.js) de cualquier tipo de proyecto de desarrollo, sea online u offline, sea una aplicación, o un programa gestor de escritorio.

css-html

Esto hace que tengamos que tener en cuenta que nuestros proyectos pueden ser abiertos desde cualquier dispositivo, y con cualquier conexión, por lo que optimizar en la medida de lo posible el código solo hará que la herramienta tenga un ratio de conversión mayor.

Sprites

Como bien sabéis, una de las razones de mayor retardo en la carga de una web (llámese página o herramienta o servicio o aplicación), es precisamente la comunicación HTTP, y las propias capacidades del navegador para llevarlo a cabo.

Cada objeto, en un proyecto online, ha de ser llamado individualmente, de tal forma que a igual contenido, una plantilla CSS tarda menos en cargar que 8 plantillas CSS. Esta situación, que en ficheros HTML/CSS e incluso JavaScript, se hace de forma casi trasparente al usuario, con imágenes los tiempos aumentan.

Y aquí es donde entran los Sprites, imágenes compuestas de varias imágenes, de tal forma que el navegador sólo ha de llamar una vez al servidor para pedir la imagen, y gestionará internamente qué parte de la misma mostrará en cada momento.

Ejemplo práctico

El mejor ejemplo que os puedo dar lo tenéis justo encima de éstas palabras, en el menú de navegación de mi página en la versión de escritorio (al menos a día 11 de febrero del 2013).

PabloYglesias-Menu

El menú está compuesto por 5 imágenes, que cambian de color al pasarle el ratón por encima, lo que hace un total de 10 imágenes.

Esas 10 imágenes, se pueden condensar en una sola, pero para simplificarlo un poco, partiremos de las dos imágenes de portal, la básica, y la del efecto hover.

PabloYglesias-Home

Se trata de dos imágenes, que van a ser usadas juntas, por lo que no parece descabellado pensar que si las unimos, nos ahorraremos una consulta al servidor extra, lo que en definitiva repercutirá a la velocidad de carga del proyecto.

PabloYglesias-1home

He dejado un pequeño espacio entre ellas para crear el efecto de que se está pinchando un botón (como si la imagen entrase hacia dentro), aunque por supuesto, esto es totalmente opcional.

Si mostramos directamente la imagen tan cual viene, está claro que no obtendríamos el efecto buscado, por lo que para ello, recurrimos a la plantilla de CSS, que será la encargada de gestionar la transición entre una imagen y otra.

PabloYglesias-CSSHome

tendremos dos llamadas:

  • buttonhome, un div con fondo la porción superior de la imagen.
  • buttonhome:hover, que mediante el atributo hover, obligamos a cambiar el cuadrado de 80×80 a la porción inferior, tan pronto el ratón pase por encima.

Ahora solo falta llamar al id buttonhome en el código HTML mediante un div, y obtendremos el mismo efecto con la mitad de gasto de tráfico.

Por supuesto, esto mismo lo podríamos hacer con todas las imágenes de un proyecto, de tal forma que tendríamos una compendio de todas las demás, y mediante tamaños absolutos cogeríamos porciones de la misma a mostrar, aumentando el rendimiento de la web.

Sprites embebidos

Es el segundo nivel de la optimización de imágenes en proyectos online, y tengo que reconocer que yo no suelo usarlo.

Consiste en que cuando queremos colocar una imagen en el proyecto, el navegador no tenga que hacer una llamada al servidor para recibir el archivo, sino que directamente esté incrustado en el código. Para ello, bastaría con obtener una codificación de la imagen (recordar que cualquier imagen no es más que una combinación de 1s y 0s) que el navegador pueda comprender, para lo que usaremos el formato Base64 (por ser el más aceptado por los navegadores).

Bastaría ir a una página de conversión como ImageToBase64Converter, obteniendo el código para pegar mediante CSS en un fondo, y que tiene una estructura semejante a la siguiente:

background-image: url(data:image/png;base64,<código infumable>);

Ese conjunto de letras y números es vuestra imagen en base64, que evitará otra llamada más al servidor.

Por tanto, ya tenéis dos maneras eficaces de reducir el tiempo de carga de un proyecto online, y de forma muy sencilla.

Espero que os haya gustado.