Sprite sheets vs. sprites SVG vs. fontes de ícones?

Sprites PNG ainda vencem quando a fonte é um raster real (arte de jogo, miniaturas de foto). Pra iconografia UI prefira sprites SVG (` ` + ` `) — escalam e respondem ao currentColor. Fontes de ícones agora são principalmente um fallback legado.

O que acontece com a transparência?

Se você mantém o fundo transparente, o PNG é salvo com alfa (o tabuleiro de xadrez que você vê na visualização é só pra tornar a área transparente visível). Se você escolhe branco ou preto, esses são assados na folha.

Gerador de Sprite Sheet de Imagens

Imagem

Combina muitas imagens pequenas (ícones, estados UI, frames de personagem) em um PNG baixável e emite um bloco CSS que posiciona cada um por `background-position`. Reduz requisições HTTP quando uma fonte de ícones, um sprite SVG ou um pipeline real de sprite sheet não é uma opção. O layout é faixa horizontal, faixa vertical, ou uma grid de colunas fixas; a folha é dimensionada pra caber o maior item em cada linha ou coluna. Arquivos são processados inteiramente no lado do cliente via canvas — seus ícones nunca saem do navegador.

—

Como usar

Solte ou escolha as imagens. Elas aparecem na ordem que o OS as entrega.
Escolha layout: faixas horizontal/vertical são as mais simples, grid é mais densa. Configure padding pra evitar sangramento.
Baixe o PNG, copie o CSS, envie-os juntos — combine o nome de classe que você colocou no prefixo CSS.

Perguntas frequentes

Sprite sheets vs. sprites SVG vs. fontes de ícones?: Sprites PNG ainda vencem quando a fonte é um raster real (arte de jogo, miniaturas de foto). Pra iconografia UI prefira sprites SVG (`<symbol>` + `<use>`) — escalam e respondem ao currentColor. Fontes de ícones agora são principalmente um fallback legado.
O que acontece com a transparência?: Se você mantém o fundo transparente, o PNG é salvo com alfa (o tabuleiro de xadrez que você vê na visualização é só pra tornar a área transparente visível). Se você escolhe branco ou preto, esses são assados na folha.