Crear y usar sprites. Generadores de sprites para tu web

Hoy te contaré qué son y cómo usar sprites CSS. Una palabra que en su singular, sprite, es válida tanto para nombrar un refresco, un sistema operativo o un personaje de Marvel.

También existe una cuarta opción, que son los sprites de imágenes. Y si no sabes a qué me refiero, puede que hagas un descubrimiento interesante durante la lectura.

Si lo que buscas es una respuesta rápida, a modo de resumen te diré que, un sprite es un archivo de imagen formado por un mosaico de imágenes, o lo que es lo mismo, varias imágenes unidas en un mismo y único archivo de mapa de bits.

Y tal vez te preguntes… ¿para qué sirve eso? 😳

Pues muy fácil. Los sprites se utilizan para reducir la cantidad de solicitudes http al servidor y por tanto, para mejorar el tiempo de carga de una web, optimizando el rendimiento de la misma.

Así que, en este artículo iremos un paso más allá de la mera optimización o compresión de imágenes para páginas web, como parte de una estrategia WPO o Web Performance Optimizations.

Y por cierto, aprenderás a crear animaciones con sprites 😀

¿Qué son los sprites de imágenes o sprites CSS?

La cosa no necesita demasiada explicación literaria. Un sprite es un archivo de imagen compuesto por múltiples imágenes agrupadas a modo de colección. Es como una especie de collage, generado en un formato de mapa de bits con el que estarás muy familiarizado: JPG, PNG o GIF.

Estos «duendecillos», significado para la palabra sprites en inglés, ya se utilizaban para reducir el consumo de recursos en los primeros programas, sistemas operativos y videojuegos. Y como verás a continuación, se siguen utilizando a fecha de hoy.

Como se trata de almacenar imágenes en un mismo archivo y podemos usarlos en una web, ya sabemos que no hay problema en incrustar botones, frases manuscritas, logotipos, o cualquier otro elemento que necesitemos durante el diseño de una página web.

Para qué sirven los sprites y por qué utilizarlos

Como sabemos, los elementos visuales son una parte fundamental en el diseño de cualquier web.

No solo las imágenes con las que apoyamos los textos de un post. Sino también los iconos, flechas, banderas y otros gráficos más pequeños, que proporcionan su apariencia a la página.

El problema lo encontramos al cargar las fotos de forma independiente. Cada imagen necesitará de una solicitud al servidor, un tiempo de espera y una respuesta por parte de este.

Aunque hablemos de apenas unos milisegundos, lo que con un par de fotos optimizadas puede ser un proceso relativamente rápido, al tratarse de varias imágenes, el tiempo aumenta considerablemente.

Esto se traduce en un mayor tiempo de carga de la página, y como consecuencia una peor experiencia de usuario, que puede encontrarse con el texto ya cargado, a la espera de que aparezcan las imágenes.

Para qué se usan los sprites y cuándo utilizarlos

En la práctica, además de para reducir tiempos de carga, los sprites son utilizados como parte del diseño web para mostrar pequeñas imágenes que proporcionen estilo a distintos elementos, tales como botones, titulares, call to action, menú de idiomas, etc.

Úsalos solo con imágenes que no participen en el posicionamiento, en las que no sea necesario añadir atributos, porque sean meramente decorativas.

¿Cómo funcionan los sprites?

Lo primero indicar que puedes utilizar sprites en cualquier tipo de página web, incluidos CMS como WordPress o Prestashop. No obstante, tendrás que recurrir a tus conocimientos de HTML y cómo no, tener nociones básicas de CSS.

La técnica o truco para su funcionamiento, consiste en ponerle fondo (background) a un contenedor vacío (img, div, span…). Que en función de su posición, la imagen del sprite mostrará una figura u otra.

Es un como cuando estás encuadrando una foto y miras por la pantalla del móvil. Si te mueves hacia los lados, el encuadre cambia ,y por tanto el fondo también. Pues con los sprites es lo mismo, pero el que se mueve es el propio fondo o background.

Cómo crear sprites

Antes de aprender a programar el comportamiento de los sprites, lo ideal es que sepamos crearlos. Y como siempre tenemos dos opciones.

La primera es hacer los sprites manualmente con algún programa de tratamiento de imágenes. La segunda pasa por recurrir a cualquiera de los generadores de sprites que hay en internet.

