Generador de sprites CSS

Cómo crear un sprite sheet

1. Suelta tus imágenes en la zona de carga o haz clic en ella para elegirlas. Se aceptan PNG, SVG, WebP, JPG y los demás formatos que tu navegador sepa leer, hasta 500 imágenes. Cada archivo aparece en la lista Imágenes con su tamaño; el botón × quita una imagen y Quitar todas las imágenes vacía la lista.
2. Elige una Disposición: Cuadrícula, Compacta (hoja más pequeña), Tira horizontal o Tira vertical. Con Cuadrícula, Columnas (0 = automático) fija el número de columnas.
3. Ajusta la Separación (px) entre sprites (2 por defecto) y marca Tamaño en potencia de dos (256, 512, 1024…) si tu motor o tu GPU lo necesitan.
4. Elige el Archivo de datos: CSS (clases con background-position), JSON (mapa de fotogramas) o CSS y JSON. Cambia el Nombre de archivo y el Prefijo de las clases CSS (ambos «sprite» por defecto).
5. Revisa la vista previa, el Tamaño de la hoja y el Espacio aprovechado, y haz clic en Descargar ZIP (PNG + datos) o Descargar solo el PNG. También puedes copiar directamente el Código generado.

Las imágenes se decodifican en tu navegador y no se sube nada. Un SVG sin anchura ni altura propias se rasteriza con su lado más largo a 256 px.

Elegir la disposición

• Cuadrícula da a cada imagen una celda del tamaño de la imagen más grande. Con columnas automáticas, la cuadrícula queda más o menos cuadrada. Es simple y predecible, ideal cuando todos los sprites miden lo mismo, como en un tileset.
• Compacta (hoja más pequeña) usa empaquetado por estantes: las imágenes se ordenan de la más alta a la más baja y se colocan de izquierda a derecha en filas. La herramienta prueba muchas anchuras de hoja y se queda con la de menor superficie, teniendo en cuenta el redondeo a potencia de dos si esa opción está activa. Es la mejor para iconos de tamaños variados.
• Tira horizontal y Tira vertical colocan las imágenes en una sola fila o columna, en el orden en que las añadiste. Es lo que esperan muchos reproductores de animaciones para los fotogramas.

La hoja no puede superar 16 384 px por lado ni unos 16,7 megapíxeles, el límite que pueden dibujar los navegadores.

Usar el CSS

El CSS contiene una clase base con la hoja como background-image y no-repeat, y después una clase por sprite con el nombre de su archivo: home.png pasa a ser sprite-home. Los nombres se pasan a minúsculas, se quitan los acentos, los demás caracteres se convierten en guiones y los duplicados reciben -2, -3.

<link rel="stylesheet" href="sprite.css">
<span class="sprite sprite-home"></span>
<span class="sprite sprite-search"></span>

Cada clase de sprite define width, height y un background-position con desplazamientos negativos. Un sprite en x = 40, y = 20 recibe background-position: -40px -20px: la hoja entera se desplaza 40 px a la izquierda y 20 px hacia arriba dentro del elemento, así que solo ese sprite asoma por la caja del elemento. La separación evita que se cuelen los sprites vecinos al hacer zoom en la página o al filtrar una textura.

Pantallas de alta densidad: dibuja las imágenes al doble de su tamaño de visualización, genera la hoja, añade a la clase base un background-size igual a la mitad del tamaño de la hoja y divide entre dos anchuras, alturas y desplazamientos. La herramienta no lo genera; es un retoque manual.

¿Siguen siendo útiles los sprites con HTTP/2?

Los sprites nacieron para ahorrar peticiones HTTP. Con la multiplexación de HTTP/2, muchos archivos pequeños cargan casi tan rápido como uno solo, así que la ganancia para sitios web es mucho menor, y los iconos SVG o las fuentes de iconos suelen ser mejores para iconos escalables. Los sprite sheets siguen siendo el estándar para juegos 2D y fotogramas de animación: una sola textura supone menos cambios de textura en la GPU y un único archivo que cargar.