Empacotador de sprite sheet
Sprite Sheet Packer
Junta muitas imagens num único atlas e gera junto o mapa de quadros em CSS ou JSON.
Um atlas e as coordenadas que o tornam utilizável, porque uma sprite sheet sem mapa de quadros é só uma imagem de alguns ícones. O empacotador informa a ocupação, que é o número que diz se o atlas vale a pena.
Solte os ícones que quer empacotar
Um atlas mais o mapa de quadros que o torna utilizável.
Como usar
Solte os ícones
Os nomes dos arquivos viram os nomes dos sprites, então viram os nomes de classe CSS ou as chaves do JSON.
Deixe uma margem de pelo menos dois pixels
É o que impede um sprite vizinho de vazar quando a sheet é desenhada em escala ou com filtragem bilinear: a linha na borda de um ícone que ninguém consegue explicar.
Escolha o formato do mapa
CSS é o único que não precisa de JavaScript. JSON segue a forma de hash do TexturePacker, que os motores de jogo comuns já analisam.
Defina a proporção de pixels se a arte é @2x
Ela divide cada número do mapa, para que o CSS descreva pixels CSS e não pixels de dispositivo.
Perguntas frequentes
O que o número de ocupação significa?
Quanto do atlas é sprite e não espaço vazio. Abaixo de mais ou menos a metade, o empacotamento está brigando com sprites de formas muito diferentes e você está baixando muita transparência; dividi-los em duas sheets costuma sair melhor.
Ainda devo usar uma sprite sheet com HTTP/2?
Para a web, normalmente não: o custo por requisição que justificava os atlas em grande parte se foi, e um sprite SVG ou arquivos individuais são mais fáceis de manter. Para um jogo em canvas ou WebGL ainda é a resposta certa, porque um bind de textura ganha de cinquenta.
Por que o atlas não é potência de dois?
Porque custa espaço e a maioria das GPUs atuais não precisa disso. Ligue a opção se você está usando mipmaps ou mirando um caminho de textura antigo, e aceite a área desperdiçada.
Pode receber de
Dividir imagem
Image Splitter
Corta uma imagem numa grade N×M ou em fatias de altura fixa e empacota as partes num zip.
Editor de pixel art
Pixel Art Editor
Desenha numa grade de pixels com lápis, balde, borracha, conta-gotas, paleta e simetria espelhada, importa uma foto quantizada na grade e exporta PNG em escala inteira ou SVG.
Compressor de PNG
PNG Compressor
Quantiza a paleta e reescreve o fluxo deflate para reduzir um PNG sem alterar as dimensões — sem enviar arquivos, tudo no seu navegador.
Compressor de JPEG
JPEG Compressor
Recodifica um JPEG na qualidade que você escolher, com o tamanho antes e depois ao vivo e uma visão das diferenças.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Formatador e minificador de CSS
CSS Beautifier & Minifier
Formata ou minifica CSS sem reordenar nada, preservando exatamente o fluxo de tokens.
Redimensionar imagem
Image Resizer
Redimensiona por pixels, porcentagem ou pelo lado maior desejado, com proporção travada e predefinições para lotes.
Compressor de PNG
PNG Compressor
Quantiza a paleta e reescreve o fluxo deflate para reduzir um PNG sem alterar as dimensões — sem enviar arquivos, tudo no seu navegador.
Remover fundo de imagem
Background Remover
Recorta um fundo liso ou de cor única em OKLab e devolve um PNG transparente, com um pincel para corrigir as bordas.
Remover EXIF
EXIF Remover
Remove metadados de câmera, GPS e edição das fotos sem tocar nos pixels.
Gerador de favicon
Favicon Generator
Produz o conjunto completo de favicons — ICO, PNGs, ícone Apple touch, manifesto web — mais o HTML para colar.