Softonic

Generador de sprite sheets

Paso / 3
Restaurando el archivo seleccionado...

Suelta un lote de imágenes y el generador las coloca en una cuadrícula uniforme y dibuja un único PNG de sprite sheet en tu navegador, y luego genera CSS con un offset de background-position por sprite. Todo se ejecuta localmente en el canvas, así que no se sube nada a ningún servidor. Útil para conjuntos de iconos, fotogramas de juegos retro y estados de interfaz donde prefieres un solo archivo en lugar de muchas imágenes sueltas. Tú controlas el número de columnas, el tamaño de celda, el espaciado entre celdas y el fondo (transparente, blanco o negro).

Cómo se construye el sprite sheet

  1. 1

    Suelta tus imágenes

    Añade archivos PNG, JPG o WebP. Reordénalos con los controles de subir/bajar o elimina cualquier fotograma; la hoja se reconstruye al instante.

  2. 2

    Define la cuadrícula

    Elige el número de columnas; las filas salen de cuántas imágenes añadiste. Cada imagen se escala para encajar en una celda cuadrada, manteniendo su relación de aspecto y centrada.

  3. 3

    Ajusta tamaño de celda y espaciado

    Elige el tamaño de celda en píxeles y añade espaciado entre celdas para evitar que los sprites vecinos se mezclen al escalar.

  4. 4

    Descarga el PNG y copia el CSS

    Guarda el sprite sheet como un único PNG y copia las clases CSS generadas, una regla `.spr-nombre` por imagen con su ancho, alto y background-position.

Cómo funciona la disposición

El generador usa una disposición única y predecible: una cuadrícula uniforme. Fijas el número de columnas y el de filas es redondear_arriba(imágenes / columnas). Cada celda tiene el mismo tamaño cuadrado (el tamaño de celda que elijas), por lo que cada imagen se escala para encajar en su celda manteniendo la relación de aspecto y se centra. Las imágenes de distinto tamaño acaban todas en celdas iguales, justo lo que esperan los sprites CSS con background-position.

Control Rango Efecto
Columnas 1 a 16 Sprites por fila; las filas se calculan automáticamente
Tamaño de celda 32 a 512 px La celda cuadrada donde se encaja cada imagen
Espaciado 0 a 64 px Hueco transparente entre celdas para evitar el sangrado al escalar
Fondo Transparente / Blanco / Negro Relleno detrás de los sprites en el PNG de salida

Forma del CSS de salida

Cada imagen se convierte en una clase con el nombre de su archivo (.spr-<nombre>), dimensionada al tamaño de celda y desplazada a su celda. Con cuatro columnas, un tamaño de celda de 128 px y sin espaciado, la hoja queda así:

.spr-idle  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -0px; }
.spr-walk  { width: 128px; height: 128px; background: url(spritesheet.png) -128px -0px; }
.spr-run   { width: 128px; height: 128px; background: url(spritesheet.png) -256px -0px; }
.spr-jump  { width: 128px; height: 128px; background: url(spritesheet.png) -384px -0px; }
.spr-fall  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -128px; }

El offset se mueve en dos dimensiones: los sprites llenan cada fila de izquierda a derecha y luego saltan a la siguiente fila. Guarda el PNG como spritesheet.png junto a tu CSS (o edita url(...) para que coincida con tu ruta).

Espaciado y sangrado

Los sprites empaquetados borde con borde pueden mezclarse cuando el navegador escala la hoja (relaciones de píxeles no enteras, transformaciones CSS). Añade de 2 a 4 píxeles de espaciado entre celdas para que los píxeles vecinos no se cuelen.

Pantallas de alta densidad (retina)

No hay exportación automática a 2x, pero puedes lograr una hoja más nítida de forma sencilla: elige un tamaño de celda mayor (por ejemplo 256 px en lugar de 128 px) para que cada sprite lleve más píxeles, y luego muéstralo a la mitad del tamaño CSS. Así obtienes sprites nítidos en pantallas de alta densidad sin una pasada aparte.

Sprite sheets frente a alternativas

  • Sprite sheets: conjuntos de iconos clásicos en CSS, fotogramas de juegos HTML5 y páginas que se benefician de agrupar muchas imágenes pequeñas en un solo archivo.
  • Sprites SVG (symbol): mejores para iconos de interfaz modernos, escalan sin pérdida, aceptan fill de CSS, sin malabares con background-position.
  • Fuentes de iconos: limitadas, pero aún se usan para iconos diminutos de un solo color.
  • Archivos sueltos con HTTP/2 o HTTP/3: la multiplexación hace que el número de peticiones importe menos que antes.

Preguntas frecuentes

Las imágenes permanecen en tu navegador. En el flujo de varios pasos, los archivos elegidos y el diseño se conservan temporalmente en esta pestaña del navegador durante un máximo de 30 minutos. Nada se envía a un servidor ni se incluye en la URL.

Sí, aunque los SVG en línea o los sprites SVG con <symbol> suelen encajar mejor en frameworks de componentes. Los sprite sheets CSS brillan cuando se muestran muchas imágenes a la vez en páginas estáticas.

Pon el número de columnas igual a tu número de fotogramas para que cada uno quede en una fila, y luego contrólalo con animation-timing-function: steps(N) de CSS y un background-position que salte celda a celda. Funciona bien para animaciones cortas en bucle (spinners, estados en reposo).

Cada celda de la cuadrícula tiene el mismo tamaño cuadrado (el tamaño de celda que elegiste), así que cada imagen se escala para encajar en su celda y se centra. Si tus sprites ya son cuadrados idénticos, pon el tamaño de celda igual y pasarán sin cambios.

Herramientas relacionadas

Creador de listas por niveles

Crea una lista privada con texto e imágenes locales, personaliza niveles, clasifica con arrastre o teclado y exporta JSON, PNG o SVG.

Comprimir GIF

Reduce el tamaño de un GIF animado en el navegador: baja dimensiones, conserva menos fotogramas y ajusta la calidad de codificación. Previsualiza el bucle antes de descargar.

WebP a JPG

Convierte imágenes WebP a JPG/JPEG directamente en el navegador. Elige la calidad, aplana la transparencia sobre un color de fondo y descarga sin subir archivos.

Creador de GIF

Convierte una secuencia de imágenes en un GIF animado. Ajusta fotogramas por segundo, calidad y tamaño antes de exportar.

Generador de códigos QR

Genera un código QR localmente en el navegador a partir de una URL, texto plano o una carga QR correctamente formateada, y descárgalo como PNG.

Generador de códigos de barras

Crea en el navegador códigos de barras 1D en Code 128, EAN, UPC, ITF-14 y otros formatos compatibles. Descarga el resultado como SVG o PNG.