Gerador de Sprite CSS

Clique para enviar uma imagem

Formatos suportados: PNG, JPG, WebP

Layout

Espaçamento da imagem: 10px

050

Envie uma imagem para pré-visualizar o sprite sheet

Una vários ícones pequenos em uma folha de sprite CSS diretamente online. O processamento ocorre no navegador local sem upload, e o código CSS de background-position é gerado automaticamente nos layouts horizontal, vertical e em grade.

Sugestões Relacionadas

Gerador ICO

Comprimir imagens

Converter Imagem

Redimensionar Imagem

Cortar Imagem

Girar e Espelhar Imagem

O que é um sprite CSS?

Um sprite CSS combina várias imagens pequenas em uma imagem maior e usa background-position para exibir cada ícone individualmente. O termo sprite vem dos primeiros consoles de jogos, que agrupavam vários frames de animação em uma única imagem e os mostravam em sequência. A web adotou a ideia para carregar muitos ícones pequenos com uma única requisição.

**Por que precisamos de sprites?** Na era do HTTP/1.1, cada arquivo de imagem disparava uma requisição separada, com handshake TCP, handshake TLS e overhead de cabeçalhos. Cem ícones significavam cem requisições. Um sprite coloca todos os ícones em uma única imagem, completando o carregamento com uma requisição e acelerando o primeiro paint. O multiplexing do HTTP/2 reduz parte dessa vantagem, mas os sprites continuam ajudando no cache em CDN, na compressão gzip e no fallback para HTTP/1.1.

**Como funciona:** imagine um sprite 200x60 com três ícones 60x60 em linha. Para mostrar o primeiro, defina em um elemento 60x60 `background: url(sprite.png); background-position: 0 0;`. Mude para -60px 0 para o segundo e -120px 0 para o terceiro. Esta ferramenta gera automaticamente todas essas coordenadas para você.

**Alternativas modernas:** SVG + use ou symbol (recomendado, vetorial, permite cor e animação), Icon Font (ampla compatibilidade, multiplataforma), HTTP/2 server push e ícones em web font. Cada opção tem seus pontos fortes: escolha de acordo com as necessidades do seu projeto.

Casos de uso

Projetos web com muitos ícones pequenos que precisam ser unidos em um sprite para reduzir requisições HTTP e acelerar o primeiro paint
Desenvolvedores frontend que precisam centralizar os ícones do projeto e gerar automaticamente o código CSS de background-position
Times que querem gerar em lote o sprite e o CSS e entregar um pacote pronto para integrar
Após unir, passe a imagem combinada pela [ferramenta de compressão de imagem](/image/compress/) para reduzir o tamanho total e melhorar a métrica LCP
Apps, Electron ou clientes desktop que precisam agrupar ativos de ícones estáticos em uma única imagem
Templates HTML de e-mail ou blogs estáticos que precisam de vários ícones mantendo compatibilidade com clientes de e-mail
Designers que entregam os ícones em formato de sprite para que engenheiros frontend integrem rapidamente
Sprites 2x específicos para telas Retina, adaptados a telas 1x e 2x por meio de background-size

Como Usar

Clique na área de envio ou arraste várias imagens para ela (JPG, PNG, WebP e GIF são compatíveis)
Reordene os ícones na lista à esquerda pela alça de arrastar ou pelos botões para cima/baixo
Escolha Horizontal, Vertical ou Grade na seção de layout do painel esquerdo
Ajuste o controle deslizante de padding para definir o espaço em pixels entre os ícones (recomenda-se 1-5 px)
Veja a pré-visualização do sprite em tempo real à direita e, em seguida, clique em Baixar para salvar o PNG e em Copiar para levar o CSS

Recursos

União de imagens com um clique: envie vários ícones pequenos e combine em um único sprite
Três modos de layout: horizontal, vertical e em grade, alternáveis conforme o uso
Padding ajustável: um controle deslizante de 0 a 50 px regula o espaço entre os ícones
Reordenar arrastando: arraste os ícones na lista para mudar a ordem, as coordenadas CSS se atualizam sozinhas
Reordenação em dispositivos móveis: botões para cima e para baixo reorganizam em celulares e tablets
CSS gerado automaticamente: background-position, largura e altura de cada ícone são criados para você
Pré-visualização ao vivo: o sprite se regenera na hora a cada mudança para uma experiência WYSIWYG
Copiar CSS com um clique: um botão integrado copia a folha de estilos inteira para a área de transferência
Baixar PNG com um clique: a imagem combinada é salva localmente como sprite.png
Processamento local no navegador: a API Canvas une os arquivos localmente, nada é enviado
Vários formatos de entrada: JPG, PNG, WebP e GIF são compatíveis
Transparência preservada: a saída em PNG mantém o fundo transparente original para composições limpas

