Neste artigo
O que são CSS Sprite Sheets
Uma sprite sheet combina multiplas imagens pequenas num unico ficheiro de imagem maior. Cada imagem individual ocupa uma região definida dentro da folha. No desenvolvimento web, o CSS background-position e utilizado para apresentar apenas a porção da sprite sheet necessaria para cada elemento, reduzindo pedidos HTTP e melhorando o desempenho de carregamento da página.
As sprite sheets foram essenciais na otimização inicial do desempenho web quando cada imagem requeria um pedido HTTP separado. Mesmo com a multiplexacao moderna do HTTP/2, as sprite sheets continuam valiosas para conjuntos de icones, elementos de UI e animações de jogos onde dezenas de imagens pequenas sao utilizadas em conjunto e beneficiam de serem carregadas como um unico ficheiro em cache.
Como funciona Sprite Sheet de Works
Carregue multiplas imagens, escolha uma direção de layout e obtenha tanto a imagem da sprite sheet como o código CSS pronto a utilizar.
- Envie sua imagem — arraste e solte ou clique para selecionar qualquer arquivo JPG, PNG ou WebP do seu dispositivo
- Escolha o layout — selecione faixa horizontal, faixa vertical ou disposicao em grelha, e configure o espaçamento entre sprites
- Baixe o resultado — visualize o efeito e exporte a imagem processada
Experimente gratuitamente — sem cadastro
Abrir ferramenta Sprite Sheet de →Quando usar Sprite Sheets
As sprite sheets otimizam a entrega de ativos e simplificam os fluxos de trabalho de animação.
- Desempenho web — combine conjuntos de icones e elementos de UI numa unica sprite sheet para reduzir o número de pedidos de imagem, especialmente benefico para sites com muitos icones pequenos
- Desenvolvimento de jogos — empacote fotogramas de animação em sprite sheets para renderização eficiente em jogos baseados em canvas ou animados com CSS, onde fotogramas sequenciais sao acedidos deslocando a posição do fundo
- Email e suporte legado — crie sprite sheets para emails HTML e ambientes legados onde tecnicas modernas de carregamento de imagens não estão disponiveis
Perguntas frequentes
Que layout devo escolher?
As faixas horizontais funcionam bem para fotogramas de animação que sao reproduzidos em sequência. As faixas verticais sao adequadas para menus e icones de navegação. O layout de grelha e o mais eficiente em espaço para grandes conjuntos de icones. A ferramenta gera os valores corretos de CSS background-position para qualquer layout que escolher.
A ferramenta gera código CSS?
Sim. A ferramenta gera automaticamente código CSS com o deslocamento exato de background-position para cada sprite na folha. Pode copiar o CSS diretamente para a sua folha de estilos e utilizar os nomes de classe fornecidos para apresentar sprites individuais.
O processamento acontece em um servidor?
Não. Todo o processamento ocorre localmente no seu navegador usando a API Canvas. Sua imagem nunca sai do seu dispositivo, garantindo total privacidade sem limites de tamanho ou tempos de espera.