Crear un sprite paso a paso con Photoshop

La idea es crear una imagen teniendo en cuenta las coordenadas de la pantalla, que nos permita incluir las pequeñas imágenes en una posición controlada.

Voy a preparar un sprite para mostrar unos iconos decorativos en la home de mi web. Y mis mosaicos medirán 150px x 150px. Algo más que el tamaño con el que quiero que aparezcan las imágenes en la página (iconos de 144px x 144px).

Configurar cuadrículas en Photoshop

Lo primero es abrir Photoshop y crear un archivo con las proporciones necesarias y fondo transparente. Si no tienes claras las medidas, hazlo más grande porque siempre podrás recortarlo después.

Accedemos al menú superior: Menú > Edición > Preferencias > Guía, cuadros y sectores.

Y configuramos el tamaño de cuadrícula deseado. Ya sabes que en mi caso son 150px, porque las imágenes son un poco más pequeñas y tendré un espacio de seguridad entre ellas.

Como seguramente las tendrás desconectadas, si no ves las cuadrículas, accede a Vista > Mostrar > Cuadrícula, de nuevo desde menú de Photoshop.

Colocar la imágenes del sprite en el documento de Photoshop

De forma independiente, vamos colocando las imágenes en el centro de las cuadrículas hasta lograr la composición del sprite.

Guardar todas las imágenes en un solo archivo

Guardamos para web y dispositivos, en formato PNG para que conserve la transparencia.

También puedes crear el archivo con el fondo de color, pero la transparencia te da la libertad de colocar la imagen sobre cualquier color de fondo más tarde.

Ya sabes crear un sprite con Photoshop y tienes tu tira de imágenes preparada.

Generadores de sprites

Una vez sabemos en qué consiste la creación de sprites, podemos generarlos de forma automática mediante cualquier sprites creator.

Algunos de los generadores de sprites de la lista proporcionan la imagen creada a partir de gráficos independientes, el código CSS para las reglas y el HTML de inserción. Es decir, todo lo necesario.

Otros en cambio, solo te darán parte de esa información. Pero aún así serán igualmente útiles.

He hecho una selección de algunos que te ahorrarán tiempo en el diseño y la codificación.

CSS Sprites

Como verás en la captura, tienes una versión normal y un enlace a otra versión donde crear sprites responsives, en la que se cambia el tamaño en pixeles por porcentajes, si vas a necesitar que las imágenes adapten su tamaño a la pantalla.

Solo tienes que elegir y subir los archivos independientes, la clase CSS, con la que llamarás a los elementos y el tipo de archivo de salida.

En el caso de que lo creas conveniente, siempre lo recomiendo, selecciona un espacio de seguridad (padding) entre cada elemento para que no se dibujen demasiado juntos en el archivo final.

Una vez configurado a tu gusto, pulsa sobre el botón para crear el sprite y visualizar los códigos CSS y HTML de inserción.

Para guardar la imagen, haz clic con el botón derecho del ratón > Guardar imagen como, y en cuanto al código, está listo para copiar y pegar.

Este generador, solo permite la opción de sprite en vertical, con las imágenes alineadas de arriba a abajo en una sola columna, en su archivo descargable.

css.spritegen.com

CSS Sprites Generator de Toptal

Un generador de sprites muy visual, con una forma muy creativa de darnos los resultados. Nos ofrece el sprite de imagen para su descarga directa y el CSS para cada elemento de forma individual , pero no así el código HTML de inserción.

Aquí sí podemos seleccionar la secuencia del algoritmo que queramos, aunque tú te decantarás por la primera, que es la recomendada para tu web:

• Árbol binario.
• Diagonal.
• Diagonal (alternativo).
• De arriba a abajo.
• De derecha a izquierda.

www.toptal.com

Spritecow

En este, debes partir de tu archivo sprite previamente generado. Es decir, no es un generador de sprites, sino un generador de código CSS a partir de un sprite.

Aún con esas, es una herramienta muy cómoda porque detecta las imágenes y su posición. Así que solo debes seleccionarlas con el cursor, de una en una, para que te muestre la regla CSS que incluir en tu archivo style.css.

Cuenta con opciones para retina, en las que deberás usar imágenes de tamaño doble y porcentajes a un solo clic.

