Gerador de CSS Sprite
Gerador de CSS sprite gratuito online
O que é um CSS Sprite?
Um CSS sprite combina múltiplas imagens pequenas em um único arquivo de imagem (folha de sprite). CSS background-position é então usado para exibir imagens individuais do arquivo combinado. Isso reduz o número de requisições HTTP, melhorando o desempenho de carregamento da página.
Como criar um CSS Sprite
Envie múltiplas imagens. Escolha um layout (horizontal, vertical ou grade). A ferramenta combina-as em uma única folha de sprite e gera o CSS com valores de background-position para cada imagem.
▶CSS sprites ainda são úteis?
Com a multiplexação HTTP/2, o benefício de desempenho dos sprites diminuiu. No entanto, sprites ainda ajudam ao servir muitos ícones pequenos ou ao usar sistemas de ícones que precisam de cache de arquivo único.
▶Qual é o melhor layout para sprites?
Layout horizontal é compacto para poucas imagens. Layout em grade funciona bem para muitos ícones de tamanho similar. Layout vertical é útil quando todas as imagens têm a mesma largura.
▶Como uso o CSS gerado?
O CSS usa background-image na folha de sprite e background-position para cada ícone. Aplique as classes geradas aos seus elementos HTML.