Sobre esta ferramenta
Uma sprite sheet CSS empacota um conjunto inteiro de imagens pequenas — ícones, glifos de interface, emojis — em um único arquivo de imagem maior, e então usa o background-position do CSS para mostrar exatamente a fatia certa para cada elemento. Antes da multiplexação do HTTP/2, isso era um truque de desempenho significativo: um navegador abrindo uma dúzia de conexões separadas para uma dúzia de arquivos de ícones minúsculos era mais lento do que abrir uma única conexão para uma imagem combinada, e essa diferença ainda pode importar em conexões HTTP/1.1, limites rígidos de número de requisições de CDNs, ou simplesmente ao reduzir requisições de recursos que bloqueiam a renderização em uma rede lenta.
Esta ferramenta constrói as duas partes para você, totalmente no seu navegador: solte seus arquivos de ícones, escolha se eles ficam dispostos em uma única linha ou coluna e quanto espaçamento transparente os separa, e ela os desenha em um único canvas, codifica como PNG (para preservar a transparência) e gera a regra CSS background-position exata para cada um — copie direto para sua folha de estilos. Dito isso, sprites são uma técnica mais antiga: para a maioria dos projetos novos, SVG inline ou uma fonte de ícones SVG costuma ser mais simples de manter e escala melhor em qualquer tamanho, então trate isto como mais uma ferramenta do kit, não a única resposta certa — recorra a ela quando já tiver um conjunto de ícones rasterizados (PNG, não vetores) e quiser reduzir o número de requisições.
Perguntas frequentes
Os sprites CSS ainda são relevantes, ou devo usar ícones SVG em vez disso?
Para a maioria dos novos projetos, SVG inline ou uma fonte/sprite de ícone SVG geralmente é a escolha mais moderna (nítido em qualquer nível de zoom, facilmente recolorido com CSS, sem problemas de alinhamento de grade de pixel fixo). Sprites CSS continuam genuinamente úteis para conjuntos de ícones fotográficos/raster que não podem ser representados como formas vetoriais, para bases de código legadas já construídas em torno da técnica, ou simplesmente como uma forma rápida e sem dependências de agrupar um pequeno conjunto de ícones com o mínimo de solicitações HTTP. Use o que se adequar às suas restrições reais — esta ferramenta está aqui para quando uma folha de sprites raster é a ferramenta certa para o trabalho, não uma afirmação de que é sempre a melhor escolha.
Por que o preenchimento final não é adicionado após a última imagem?
Isso mantém o tamanho total da folha o menor possível — a configuração de preenchimento existe para evitar sangramento de textura ENTRE ícones adjacentes quando a folha é escalada/ampliada, o que só é uma preocupação para bordas compartilhadas por dois ícones; a própria borda externa da folha não tem um ícone vizinho do outro lado, então espaço extra ali não serviria a esse propósito e apenas desperdiçaria tamanho de arquivo, além de adicionar uma inconsistência em quão longe cada ícone fica da borda absoluta da folha dependendo de sua posição.