Igual que en el caso anterior, no nos facilita el código HTML.

www.spritecow.com

GiftOfSpeed

En esta ocasión nos encontramos con un generador de sprites que también permite el almacenamiento de la imagen en PNG, JPG o GIF.

Tras elegir los archivos, seleccionar la disposición del mosaico en vertical u horizontal y el padding de seguridad, nos mostrará el código CSS, el HTML y la imagen global. Que como en otras ocasiones, nos tocará recurrir al botón secundario para guardarla en el ordenador.

Lo que parece un simple generador de sprites, escroleando un poco hacia abajo, vemos que es un completo servicio de optimización web, con algunas herramientas de testeo WPO.

Además si visitas su home, verás que también ofrece herramientas, técnicas y consejos para mejorar los tiempos de carga de una página web.

www.giftofspeed.com/sprite-generator

Retina CSS Sprite Generator

Más de lo mismo con otro diseño, este generador también tiene la opción para pantallas retina y de elegir la secuencia del algoritmo:

• De derecha a izquierda.
• De arriba a abajo.
• Diagonal.
• Diagonal alternativo.

Seguro que entre todos los generadores de sprites de la lista, encuentras el que más te acomoda. Y si no ha habido suerte, en internet hay muchos más con los que puedas diseñar sprites.

www.retinaspritegenerator.com

Cómo usar sprites

Ya sabemos qué es un sprite, cómo se genera y para qué sirve. Ahora queda lo más importante: cómo se usan los sprites.

Si volvemos atrás en la lectura, recordarás que un sprite necesita de un contenedor transparente donde mostrarse. Este puede ser una imagen (transparente), un div, un span, o cualquier elemento al que puedas aplicarle un background y medidas de alto y ancho.

Personalmente no me gusta trabajar con la etiqueta <img>, porque su atributo src no puede estar vacío, y me obliga a tener que cargar una imagen transparente. Así que siempre recurro a otros contenedores para saltarme ese paso.

Los sprites y los ejes de coordenadas

Para el ejemplo usaré la imagen con los iconos de mi home. Si la quieres descargar para utilizarla en tus pruebas, ¡tienes total libertad! 😉

¿Recuerdas que cada imagen estaba contenida en unas cuadrículas de 150px x 150px?

Veremos la primera imagen con las coordenadas 0px 0px, e iremos desplazándonos con números negativos sobre el eje X, a la derecha, y el eje Y, hacia abajo.

Con lo que, si la primera imagen se muestra con las coordenadas 0px 0px, la siguiente a su derecha se mostrará con -150px -300px, y la siguiente hacia abajo con 0px -150px.

Y así sucesivamente 😀

Pero qué mejor manera de entenderlo que con un ejemplo práctico.

Programación básica de sprites con CSS y HTML

➡ El primer procedimiento es crear las reglas CSS.

La clase que elegido para nombrar a los contenedores div es .sprite-spt, y le asignaré un alto y ancho de 150px, un background, además de la propiedad display:inline-block, para que muestre los iconos unos al lado de otros mientras quepan en la pantalla.

A continuación, para localizar a cada uno de los elementos, les he asignado un id. Eso me permitirá modificar la posición de su background individualmente. A cada uno con la posición adecuada del fondo según el eje de coordenadas del sprite.

Te dejo el código que deberá ir en tu archivo style.css:

.sprite-spt{
width: 150px;
height: 150px;
background: url('sprite-icon-home.png');
display:inline-block;
}

#spt-seguro{
background-position: 0 0;
}
#spt-amplia{
background-position: -150px 0;
}
#spt-optimo{
background-position: -300px 0;
}
#spt-dise{
background-position: 0 -150px;
}
#spt-desar{
background-position: -150px -150px;
}
#spt-grafi{
background-position: -300px -150px;
}
#spt-correo{
background-position: 0 -300px;
}
#spt-telf{
background-position: -150px -300px;
}
#spt-voy{
background-position: -300px -300px;
}
#spt-one{
background-position: 0 -450px;
}
#spt-low{
background-position: -150px -450px;
}
#spt-pres{
background-position: -300px -450px;
}
#spt-corp{
background-position: 0 -600px;
}
#spt-tien{
background-position: -150px -600px;
}
#spt-blog{
background-position: -300px -600px;
}

➡ Ahora el HTML, que es lo más sencillo:

