Gerador de Sprite Sheet

Combine várias imagens em uma única sprite sheet e gere código CSS.

Partilhar:

Arraste e Solte Imagens aqui

ou clique para carregar vários arquivos

Why Use This Tool?

Utilitários de Alta Eficiência para Otimização de Frontend

Reduce HTTP requests and speed up loading.

Geração Automática de Coordenadas

Nós fazemos a matemática para que você não precise. Obtenha instantaneamente coordenadas X e Y precisas para cada imagem individual em sua sprite sheet consolidada.

Algoritmo de Empacotamento Smart-Grid

Nosso mecanismo organiza inteligentemente imagens de tamanhos variados na grade mais eficiente possível, minimizando o espaço vazio e reduzindo o tamanho final do arquivo.

Classes CSS Prontas para Uso

Gera um bloco CSS limpo e copiável com classes individuais para cada ativo, incluindo propriedades background-position e de dimensão.

Modos de Layout Personalizáveis

Escolha entre faixas Verticais, faixas Horizontais ou o modo 'Grade' mais eficiente com base nas necessidades da arquitetura do seu projeto específico.

Controle de Preenchimento e Espaçamento

Adicione espaçamento personalizado entre sprites para evitar 'sangramento de pixel' — onde partes do ícone adjacente aparecem acidentalmente na sua interface do usuário.

Proteção de Processamento de Memória Local

Seus ativos de UI são sua propriedade. Todo o empacotamento e geração de código acontecem diretamente no seu navegador, garantindo que nenhum dado saia do seu dispositivo.

Um Guia para Ativos de Alta Velocidade: Como Usar o Gerador

Create sprites in minimal steps.

Colete Seus Pequenos Ativos

Reúna todos os pequenos ícones, botões ou quadros de uma animação que deseja combinar. Certifique-se de que estejam em um formato de alta qualidade, como PNG.

Carregamento em Lote para a Ferramenta

Selecione todos os arquivos de uma vez e carregue-os. A ferramenta criará imediatamente uma prévia visual de como eles podem ser empacotados juntos.

Configure a Otimização

Ajuste o 'Preenchimento' se estiver preocupado com bordas aparecendo em telas retina, ou escolha um layout 'Vertical' se estiver construindo um menu lateral ou tira de filme.

Revise a Prévia do Sprite

Verifique a folha gerada. Certifique-se de que cada item esteja visível e que a grade esteja apertada e eficiente, sem desperdício de espaço.

Baixe a Imagem Atlas

Clique no botão 'Baixar Sprite Sheet' para salvar o arquivo de imagem consolidado na pasta de ativos do seu projeto.

Mestria em Sprite Sheet: Segredos de Criação de Ativos de Jogo

As sprite sheets ainda são relevantes com HTTP/2?

Sim! Enquanto o HTTP/2 lida melhor com várias solicitações, as sprite sheets ainda são mais rápidas porque reduzem a quantidade total de metadados e a sobrecarga de compressão.

O que acontece se eu tiver imagens de tamanhos diferentes?

Nosso algoritmo de grade inteligente foi projetado para isso! Ele organizará suas imagens de todas as formas e tamanhos no retângulo mais compacto possível.

Devo usar JPG ou PNG para minha sprite sheet?

Recomendamos fortemente PNG. Ele lida melhor com as 'bordas nítidas' dos ícones e suporta transparência, o que é essencial para a maioria dos trabalhos de UI da web.

Existe um limite de quantas imagens posso incluir?

Tecnicamente, não. No entanto, recomendamos ficar em torno de 50-100 imagens por folha para evitar que as dimensões do arquivo se tornem esmagadoramente grandes.

O que é 'Sangramento de Pixel'?

Isso ocorre quando a renderização de sub-pixel mostra uma lasca da próxima imagem na folha. Adicione 1-2 pixels de 'Preenchimento' em nossa ferramenta para evitar isso.

Esta ferramenta suporta SVG?

Esta ferramenta é para sprites raster (PNG/JPG). Para SVGs, você deve usar uma abordagem 'SVG Sprite' que é tratada de forma diferente nos navegadores modernos.

Como atualizo uma sprite sheet mais tarde?

Basta recarregar os ícones originais mais o novo. Nossa ferramenta lhe dará uma nova folha e novo CSS em segundos.

Esta ferramenta é gratuita para desenvolvedores de jogos?

Sim! Seja você fazendo um site ou um jogo para celular, nosso gerador é 100% gratuito, sem restrições comerciais.

Os navegadores podem armazenar em cache sprite sheets?

Sim! Este é um dos maiores benefícios. O navegador só precisa armazenar em cache um arquivo para ter todos os ícones prontos para todas as páginas do seu site.

Meus dados de ícone proprietários estão seguros?

Absolutamente. Como seus arquivos são processados localmente no seu navegador, seus designs nunca são carregados, armazenados ou visualizados pelo nosso sistema.