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 regiao definida dentro da folha. No desenvolvimento web, o CSS background-position e utilizado para apresentar apenas a porcao da sprite sheet necessaria para cada elemento, reduzindo pedidos HTTP e melhorando o desempenho de carregamento da pagina.
As sprite sheets foram essenciais na otimizacao 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 animacoes 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 direcao de layout e obtenha tanto a imagem da sprite sheet como o codigo 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 espacamento 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 animacao.
- Desempenho web — combine conjuntos de icones e elementos de UI numa unica sprite sheet para reduzir o numero de pedidos de imagem, especialmente benefico para sites com muitos icones pequenos
- Desenvolvimento de jogos — empacote fotogramas de animacao em sprite sheets para renderizacao eficiente em jogos baseados em canvas ou animados com CSS, onde fotogramas sequenciais sao acedidos deslocando a posicao do fundo
- Email e suporte legado — crie sprite sheets para emails HTML e ambientes legados onde tecnicas modernas de carregamento de imagens nao estao disponiveis
Perguntas frequentes
Que layout devo escolher?
As faixas horizontais funcionam bem para fotogramas de animacao que sao reproduzidos em sequencia. As faixas verticais sao adequadas para menus e icones de navegacao. O layout de grelha e o mais eficiente em espaco para grandes conjuntos de icones. A ferramenta gera os valores corretos de CSS background-position para qualquer layout que escolher.
A ferramenta gera codigo CSS?
Sim. A ferramenta gera automaticamente codigo 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?
Nao. 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.