🗂️ Generador de Sprite Sheet
Empaqueta múltiples imágenes en un único PNG sprite sheet optimizado y obtén reglas CSS background-position listas para usar — gratis, en el navegador, sin subir archivos.
Acerca de
Esta herramienta usa la Canvas API del navegador para empaquetar tus imágenes en un PNG sprite sheet compacto, todo en tu dispositivo — no se sube nada a ningún servidor. Arrastra todas las imágenes que necesites, ajusta el ancho máximo de fila y el relleno por sprite, y el empaquetador las organiza fila a fila para minimizar el espacio desperdiciado. Una vez generado, puedes descargar el PNG combinado y copiar el fragmento CSS, que contiene una clase por sprite con los valores correctos de background-image, background-position, width y height, listos para pegar en tu hoja de estilos.
Cómo usar
- Arrastra tus imágenes al área de carga, o haz clic para buscar y seleccionar varios archivos a la vez.
- Establece el ancho máximo de fila (en píxeles) y el relleno alrededor de cada sprite para controlar qué tan compacto es el empaquetado.
- Haz clic en Generar Sprite Sheet para empaquetar todas las imágenes en un PNG combinado, con vista previa instantánea en el lienzo.
- Copia el CSS generado — cada sprite recibe su propia clase con los valores correctos de background-position, width y height.
- Descarga el PNG sprite sheet y pega el CSS en la hoja de estilos de tu proyecto — listo.
Preguntas frecuentes
- ¿Se suben mis imágenes a un servidor?
- No. Todo se ejecuta en tu navegador usando la Canvas API. Tus archivos nunca salen de tu dispositivo.
- ¿Cuántas imágenes puedo añadir a un sprite sheet?
- No hay un límite estricto — la herramienta empaqueta tantas imágenes como permita la memoria de tu navegador. Para un mejor rendimiento, mantén cada sprite en un tamaño razonable.
- ¿Qué hace el ajuste de ancho máximo de fila?
- Limita el ancho máximo que puede alcanzar cada fila de sprites antes de que el empaquetador inicie una nueva fila. Un valor mayor produce un sprite sheet más ancho; un valor menor produce uno más alto y estrecho.
- ¿Puedo usar el CSS generado directamente en mi proyecto?
- Sí. Cada clase de sprite incluye la URL de background-image (apuntando a tu PNG descargado), background-position, width y height — pégalo en cualquier hoja de estilos y aplica la clase a tus elementos HTML.
- ¿Qué formatos de imagen puedo usar como sprites de entrada?
- Cualquier formato que tu navegador pueda decodificar — PNG, JPEG, WebP, GIF, SVG, AVIF y más. El sprite sheet de salida siempre es un único PNG para máxima compatibilidad.