Lote Gerador de Sprites CSS
Combine vários ícones ou imagens em um único arquivo para reduzir solicitações HTTP e aumentar a velocidade do seu site. Gere código CSS perfeito automaticamente.
Solte ícones aqui para gerar sprites
Suporta PNG, JPG, WebP, AVIF. Combine várias imagens em uma única Folha de Sprite CSS.
Experimentar com Exemplos
Galeria Carregada
Sprite Studio
Pré-visualização da Folha de Sprites
Ícones Individuais
| Ícone | Nome da Classe | Posição | Tamanho | Ação |
|---|
Opções de Sprite
Aplicar em Lote
Regeneração automática ao alterar
Geração Profissional de Sprites CSS
Otimize seus recursos da web combinando várias imagens pequenas em uma única folha de sprites. Reduza a latência, economize largura de banda e simplifique seu fluxo de trabalho em CSS.
Acelere o Site
Menos solicitações HTTP significam carregamentos de página mais rápidos. Ao combinar 50 ícones em 1 folha de sprites, você elimina 49 viagens de ida e volta ao servidor.
CSS Gerado Automaticamente
Sem mais contagem manual de pixels. Nossa ferramenta calcula automaticamente as posições e dimensões do plano de fundo para cada ícone na sua folha.
Layouts Inteligentes
Escolha entre layouts de grade verticais, horizontais ou otimizados. Ajuste o preenchimento para evitar "sangramento" entre ícones durante o redimensionamento.
Como Criar uma Folha de Sprites CSS
Carregue Seus Ícones
Arraste e solte todas as pequenas imagens ou ícones que deseja mesclar. Suportamos PNG, JPG, WebP e AVIF.
Configurar Definições de Sprite
Escolha o estilo de layout, ajuste o preenchimento e defina o prefixo da sua classe CSS. A pré-visualização atualiza instantaneamente.
Exportar Sprite e CSS
Baixar a folha de sprite final e o código CSS correspondente como um arquivo ZIP. Basta copiar e colar em seu projeto.
Perguntas Frequentes
Por que devo usar CSS sprites?
Sprites CSS são uma técnica clássica de desempenho. Eles reduzem o número de solicitações HTTP, o que é especialmente benéfico em conexões mais lentas ou sites com muitos recursos pequenos, como ícones ou elementos de interface do usuário.
Qual layout devo escolher?
Layouts verticais e horizontais são mais fáceis de depurar. O layout em grade é o mais eficiente para minimizar a área final da imagem e o tamanho do arquivo.
E quanto às telas de alta DPI (Retina)?
Você pode gerar uma folha de sprites com ícones em tamanho duplo e usar "background-size" no seu CSS para reduzi-la, garantindo renderização nítida em telas de alta DPI.