DevToolPal
PT

Gerador de sprites CSS

Junte ícones em uma única sprite sheet PNG e obtenha as classes CSS com background-position de cada imagem.

Roda localmente, nada é enviado

Opções

Imagens de origem

Imagens (0)

Adicione imagens PNG, SVG, GIF ou JPG. Nada é enviado.

Sprite

CSS

O que esta ferramenta faz

O Gerador de sprites CSS junta um conjunto de ícones ou imagens pequenas em uma única sprite sheet e escreve o CSS para exibir cada uma. Adicione arquivos PNG, SVG, GIF ou JPG, escolha como organizá-los e baixe o PNG do sprite junto com uma folha de estilo que tem uma classe por imagem.

Os nomes das classes vêm dos nomes dos arquivos: Home Icon.png vira .icon-home-icon, e nomes duplicados ganham um número. O layout Compactado usa bin packing para posicionar imagens de tamanhos diferentes na menor folha possível; Vertical, Horizontal e Grade geram posições previsíveis.

Como usar

  1. Clique em Adicionar imagens… e selecione seus ícones (ou comece pelo conjunto de exemplo).
  2. Escolha um Layout e um Espaçamento. Um pouco de espaçamento evita que ícones vizinhos vazem uns nos outros quando o navegador os redimensiona.
  3. Defina o Prefixo da classe e o Nome do arquivo do sprite usado em background-image.
  4. Escolha @2x se as suas imagens foram desenhadas em tamanho dobrado para telas retina.
  5. Clique em Baixar PNG e Baixar CSS (ou Copiar imagem para colar o sprite em uma ferramenta de design ou num chat), publique os dois arquivos e use as classes: <span class="icon icon-home"></span>.

Exemplo

.icon {
  display: inline-block;
  background-image: url("sprite.png");
  background-repeat: no-repeat;
}

.icon-home {
  width: 32px;
  height: 32px;
  background-position: 0 0;
}

Dicas

  • Mantenha no mesmo sprite os ícones que mudam juntos; gerar a folha de novo altera todas as posições.
  • Para ícones de uma só cor que precisam mudar de cor via CSS, uma fonte de ícones SVG ou SVG inline pode ser uma opção melhor.

Perguntas frequentes

› O que é um sprite CSS?

Uma única imagem que contém várias imagens pequenas. Cada ícone é exibido definindo o sprite como fundo de um elemento e deslocando-o com background-position, então a página faz uma requisição em vez de dezenas.

› Sprites ainda são úteis com HTTP/2?

Menos do que antes, mas ainda ajudam com muitos ícones pequenos, templates de e-mail, jogos e projetos legados, e evitam o efeito dos ícones carregando um por um.

› O que faz a opção @2x?

Se as suas imagens de origem foram desenhadas com o dobro do tamanho de exibição, o CSS divide pela metade cada largura, altura e posição e adiciona background-size, para que os ícones fiquem nítidos em telas de alta densidade.

› Minhas imagens são enviadas para algum lugar?

Não. O sprite é desenhado no seu navegador com um canvas e o CSS é gerado localmente.