Gerador de sprite sheets CSS

Como criar uma sprite sheet

1. Larga as tuas imagens na zona de largar, ou clica nela para as escolher. São aceites PNG, SVG, WebP, JPG e os outros formatos que o teu navegador consegue ler, até 500 imagens. Cada ficheiro aparece na lista Imagens com o seu tamanho; o botão × remove uma imagem e Remover todas as imagens limpa a lista.
2. Escolhe uma Disposição: Grelha, Compacta (folha mais pequena), Faixa horizontal ou Faixa vertical. Com Grelha, Colunas (0 = automático) define o número de colunas.
3. Define o Espaçamento (px) entre sprites (2 por omissão) e marca Tamanho em potência de dois (256, 512, 1024…) se o teu motor de jogo ou a tua GPU o exigirem.
4. Escolhe o Ficheiro de dados: CSS (classes com background-position), JSON (mapa de fotogramas) ou CSS e JSON. Ajusta o Nome do ficheiro e o Prefixo das classes CSS (ambos «sprite» por omissão).
5. Confirma a pré-visualização, o Tamanho da folha e o Espaço ocupado e clica em Transferir ZIP (PNG + dados) ou Transferir só o PNG. O Código gerado também pode ser copiado diretamente.

As imagens são descodificadas no teu navegador e nada é enviado. Um SVG sem largura e altura próprias é rasterizado com o lado maior a 256 px.

Escolher uma disposição

• Grelha dá a cada imagem uma célula do tamanho da maior imagem. Com colunas automáticas, a grelha fica aproximadamente quadrada. É simples e previsível, e ideal quando todos os sprites têm o mesmo tamanho, como num tileset.
• Compacta (folha mais pequena) usa empacotamento em prateleiras: as imagens são ordenadas da mais alta para a mais baixa e colocadas da esquerda para a direita, em filas. A ferramenta experimenta muitas larguras de folha e fica com a que tem menor área, tendo em conta o arredondamento a potências de dois quando essa opção está ativa. É a melhor para ícones de tamanhos variados.
• Faixa horizontal e Faixa vertical colocam as imagens numa única linha ou coluna, pela ordem em que as adicionaste. É o que muitos leitores de animação esperam para os fotogramas.

A folha não pode ultrapassar 16 384 px por lado nem cerca de 16,7 megapíxeis, o limite que os navegadores conseguem desenhar.

Usar o CSS

O CSS contém uma classe base com a folha como background-image e no-repeat, e depois uma classe por sprite com o nome do respetivo ficheiro: home.png passa a sprite-home. Os nomes ficam em minúsculas, os acentos são removidos, os outros caracteres passam a hífenes, e os duplicados recebem -2, -3.

<link rel="stylesheet" href="sprite.css">
<span class="sprite sprite-home"></span>
<span class="sprite sprite-search"></span>

Cada classe de sprite define width, height e um background-position com deslocamentos negativos. Um sprite em x = 40, y = 20 recebe background-position: -40px -20px: a folha inteira é deslocada 40 px para a esquerda e 20 px para cima dentro do elemento, por isso só esse sprite aparece na caixa do elemento. O espaçamento impede que os sprites vizinhos apareçam quando a página tem zoom ou quando uma textura é filtrada.

Ecrãs de alta densidade (high-DPI): desenha as imagens com o dobro do tamanho de apresentação, gera a folha, acrescenta à classe base um background-size igual a metade do tamanho da folha e divide por dois as larguras, alturas e deslocamentos. A ferramenta não gera isto; é um ajuste manual.

Os sprites ainda são úteis com HTTP/2?

Os sprites foram inventados para poupar pedidos HTTP. Com a multiplexagem do HTTP/2, muitos ficheiros pequenos carregam quase tão depressa como um só, por isso o ganho para os sites é muito menor, e os ícones SVG ou as fontes de ícones são muitas vezes melhores para ícones escaláveis. As sprite sheets continuam a ser o padrão nos jogos 2D e nos fotogramas de animação: uma única textura significa menos trocas de textura na GPU e um só ficheiro para carregar.