Ordena las imágenes y revisa la vista previa. El CSS generado da a cada imagen su propio tamaño y su posición de fondo en la hoja, y el ZIP incluye el PNG y la hoja de estilos juntos.
Se ejecuta localmente en tu navegadorEl generador dibuja las imágenes seleccionadas en un PNG transparente y escribe el CSS que devuelve cada imagen a su sitio con background-position. El lienzo compone la hoja y JSZip prepara el archivo, todo dentro de la página: no se sube nada.
Cada celda mide lo que la imagen más grande de la selección, y cada imagen se centra en su celda. Las reglas conservan el tamaño propio de cada imagen: un icono de 16 × 16 y una franja de 64 × 4 comparten hoja sin redimensionarse.
El archivo abre con una clase base — .sprite-<prefijo> con display: inline-block, background-image: url("voritools-sprite.png") y background-repeat: no-repeat — y sigue con una regla por imagen: .<prefijo>-<nombre> con su ancho, su alto y la background-position negativa dentro de la hoja.
El prefijo y los nombres de archivo se normalizan igual: en minúsculas, las secuencias de otros caracteres pasan a un guion y se quitan los guiones de los extremos. my icon.png queda como my-icon, un nombre repetido recibe -2 y -3, y un prefijo que se queda vacío vuelve a icon para que la clase base y las reglas coincidan.
Cada ejecución admite como máximo 50 archivos y 250 MB de entrada, y el lienzo no puede pasar de 16384 píxeles por lado ni de 32.000.000 píxeles en total. Una hoja mayor se detiene con «El lienzo generado es demasiado grande para procesarlo de forma fiable.» y no exporta nada.
El archivo 51 no se descarta en silencio: la línea de estado indica cuántos quedaron fuera del límite y la lista conserva los 50 primeros. Columnas y Espacio se redondean a píxeles enteros antes de usarse — un 2,5 pasa a 3 columnas — y el campo muestra el valor aplicado.
Todo ocurre en el navegador. Añadir imágenes, generar, copiar el CSS, descargar el ZIP y vaciar la lista no enviaron ninguna petición de red en la prueba (en, fr y ja) una vez cargada la página, y las imágenes no salen del dispositivo.
La hoja se dibuja con el decodificador del navegador, así que los PNG, JPEG y SVG se cargan como en cualquier otra página; un archivo truncado o vacío se rechaza con «Este navegador no puede decodificar ese formato de archivo.» Un SVG sin width ni height se dibuja con el tamaño por defecto del navegador, 300 × 150.