Crear y usar sprites. Generadores de sprites para tu web

Aprende qué son, para qué sirven y cómo usar sprites, además de diseñar animaciones con un sprite

Ernesto BarrachinaDiseño webDeja tu comentario

Crear y usar sprites. Generadores de sprites para tu web
5 (100%) 6 votos

Hoy te hablaré de 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.

A diferencia de cuando se cargan diferentes imágenes, los sprites permiten mostrar un número ilimitado de gráficos con una sola petición al servidor, en un tiempo record.

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.

En el ejemplo verás que los sprites son muchas imágenes organizadas en un solo archivo

Estos «duendecillos», significado para la palabra sprites en un inglés no escrito, 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.

Con el uso de sprites, reduciremos las peticiones al servidor, aceleraremos el tiempo de carga y por supuesto, mejoraremos la experiencia del usuario.
Los sprites son los grandes olvidados en la optimización web Cuéntalo en las redes

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.

SOlo debes utilizar los sprites cuando las imágenes no deban tengan que contener atributos para su posicionamiento

¿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.

Para modificar la posición del fondo y mostrar el fragmento de imagen deseado, recurriremos a la propiedad CSS background-position.

Si te fijas en cómo cambia la posición del background, comprenderás cómo funcionan los sprites

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.

Al revés de moverte tú para encuadrar la foto, es el sprite el que se mueve sobre el background para proporcionar diferentes imágenes

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.

Mi recomendación es que, aunque luego utilices generadores, primero aprendas a crearlos con Photoshop. Igual que aprendiste a sumar antes de usar la calculadora.

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 de apoyo en la home de mi web. 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.

Configura la cuadrícula de Photoshop para definir los espacios que ocuparán las ilustraciones del sprite

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.

Componer manualmente el sprite en Photoshop, colocando cada imagen en su lugar

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 cualquier 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.

Este sprite con iconos permite mostrar diferentes imágenes con una sola petición http al servidor

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

CSS sprites generator

Como verás en la captura, tienes una versión normal y un enlace a otra para 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

CSS sprites generator 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

Generador de sprites Spritecow sprites generator

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

GiftOfSpeed no es tan solo un generador de Sprites, sino una completa herramienta para chequear el WPO de nuestra página web

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.

Todas las herramientas de control de la velocidad de carga de un sitio web que tiene además del generador de sprites

www.giftofspeed.com/sprite-generator

Retina CSS Sprite Generator

Otro de los generadores de sprites que encontrarás en Google

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
Diseña tus tiras de imágenes con los mejores generadores de sprites Cuéntalo en las redes

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.

Tenemos tres elementos con los que trabajar: el sprite en sí, el CSS que le dará aspecto y el código HTML para insertar el sprite.

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.

Recibe nuevos artículos mensualmente

y aprende más sobre los temas que te interesan directamente desde la bandeja de entrada de tu correo electrónico.

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?

Esos son los saltos que tendremos que dar para mostrar cada icono, partiendo de que el punto 0,0 del eje de coordenadas de la pantalla está arriba a la izquierda.

Para mostrar las imágenes del sprite debes conocer cómo son las coordenadas cartesianas en el monitor

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

Uno de los uso de los sprites son los botones, que al situar el cursor o el dedo encim, cambian de estado, color o tienen una pequeña animación.

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.

Para conseguir el movimiento del background, tendremos que nombrar la animación, definir la cantidad de pasos, decidir el tiempo de duración y programar un bucle infinito.

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.

Mediante sprites es posible realizar animaciones sencillas con CSS

.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.

  • Las medidas serán más o menos la medida del fotograma o imagen independiente (155px, 194px). Dependerá también del espacio de seguridad que hayas dejado.
  • El siguiente paso es enlazar el archivo sprite como background (tu-imagen.png)
  • Hasta ahora todo igual que antes.
  • Es el momento de asignar un nombre a la animación. Yo la he llamado «andarzombi».
  • Ahora el tiempo de visibilidad de cada fotograma (0.7s).
  • El número de pasos. Que como el sprite está compuesto por 5 imágenes, tiene 5 pasos.
  • Y para finalizar, un bucle infinito (infinite).

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.
Complementa los GIF animados de tu web con otro tipo de animaciones Cuéntalo en las redes

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.

Con 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.

Si te ha gustado comparte

Más sobre el autor

Ernesto Barrachina

Aunque soy escultor y modelista de profesión, a los 40 decidí adaptar mis herramientas de trabajo. Un teclado y un ratón han sustituido a la arcilla, la silicona o al poliéster. Ahora me dedico al diseño web Valencia y el desarrollo de tu página web o de la imagen de tu marca pueden ser nuestro próximo proyecto.

¿Quieres un Diseño Web Valencia?

Anterior »

Deja un comentario

INFORMACIÓN BÁSICA SOBRE LA PROTECCIÓN DE TUS DATOS

Todos las datos marcados con asterisco (*) son obligatrorios. Si no los indicas no podrás comentar en el blog.

Responsable de la web: Ernesto Barrachina Rubio (EBWEB) +Info

Finalidad de los datos: Gestionar los comentarios que realizas en este blog. +Info

Legitimación: Consentimiento del interesado. +Info

Destinatarios: No se comunican los datos a nadie más. +Info

Plazo de conservación de los datos: Hasta que no se solicite su supresión por el interesado.

Los datos que me facilitas estarán ubicados en los servidores de Dinahosting (proveedor de hosting de EBWEB) fuera de la UE en Otros. Dinahosting está ubicado en la UE, con los niveles de protección adecuados según Comisión de la UE. Ver política de privacidad de Dinahosting.

Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en ebweb@ebweb.es así como el derecho a presentar una reclamación ante una autoridad de control.

Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://ebweb.es, así como consultar mi política de privacidad.