Gerador de sprite CSS (juntar ícones numa imagem)

Gerador de sprite CSS (juntar ícones numa imagem): para que serve

Um sprite junta vários ícones numa imagem só, e o CSS mostra o pedaço certo em cada lugar com background-position. O navegador faz um pedido em vez de dez e os ícones de hover não piscam.

Escolha os ícones, o arranjo (grade, linha ou coluna), o espaço entre eles e o formato. Baixe o sprite e copie o CSS com uma classe por ícone (o nome do arquivo vira o nome da classe), largura, altura e posição. A opção retina mostra ícones feitos em tamanho dobrado pela metade, nítidos em telas de alta densidade. Tudo é feito no seu aparelho.

Como usar

1. Escolha os ícones.
2. Ajuste o arranjo, o espaço e o formato.
3. Baixe o sprite e copie o CSS.

Quando usar

• Ícones de redes sociais com hover.
• Bandeiras e emblemas.
• Sprites de jogos em HTML.

Perguntas frequentes

Para que serve um sprite?

Em vez de o navegador baixar dez ícones separados, ele baixa uma imagem só, e o CSS mostra o pedaço certo em cada lugar com background-position. Isso reduz o número de pedidos ao servidor e evita ícones piscando ao passar o mouse, porque o estado de hover já está carregado.

Ainda vale a pena usar sprite com HTTP/2?

Com HTTP/2 o custo de muitos arquivos pequenos caiu bastante, então o ganho é menor que antigamente. Sprites ainda são úteis para conjuntos de ícones de hover, bandeiras, emblemas e jogos em canvas, e para quem não pode usar SVG inline.

O que é a opção retina?

Se os seus ícones foram feitos com o dobro do tamanho em que aparecem, marque a opção: o CSS mostra cada um pela metade com background-size, e eles ficam nítidos em telas de alta densidade, como as de celulares e Macs.

É grátis mesmo?

Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.

Ferramentas parecidas