Best Practices

Adaptação Retina 2x: use arquivos de origem 2x

Se os seus usuários usam telas Retina (Mac, iPhone, Windows HiDPI), envie arquivos de origem com resolução 2x (por exemplo, ícones 32x32) e gere o sprite a partir deles, depois use background-size: 32px auto no CSS para voltar a 16x16. Assim as telas 1x e 2x ficam nítidas com um único sprite.

Sprites ainda valem em projetos com HTTP/2

O multiplexing do HTTP/2 reduz bastante o gargalo de número de requisições, mas os sprites ainda vencem em quatro cenários: reuso do cache em CDN, compressão gzip ou Brotli, travessia de proxies internos e fallback para HTTP/1.1. Intranets corporativas, sistemas bancários ou governamentais e templates HTML de e-mail ainda rodam majoritariamente em HTTP/1.1, onde os sprites são insubstituíveis.

PNG-8 ou PNG-24: escolha a profundidade certa

A ferramenta gera um PNG fixo, mas a profundidade do arquivo de origem é você quem escolhe. Ícones planos ou monocromáticos devem ser PNG-8 (transparência sem perda, 60-80% menores que PNG-24). Ícones com gradientes, sombras ou brilhos precisam de PNG-24. A ferramenta aceita qualquer formato, então otimize as origens com um compressor de PNG antes de unir.

Estratégia de cache em CDN: hash no nome do arquivo

Evite um nome fixo sprite.png. Renomeie com um hash de conteúdo (por exemplo, sprite.a3f2b1.png) e defina Cache-Control: max-age=31536000 para cache permanente. O navegador baixa apenas uma vez e depois serve do cache local, economizando mais banda que o HTTP/2 sozinho. A ferramenta gera sprite.png por padrão; você pode renomear depois do download.

gzip ou Brotli deixam os sprites ainda menores

Um sprite combinado tem mais continuidade de pixels do que imagens dispersas, então gzip ou Brotli o comprimem bem mais. Nginx com gzip nível 1 costuma reduzir sprites em 60-80%, e Brotli chega a 85% ou mais. Com Content-Encoding ativo, um sprite de 1 MB pode ser transmitido em 200-300 KB. É a vantagem mais subestimada dos sprites.

CSS Modules ou Vue scoped CSS: envolva com :global()

Se o seu projeto usa CSS Modules ou Vue scoped CSS, os nomes de classe .icon-home e .sprite gerados por esta ferramenta serão hasheados localmente e deixarão de funcionar. Envolva as classes compartilhadas com :global(.sprite) { ... } no seu .module.css, ou abandone os CSS Modules e use uma nomenclatura BEM.

Combine com Icon Font: UI essencial em fonte, ícones complexos em sprite

O padrão mais estável em produção é a combinação. Use Icon Font para ícones universais de UI (configurações, fechar, busca, usuário) porque aceitam cor, são vetoriais e multiplataforma. Use sprites para ícones coloridos e complexos (logos de produto, ícones de banner). As duas abordagens se completam e evitam o custo de manutenção de apostar tudo em uma.

spritesmith para projetos de engenharia, esta ferramenta para protótipos

Em projetos de longa duração, integre spritesmith (Webpack) ou gulp.spritesmith ao pipeline de build: mudanças no código regeneram o sprite, nomes com hash são emitidos e variáveis SCSS ou LESS são geradas automaticamente. Esta ferramenta foi feita para protótipos sem dependência e entregas pequenas, enquanto plugins de build se encaixam melhor em pipelines de CI/CD.

Projetos modernos podem migrar do sprite para SVG symbol

Se o seu projeto suporta navegadores modernos (Chrome, Safari, Firefox, Edge, além de IE 11+), considere migrar do sprite para SVG symbol: um único arquivo gerencia todos os ícones, o CSS controla cor e animação, e não há coordenadas de background-position para manter. O sprite gerado por esta ferramenta é um bom ativo de transição durante a migração.

Perguntas frequentes

O que é um sprite CSS e por que unir imagens?

Um sprite CSS combina várias imagens pequenas em uma imagem maior e usa background-position para exibir cada ícone individualmente. Com sprites, o navegador faz uma única requisição HTTP para carregar todos os ícones, o que reduz bastante o número de requisições e acelera o primeiro paint em relação a carregar dezenas de arquivos separados. É uma técnica clássica de otimização frontend.