<div id="spt-seguro" class="sprite-spt"></div>
<div id="spt-amplia" class="sprite-spt"></div>
<div id="spt-optimo" class="sprite-spt"></div>
<div id="spt-dise" class="sprite-spt"></div>
<div id="spt-desar" class="sprite-spt"></div>

No añado más imágenes para no darte el coñazo todo el rato con los mismos iconos, pero creo que la esencia está clara. Hemos cargado una sola imagen y la estamos mostrando como si fueran varias, en un tiempo récord.

Sustituir una imagen de fondo al poner el cursor encima

Otro de los usos más comunes de los sprites es para los efectos hover. Que es cuando te pones sobre un elemento y este se modifica. Como el caso de los botones, con los que estamos acostumbrados a que cambien de estado al detectar que nos hemos puesto sobre ellos.

Este efecto se consigue a partir de un sprite con las dos versiones del botón, y unas pocas líneas de código que te dejo a continuación.

SPRITE DE FONDO

CSS

.bg-sprite{
width: 178px; height: 77px;
background: url('boton-sprite.png');
}

#botonsfx{
background-position: -10px -10px;
}

#botonsfx:hover{
background-position: -10px -107px;
}

HTML

<div id="botonsfx" class="bg-sprite"></div>

➡ La explicación del proceso es sencilla 😉

La posición de la imagen de fondo solo cambiará cuando coloquemos el cursor del ratón, o el dedo, encima de él. Que es para lo que sirve :hover.

Animar sprites

Pero los sprites nos permiten hacer aún más cosas, como animaciones. En las que iremos recorriendo el sprite, a modo de animación stop motion, consiguiendo un efecto similar al de un GIF animado.

También asignar un punto de entrada y salida mediante los keyframes.

Te facilito la imagen, el CSS y el HTML, y después te explico cuál es el desarrollo del código.

.zombi-sprite {
width: 155px;
height: 194px;
background: url('zombi-sprite.png');
-webkit-animation: andarzombi 0.7s steps(5) infinite;
-moz-animation: andarzombi 0.7s steps(5) infinite;
-ms-animation: andarzombi 0.7s steps(5) infinite;
-o-animation: andarzombi 0.7s steps(5) infinite;
animation: andarzombi 0.7s steps(5) infinite ;
}
@-webkit-keyframes andarzombi{
from{background-position:10px;}
to{background-position: -800px;}
}
@-moz-keyframes andarzombi{
from{background-position:10px;}
to{background-position:-800px;}
}
@-ms-keyframes andarzombi{
from{background-position:10px;}
to{background-position:-800px;}
}
@-o-keyframes andarzombi{
from{background-position:10px;}
to{background-position:-800px;}
}
@keyframes andarzombi{
from{background-position:10px;}
to{background-position:-800px;}
}

<div class="zombi-sprite"></div>

Como para mostrar cualquier sprite, debes tener un contenedor con unas medidas y fondo definidos. Así que lo primero es crear una clase para invocar al elemento con esas características.

Todo lo demás son las instrucciones para intentar que esta animación se vea en todos los navegadores.

Esas instrucciones son para el inicio y final de la reproducción. Yo he empezado por 10, para centrar el zombie en el div. Por supuesto, he terminado en 800, porque es la medida total del sprite.

Tienes algunas páginas donde descargar sprites gratis, muy chulos, para tus ensayos en gameart2d.com y en craftpix.net, que es de dónde he descargado el zombie.

Ventajas y desventajas de usar sprites

Para finalizar, comentarte que todo apunta a que con el uso de sprites son todo ventajas. Pero si nos paramos a pensar un poco en el SEO, y sobre todo en el posicionamiento mediante imágenes, igual vemos que no siempre será así.

Ventajas con el uso de sprites

• Menos solicitudes http al servidor.
• Menos tiempo de carga de página.

Desventajas de usar sprites

• Más tiempo de diseño y codificación, aunque con los generadores lo tenemos resuelto.
• Hay que modificar todo el sprite cada vez que quieres cambiar algo.
• No puedes poner atributos title y atl de imagen que afecten positivamente al SEO.

Por lo que está en tu mano decidir cuándo usar sprites y cuándo no. Mi recomendación es que solo uses sprites para las imágenes decorativas que formen parte del diseño web.