Qué es un sprite, para qué sirve y cómo usarlo

Un sprite es un conjunto de imágenes combinadas en un solo archivo. Dicho así, no tiene mucho sentido pero si observamos esta imagen podemos imaginarnos de lo que estamos hablando.

Como describimos antes, se trata de un conjunto de imágenes ordenadas en una cuadrícula. No se trata de una técnica nueva, pero no por ello significa que haya perdido importancia su uso. Desde hace un tiempo es considerado por los buscadores una mala práctica el no usar CSS Sprites.

Esta técnica surge con el desarrollo de videojuegos. Consiste en utilizar una sola imagen compuesta por varias imágenes mas pequeñas y utilizando las propiedades background-position de CSS, así, se consigue visualizar cada imagen de forma individual.

Pero… ¿para qué nos sirve? Un spirte sirve para la optimización del uso imágenes empleadas en estilos css. Mediante la construcción de una cuadrícula de imágenes ordenadas y el uso de estilos css para ubicar en posición cada célula individual de la cuadrícula para mostrar solo una porción de la imagen total, podemos almacenar todos los elementos de imágenes de estilos que utilizaremos,  en un solo archivo de imagen.

El uso de sprites nos permite reducir el número de peticiones HTTP, pero también disminuirá el tamaño total del archivo de las imágenes. Lo cual optimizará tanto tiempos de descarga de una página como rendimiento de las mismas. Es decir, además de reducir el tiempo de descarga, mejoramos el rendimiento al momento de usarlas, porque solo se descarga la primera vez, entonces, en cada solicitud de una de las imágenes, la imagen global ya está descargada.

¿Como generar un sprite?

Puedes, simplemente, generarlos con tu programa habitual de edición de imágenes. Pero  también existen herramientas online que nos permiten generar sprites rápidamente. Aquí tienes un ejemplo: Spritepad.

La técnica es las misma para cualquiera de los dos casos de uso (online o en programa editor de imágenes): mantener el orden y basarnos en una cuadrícula.

Vamos a ver un ejemplo de sprite utilizando la herramienta Spritepad.

Paso 1: Inserta todas las imágenes a utilizar en un nuevo archivo o lienzo.

Paso 2: Re-ubica las imágenes de forma ordenada. Unos consejos para ello son:

• Ubícalas tratando de agrupar de mayor a menor tamaño.
• Utiliza tamaños exactos de las imágenes.
• Mantén espacios uniformes entre imágenes (esto sera de utilidad al momento de escribir los estilos CSS que lo acompaña, para reducir el uso de medidas desiguales y coordenadas complejas).

Paso 3: Recorta el lienzo o tamaño de archivo ajustándolo al área que se ha utilizado. Con la herramienta de ejemplo lo puedes hacer desde el icono de flecha que muestra en la esquina inferior derecha o desde el link superior «FIT DOCUMENT» que lo hace de manera automática.

Paso 4: Guarda la nueva imagen generada. Con la herramienta de ejemplo pulsa «DOWNLOAD» y te descara en tu ordenador un archivo .zip con la imagen .png de sprite y estilos .css que te servirán luego para aplicarlos.

¿Cómo utilizar un srpite?

Bien ya tenemos una parte importante del proceso que es la creación del sprite. ¡Ahora a utilizarlo!

Para ello iremos a nuestros estilos css. Y debemos dar los estilos pertinentes para que cada elemento (etiqueta) muestre de manera parcial, el área que corresponde para su background. Veamos un ejemplo de estilos a aplicar:

Utilizaremos este sprite:

Supongamos que tenemos un listado de iconos de redes sociales y queremos mostrar: Facebook, Twitter y Linkedin. Cada uno debe mostrar su imagen correspondiente. Para ello teniendo el html de esta manera:


<ul>
<li class="li-fb">Facebook</li>
<li class="li-tw">Twitter</li>
<li class="li-in">Linkedin</li>
</ul>


Le aplicaremos los siguientes estilos comunes:

.li-fb, .li-twt, .li-in {
height: 55px;
width: 55px;
background: url(iconos-sociales.png) no-repeat;
text-indent: -999px;
overflow: hidden;
}

En nuestro ejemplo, cada icono está ubicado en un espacio de 55px de alto por 55px de ancho. Esto debe ser igual al tamaño de nuestras etiquetas, en caso contrario se mostrará más parte de nuestra imagen.

De esta forma, todos nuestros li serán iguales. para que cada uno de ellos muestre una porción especifica y diferente de la imagen. Aplicaremos los siguientes estilos de manera particular a cada li:

[code lang=»css»].li-fb {
background-position: 0 165px;
}

.li-tw {
background-position: 165px 110px;
}

.li-in {
background-position: 55px 220px;
}

Pero… ¿de dónde salen estos valores? Es sencillo. Siempre hablamos de una cuadrícula, por lo que nuestras imágenes individuales tienen posiciones dentro de la nueva imagen generada. Entonces, para ello, teniendo en cuenta que la esquina superior de la imagen es la coordenada 0 0, solo debemos calcular a qué distancia de esa esquina se encuentra nuestra imagen a utilizar. Y así, le daremos la posición exacta con estilos css para que nuestra etiqueta, en nuestro ejemplo <li>, muestre solo esa porción de la imagen total.

Con la herramienta que usamos de ejemplo para generar el sprite, mencionamos que también no facilita un .css. Así que, no tendremos que calcular las posiciones, en el archivo css ya estarán creados los estilos css necesarios.

El uso de esta técnica te será familiar si estás habituado al uso de rollover sobre etiquetas. Además, podemos combinar el uso de ambas para optimizar la disponibilidad de nuestras imágenes en la web.

Esperamos que te sea de utilidad esta técnica, la pruebes y nos cuentes como ha resultado. ¡Gracias!