Como uno vários ícones em um sprite online?

Envie suas imagens e a ferramenta as une no layout escolhido com pré-visualização ao vivo. À direita, ela gera o código CSS de background-position (com largura e altura) para cada ícone, pronto para colar na sua folha de estilos. O sprite gerado é em PNG e pode ser baixado com um clique.

Como uso o código CSS gerado?

Coloque o sprite.png no seu projeto (por exemplo, /img/sprite.png) e cole o CSS na folha de estilos. Adicione a classe .sprite e a classe .icon-xxx correspondente em qualquer elemento que deva mostrar um ícone, por exemplo <i class="sprite icon-home"></i>. Os nomes das classes são gerados automaticamente a partir do nome original do arquivo.

Quais modos de layout são suportados?

Três modos: horizontal (ícones lado a lado em uma linha), vertical (ícones empilhados de cima para baixo em uma coluna) e grade (ícones organizados automaticamente em uma matriz quadrada; as colunas equivalem à raiz quadrada arredondada para cima). Troque o modo no painel esquerdo para pré-visualizar o resultado.

Posso ajustar o espaço entre os ícones?

Sim. O painel esquerdo tem um controle deslizante de padding de 0 a 50 px; recomenda-se de 1 a 5 px. Um padding razoável evita o sangramento de pixels da borda no posicionamento CSS, mas não afeta o uso final. O padding vive dentro do sprite, enquanto o CSS usa apenas as coordenadas precisas de background-position.

Posso reordenar os ícones?

Sim. Cada item da lista à esquerda pode ser arrastado com a alça para reordenar, e os botões para cima/baixo funcionam em dispositivos móveis. O sprite e as coordenadas CSS são regenerados automaticamente assim que a ordem muda.

Quais formatos de imagem são suportados?

Todos os formatos comuns: JPG, PNG, WebP, GIF e outros. A saída é sempre PNG (preserva a transparência). Recomenda-se PNG na entrada, pois os fundos transparentes sobrevivem à união no sprite.

Sprites CSS ainda são úteis em projetos modernos?

O multiplexing do HTTP/2 reduz parte da vantagem do sprite, mas os sprites continuam agregando valor com cache em CDN, compressão gzip e um primeiro paint mais rápido dos ícones principais. Se você tem menos de 10 ícones ou precisa de cor e animação, prefira SVG symbol ou Icon Font. Para muitos ícones PNG estáticos, o sprite continua sendo uma escolha estável e confiável.

Sprites ficam borrados em telas Retina? Como resolver?

Sim, podem ficar. Telas Retina (Mac, iPhone, Windows HiDPI) têm 2x ou 3x pixels físicos, então um sprite 1x é esticado e fica desfocado. A solução é enviar arquivos de origem 2x (32x32 em vez de 16x16) e dimensionar o sprite de volta a 16x16 no CSS com background-size: 32px auto.

Unir ícones perde qualidade de imagem?

Não. A união apenas coloca cada imagem em sua posição sobre uma tela grande. Não há reamostragem, compressão nem ajuste de cor. O PNG de saída mantém a qualidade original. Se precisar reduzir ainda mais o arquivo unido, passe-o pela [ferramenta de compressão de imagem](/image/compress/).

Minhas imagens do sprite são enviadas para um servidor?

Não. Toda a união acontece no seu navegador local pela API Canvas. Os arquivos nunca saem do seu dispositivo e são descartados ao fechar a página. Ícones internos, logos não publicados e outros ativos sensíveis podem ser processados com tranquilidade.

Como faço o download do sprite gerado?

Assim que as imagens são enviadas, uma pré-visualização é gerada. Clique no botão Baixar do painel esquerdo para salvar sprite.png localmente. O CSS também é gerado automaticamente, e um clique em Copiar o leva para a área de transferência.

Posso personalizar os nomes das classes?

Os nomes das classes são gerados automaticamente a partir do nome original do arquivo com o prefixo .icon-. Por exemplo, home.png vira .icon-home. Use nomes em inglês, dígitos e hífens para obter nomes de classe limpos e legíveis.

Como escolho entre sprite, Icon Font e SVG symbol?

Depende do caso de uso. Muitos ícones PNG estáticos ou necessidade de suportar IE antigo: sprite. Ícones universais de UI que precisam mudar de cor e permanecer multiplataforma: Icon Font. Projetos modernos que precisam de cor, animação e um único arquivo: SVG symbol é a primeira escolha. Na prática, a combinação é comum: Icon Font para os ícones essenciais de UI, sprite para os ícones coloridos e complexos.

