Sprites

Esta será una entrada corta para explicar que son los sprites, las ventajas, como utilizarlos y como generarlos.

¿Qué es?

Normalmente, en los proyectos webs prima la velocidad de carga, cuanta más fluidez tenga una página, mejor experiencia para el usuario ofrece. Cuando cargamos las imágenes e iconos de nuestras aplicaciones, podemos añadir una a una nuestras imágenes o unirlas todas para hacer un sprite.

Un sprite no es más que tener todas, o un conjunto, las imágenes que usemos en una o en «n». Cuando cargamos las imágenes por separado, le cuesta más al navegador cargarlas que con un sprite, debido a que realiza más peticiones al servidor.
Por ejemplo en una aplicación tengo 5 iconos normales, el logo de la cabecera, el del footer y en algunas páginas tienen alguna grid, que en cada row hay 3 imágenes a modo de botón o de información; esto son muchas imágenes que carga por separado… de modo que si lo ponemos en 1 solo sprite, carga una sola imagen y cuando la quieres mostrar le pones la posición y el tamaño en esta. Es como si la fuese «moviendo» para que encaje en esa posición de pantalla.

Ejemplo

Hoy en día es muy fácil crear los sprites, antes teníamos que usar photoshop o parecidos montar la imagen y después ir «jugando» para saber las posiciones de estas. Ahora, en cambio, hay páginas online que nos montan el sprite y nos dan las clases con las posiciones de las imágenes, e incluso ejemplos de uso.

En este ejemplo vamos a utilizar la página de instantsprite.

Primero tenemos que arrastrar, o usar el explorador, para adjuntar nuestras imágenes, una vez hecho esto, en el apartado de Thumbnails tenemos el listado de imágenes que hemos adjuntado y nos permitirá tocar las opciones.

Como opciones no tenemos muchas… la separación entre las imágenes dentro del sprite, como se colocarán (horizontal, vertical o diagonal) y el tipo de fichero que generará (png o gif).

Podemos ver cómo quedará en el siguiente apartado, pero lo realmente útil es que a continuación nos ofrece las clases de css con la posición de cada imagen, esto lo ponemos en un fichero de estilos y ya tendríamos nuestro sprite listo.

Lo que he hecho de camino es poner todos los tamaños que necesito, de manera que para un icono tengo el icono16, icono20, e icono32 con distintos tamaños. Os recomiendo poner alguna clase con los padding básicos de los tamaños de las imágenes. Esto último es porque normalmente usaremos <span> o <div> para mostrar las imágenes y, en el caso del <span>, si no tenemos texto no hará caso al height y al width.