Empaquetador de sprites
Sprite Sheet Packer
Junta muchas imágenes en un solo atlas y emite el mapa de fotogramas en CSS o JSON.
Un atlas y las coordenadas que lo hacen utilizable, porque una hoja de sprites sin mapa de fotogramas es solo una imagen con algunos iconos. El empaquetador informa de su ocupación, que es el número que te dice si el atlas merece la pena.
Suelta los iconos que quieras empaquetar
Un atlas y el mapa de fotogramas que lo hace utilizable.
Cómo se usa
Suelta los iconos
Los nombres de archivo se convierten en los nombres de los sprites, así que pasan a ser los nombres de clase CSS o las claves del JSON.
Deja un margen de al menos dos píxeles
Eso es lo que impide que un sprite vecino se cuele cuando la hoja se dibuja escalada o con filtrado bilineal: la línea en el borde de un icono que nadie sabe explicar.
Elige el formato del mapa
CSS es el único que no necesita JavaScript. JSON sigue la forma de hash de TexturePacker, que los motores de juego habituales ya analizan.
Fija la proporción de píxeles si el arte es @2x
Divide cada número del mapa, para que el CSS describa píxeles CSS y no píxeles de dispositivo.
Preguntas frecuentes
¿Qué significa la cifra de ocupación?
Cuánto del atlas es sprite y no espacio vacío. Por debajo de más o menos la mitad, el empaquetado está peleando con sprites de formas muy distintas y estás descargando mucha transparencia; dividirlos en dos hojas suele salir mejor.
¿Sigue teniendo sentido una hoja de sprites con HTTP/2?
Para la web, normalmente no: el costo por petición que justificaba los atlas ha desaparecido en su mayor parte, y un sprite SVG o archivos sueltos son más fáciles de mantener. Para un juego en canvas o WebGL sigue siendo la respuesta correcta, porque una vinculación de textura gana a cincuenta.
¿Por qué el atlas no es potencia de dos?
Porque cuesta espacio y la mayoría de las GPU actuales no lo necesitan. Activa la opción si estás usando mipmaps o apuntando a una ruta de texturas antigua, y acepta el área desperdiciada.
Puede recibir de
Dividir una imagen en partes
Image Splitter
Corta una imagen en una cuadrícula de N×M o en tiras de altura fija y entrega los trozos en un ZIP.
Editor de pixel art
Pixel Art Editor
Dibuja sobre una cuadrícula de píxeles con lápiz, relleno, goma, cuentagotas, paleta y simetría, importa una foto reducida a la cuadrícula y exporta PNG a escala entera o SVG.
Compresor de PNG
PNG Compressor
Reduce la paleta de colores y reescribe el flujo comprimido para bajar el peso de un PNG sin cambiar sus dimensiones.
Compresor de JPEG
JPEG Compressor
Vuelve a codificar un JPEG con la calidad que elijas y muestra el peso antes y después junto con la diferencia visible.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Formateador y minificador de CSS
CSS Beautifier & Minifier
Formatea o minifica CSS sin reordenar nada, conservando exactamente el flujo de tokens.
Redimensionar imágenes
Image Resizer
Cambia el tamaño por píxeles, por porcentaje o fijando el lado más largo, con proporción bloqueada y ajustes preestablecidos para lotes.
Compresor de PNG
PNG Compressor
Reduce la paleta de colores y reescribe el flujo comprimido para bajar el peso de un PNG sin cambiar sus dimensiones.
Quitar el fondo de una imagen
Background Remover
Recorta un fondo plano o de un solo color en el espacio OKLab y devuelve un PNG transparente, con pincel para corregir los bordes.
Borrar los datos EXIF de una foto
EXIF Remover
Elimina los metadatos de cámara, GPS y edición de las fotos sin tocar un solo píxel, y sin que la foto salga de tu navegador.
Generador de favicon
Favicon Generator
Produce el juego completo de iconos —ICO, PNG, icono de Apple y manifiesto web— junto con el HTML para pegar.