Posso reduzir o sprite unido com a ferramenta de compressão?

Sim. Esta ferramenta gera um PNG sem perda, que pode ser grande. Um bom fluxo de trabalho é: gere o sprite aqui, depois use a [ferramenta de compressão de imagem](/image/compress/) para reduzir o PNG ou converter em JPG (se não precisar de transparência), e por fim o [conversor de imagem](/image/convert/) para passar a WebP se quiser. Combinar as ferramentas maximiza o desempenho de carregamento.

Glossário

Sprite CSS: Técnica que combina várias imagens pequenas em uma imagem maior e usa background-position para exibir cada ícone individualmente. Uma otimização clássica de frontend.
background-position: Propriedade CSS que define as coordenadas de partida da imagem de fundo. Os sprites usam valores negativos para deslocar o fundo para a esquerda ou para cima até o ícone desejado. Por exemplo, background-position: -60px 0 mostra o ícone com 60 px de deslocamento.
background-size: Propriedade CSS que controla o tamanho de renderização da imagem de fundo. A chave da adaptação Retina: depois de gerar o sprite a partir de fontes 2x, use background-size: 32px auto no CSS para voltar a 1x e manter nítidas as telas 1x e 2x.
Layout em grade: O modo em grade desta ferramenta calcula automaticamente o número de colunas como a raiz quadrada da quantidade de ícones (arredondada para cima) e organiza os ícones linha a linha em um quadrado. Nove ícones viram uma grade 3x3.
Padding (espaço entre ícones): O espaço em pixels entre sub-imagens vizinhas dentro de um sprite. Recomenda-se de 1 a 5 px para evitar o sangramento de pixels da borda. O padding vive dentro do sprite, enquanto o CSS usa apenas as coordenadas precisas.
Transparência do PNG: O PNG suporta um canal alfa, então os ícones podem ter fundos transparentes. A saída do sprite mantém o formato PNG, de modo que ícones transparentes continuam transparentes após a união.
Multiplexing do HTTP/2: O HTTP/2 processa várias requisições em paralelo em uma única conexão, reduzindo parte da vantagem do sprite. Ainda assim, o HTTP/2 fica atrás de um sprite combinado em configuração de CDN, compatibilidade com navegadores antigos e compressão gzip.
SVG symbol: O elemento <symbol> do SVG com referências <use>. Todos os ícones vivem em um único arquivo SVG e o CSS controla fill, stroke e animação. A principal substituição do sprite em projetos modernos.
DPR (Device Pixel Ratio): A razão entre pixels físicos e pixels CSS. Telas Retina têm DPR = 2, então um ícone CSS de 16x16 precisa de 32x32 pixels físicos. O DPR é o parâmetro central para adaptar sprites a telas Retina.

Comparação entre os layouts do sprite

Layout	Regra de arranjo	Uso típico
Horizontal	Ícones lado a lado, da esquerda para a direita, em uma única linha	Barras de navegação, abas, barras horizontais
Vertical	Ícones empilhados de cima para baixo em uma única coluna	Menus verticais, prefixos de lista, estruturas de cima para baixo
Grade	Ícones organizados em matriz quadrada conforme a quantidade	Uso geral, melhor escolha padrão para quantidades desconhecidas

Valores de padding recomendados para sprites

Padding (px)	Ideal para	Observações
`0px`	Bordas limpas, ícones já com padding transparente	Compactação máxima; pixels da borda podem sangrar
`1-2px`	Ícones de alta qualidade com margem de segurança mínima	Recomendado: equilibra compacidade e estabilidade
`3-5px`	Ícones padrão com sombras ou contornos	Distância segura, padrão consolidado
`6-10px`	Ícones com tamanhos muito diferentes ou com contornos	Evita que ícones grandes cubram os pequenos
`10-50px`	Depuração ou agrupamento visual	Não recomendado em produção

Referência de adaptação do sprite Retina 2x

DPR da tela	Tamanho CSS	Tamanho do arquivo de origem	background-size
`1x`	`16x16`	`16x16`	`auto`
`2x`	`16x16`	`32x32`	`32px auto`
`3x`	`16x16`	`48x48`	`48px auto`
`2x`	`24x24`	`48x48`	`48px auto`

Authoritative References

ReferenceMDN - CSS background-position
ReferenceMDN - Implementando sprites de imagem em CSS
ReferenceMDN - background-size
ReferenceMDN - SVG <symbol> e <use>
ReferenceWeb.dev - Substitua imagens por CSS sprite
ReferenceWikipédia - Sprite (computação gráfica)