Folha de Sprites de Imagem Combine várias imagens em uma única folha de sprites com colunas e espaçamento configuráveis.

What Is Folha de Sprites de Imagem?

Um gerador de folhas de sprites que combina várias imagens em uma única imagem composta organizada em uma grade, juntamente com as coordenadas de posição de fundo CSS para cada sprite. Essencial para otimização de desempenho da web, animações de sprites de jogos e conjuntos de ícones. Faça upload das suas imagens individuais, defina a contagem de colunas e o preenchimento, e a ferramenta gera tanto a imagem PNG composta quanto o snippet CSS.

Why Use Folha de Sprites de Imagem?

• Gera imagem da folha de sprites + coordenadas CSS
• Colunas e espaçamento configuráveis
• Reduz solicitações HTTP para melhor desempenho web
• Perfeito para conjuntos de ícones e sprites de jogos

Common Use Cases

Desempenho Web

Combine ícones em uma única folha de sprites para reduzir solicitações HTTP.

Desenvolvimento de Jogos

Crie folhas de sprites de animação a partir de imagens de frames individuais.

Conjuntos de Ícones

Embale múltiplos ícones em uma única imagem de sprite eficiente.

Sprites CSS

Gere folhas de sprites otimizadas com código CSS pronto para uso.

Technical Guide

As imagens são carregadas e organizadas em uma grade com colunas configuráveis. A contagem de linhas é calculada como ceil(contagemDeImagens/colunas). As dimensões da tela são computadas a partir do máximo de largura por coluna e altura total de linha mais preenchimento. Cada imagem é desenhada na sua posição de grade computada. As coordenadas CSS são geradas como valores de posição de fundo negativos para cada sprite.

Tips & Best Practices

• 1
  Use tamanhos de imagem consistentes para uma grade limpa
• 2
  Mantenha o espaçamento em 1-2px para minimizar o espaço desperdiçado
• 3
  Nomeie seus arquivos de forma descritiva para nomes de classes CSS melhores
• 4
  Use potências de 2 para compatibilidade com motores de jogo

Related Tools

Redimensionador de Imagens

Redimensione imagens por dimensões exatas em pixels ou porcentagem, mantendo a proporção.

🖼️ Image Tools

Gerador de Favicon

Gere favicons em vários tamanhos (16x16, 32x32, 48x48 e mais) a partir de qualquer imagem.

🖼️ Image Tools

Colagem de Imagens

Combine várias imagens em uma única colagem com layouts e espaçamentos personalizáveis.

🖼️ Image Tools

Criador de Grade de Imagens

Divida uma imagem única em uma grade de mosaicos do mesmo tamanho para grades e quebra-cabeças do Instagram.

🖼️ Image Tools

Frequently Asked Questions

Q Quais tamanhos de imagem funcionam melhor?

Tamanhos consistentes produzem os sprites mais limpos, mas tamanhos mistos são suportados.

Q Isso gera CSS?

Sim - CSS completo com valores de background-position para cada sprite.

Q Quantas imagens posso combinar?

Qualquer número de imagens pode ser combinado em uma única folha de sprites.

Q E sobre telas retina?

Use imagens com resolução 2x e reduza o tamanho do background CSS pela metade para suporte a tela retina.

Q Posso usá-lo para sprites de jogos?

Absolutamente - organize os frames de animação em sequência para folhas de sprites de jogos.

About This Tool

Folha de Sprites de Imagem is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.