Generador de Sprite Sheet
Empaqueta muchas imágenes en una sola sprite sheet y obtén junto a ella un mapa de coordenadas en JSON. Una petición HTTP en lugar de cincuenta sigue siendo una de las mejoras de rendimiento más eficaces en el frontend. Es gratis, no requiere cuenta y no añade ninguna marca de agua a tu resultado.
Generador de Sprite Sheet
Añade tus archivos. Los ajustes recomendados ya están listos para procesar con un clic.
PDF, Word, imágenes, audio, vídeo, archivos comprimidos y más
Hasta 100 archivos · 250 MB · Sin cuenta- 1Añadir archivos
- 2Elige una acción
- 3Descarga o sigue trabajando
Cuándo necesitas esto
Cómo funciona
Las imágenes se colocan en una sola hoja transparente en cuadrícula, con un relleno opcional entre ellas para que una hoja escalada, o el filtrado de texturas de un motor de juego, no mezcle el borde de un sprite con el siguiente. Junto al PNG llegan un mapa JSON con el archivo, la posición y el tamaño de cada sprite, y un archivo CSS con una clase por sprite que fija su tamaño y su posición de fondo, listo para una página web.
Preguntas frecuentes
¿Para qué sirve el mapa JSON?
Da la x, la y, el ancho y el alto de cada imagen empaquetada, que es lo que necesitas para background-position en CSS o para el cargador de atlas de un motor de juegos.
¿Se conserva la transparencia?
Sí. La hoja se exporta en PNG y la transparencia de las imágenes originales se mantiene.
¿Sigue teniendo sentido con HTTP/2?
Menos que antes, pero sigue reduciendo la sobrecarga de peticiones y es práctica habitual en los atlas de texturas de juegos.
¿Hay CSS que pueda usar directamente?
Sí. La descarga incluye sprite-sheet.css, con una clase .sprite para la hoja y una clase .sprite-nombre para cada imagen que fija su ancho, alto y posición de fondo.
¿Para qué sirve el relleno?
Cuando una hoja se escala, o un motor de juego filtra sus texturas, los píxeles de un sprite vecino pueden colarse en el borde del que se muestra. Unos pocos píxeles de relleno transparente entre sprites lo evitan.
Herramientas gratuitas relacionadas
Corta una imagen en filas y columnas de piezas iguales a resolución completa y descárgalas sueltas o en ZIP. Ideal para carruseles de Instagram. Gratis.
Genera todos los tamaños de favicon y el archivo ICO a partir de una sola imagen.
Crea una hoja de contactos con miniaturas y nombres de archivo, como una imagen JPG o como páginas A4 en PDF para imprimir. Gratis y sin cuenta.
Convierte imágenes PNG a WebP para webs más ligeras sin perder la transparencia. También por lotes. Gratis y sin cuenta.