Softonic

Gerador de sprite sheet

Etapa / 3
Restaurando o arquivo selecionado...

Solte um lote de imagens e o gerador as organiza em uma grade uniforme e desenha um único PNG de sprite sheet no navegador, depois gera CSS com um offset de background-position por sprite. Tudo roda localmente no canvas, então nada é enviado para um servidor. Útil para conjuntos de ícones, quadros de jogos retrô e estados de interface em que você prefere um único arquivo em vez de muitas imagens separadas. Você controla o número de colunas, o tamanho da célula, o espaçamento entre células e o fundo (transparente, branco ou preto).

Como o sprite sheet é construído

  1. 1

    Solte suas imagens

    Adicione arquivos PNG, JPG ou WebP. Reordene-os com os controles de subir/descer ou remova qualquer quadro; a folha é reconstruída na hora.

  2. 2

    Defina a grade

    Escolha o número de colunas; as linhas saem de quantas imagens você adicionou. Cada imagem é escalada para caber em uma célula quadrada, mantendo a proporção e centralizada.

  3. 3

    Ajuste tamanho da célula e espaçamento

    Escolha o tamanho da célula em pixels e adicione espaçamento entre células para evitar que sprites vizinhos vazem ao escalar.

  4. 4

    Baixe o PNG e copie o CSS

    Salve o sprite sheet como um único PNG e copie as classes CSS geradas, uma regra `.spr-nome` por imagem com largura, altura e background-position.

Como o layout funciona

O gerador usa um layout único e previsível: uma grade uniforme. Você define o número de colunas, e o de linhas é arredondar_para_cima(imagens / colunas). Cada célula tem o mesmo tamanho quadrado (o tamanho de célula escolhido), então cada imagem é escalada para caber em sua célula mantendo a proporção e é centralizada. Imagens de tamanhos diferentes acabam todas em células iguais, exatamente o que os sprites CSS com background-position esperam.

Controle Faixa Efeito
Colunas 1 a 16 Sprites por linha; as linhas são calculadas automaticamente
Tamanho da célula 32 a 512 px A célula quadrada em que cada imagem é encaixada
Espaçamento 0 a 64 px Folga transparente entre células para evitar vazamento ao escalar
Fundo Transparente / Branco / Preto Preenchimento atrás dos sprites no PNG de saída

Forma do CSS gerado

Cada imagem vira uma classe com o nome do arquivo (.spr-<nome>), dimensionada ao tamanho de célula e deslocada para sua célula. Com quatro colunas, tamanho de célula de 128 px e sem espaçamento, a folha fica assim:

.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; }

O offset se move em duas dimensões: os sprites preenchem cada linha da esquerda para a direita e depois pulam para a próxima linha. Salve o PNG como spritesheet.png ao lado do seu CSS (ou edite url(...) para bater com o seu caminho).

Espaçamento e vazamento

Sprites empacotados borda a borda podem vazar uns nos outros quando o navegador escala a folha (proporções de pixel não inteiras, transformações CSS). Adicione de 2 a 4 pixels de espaçamento entre células para impedir que pixels vizinhos vazem.

Telas de alta densidade (retina)

Não há exportação 2x automática, mas você pode obter uma folha mais nítida de forma simples: escolha um tamanho de célula maior (por exemplo 256 px em vez de 128 px) para que cada sprite carregue mais pixels, e então exiba-o na metade do tamanho CSS. Assim você tem sprites nítidos em telas de alta densidade sem uma passagem separada.

Sprite sheets ou alternativas

  • Sprite sheets: conjuntos de ícones clássicos em CSS, quadros de jogos HTML5 e páginas que ganham ao agrupar muitas imagens pequenas em um só arquivo.
  • Sprites SVG (symbol): melhores para ícones de interface modernos, escalam sem perda, aceitam fill do CSS, sem malabarismos com background-position.
  • Fontes de ícones: limitadas, mas ainda usadas para ícones minúsculos de uma só cor.
  • Arquivos separados com HTTP/2 ou HTTP/3: a multiplexação faz o número de requisições importar menos do que antes.

Perguntas frequentes

As imagens ficam no navegador. No fluxo em várias etapas, os arquivos selecionados e o layout são mantidos temporariamente nesta aba do navegador por até 30 minutos. Nada é enviado a um servidor nem incluído na URL.

Sim, mas SVGs inline ou sprites SVG com <symbol> costumam se encaixar melhor em frameworks de componentes. Os sprite sheets CSS brilham quando muitas imagens aparecem ao mesmo tempo em páginas estáticas.

Defina o número de colunas igual à sua quantidade de quadros para que cada um fique em uma linha, e então controle com animation-timing-function: steps(N) do CSS e um background-position que pula célula a célula. Funciona bem para animações curtas em loop (spinners, estados ociosos).

Cada célula da grade tem o mesmo tamanho quadrado (o tamanho de célula que você escolheu), então cada imagem é encaixada em sua célula e centralizada. Se seus sprites já são quadrados idênticos, defina o tamanho de célula correspondente e eles passarão sem alteração.

Ferramentas relacionadas

Seletor de Cores do Material Design

Navegue pela paleta de cores do Material Design. Copie qualquer tonalidade (50 a A700) como HEX, RGB ou HSL com um toque.

Gerador de papel pautado

Crie papel pautado para imprimir de graça. Escolha pauta média, larga ou estreita, defina o espaçamento das linhas em mm, o tamanho da página e uma linha de margem, e imprima ou baixe o SVG.

Gerador de papel quadriculado

Crie papel quadriculado para imprimir online: escolha grade ou pontos, ajuste o espaçamento em mm, selecione A4 ou Carta e uma cor de linha personalizada, e imprima ou baixe um SVG nítido.

Criador de gráficos de ponto cruz

Transforme JPEG, PNG ou WebP em gráfico de ponto cruz imprimível com 10–150 pontos, 2–40 cores próprias, símbolos, contagens exatas e medidas do tecido.

Divisor de Grade do Instagram

Divida uma imagem ampla em uma grade 3×3 do Instagram, ou qualquer número de linhas. As peças são numeradas para facilitar o upload em ordem inversa.

Conversor de Pantone para HEX

Converta cores Pantone PMS para os valores mais próximos de HEX, RGB e CMYK para correspondência em tela e impressão, com pré-visualização de amostras.

Ferramenta disponível em outros idiomas