Vamos dar uma olhada mais de perto em uma ferramenta tão interessante como os sprites CSS. Muitos designers de layout e webmasters experientes estão bem cientes das vantagens desta técnica simples. O lado positivo do uso de sprites é que o tempo de carregamento da página é significativamente reduzido com a redução do número de imagens individuais. Nos padrões de layout modernos, é comum agrupar pequenos ícones e imagens temáticas em uma coleção especial de imagens. Simplificando, um sprite é uma imagem que inclui um conjunto de pequenas imagens de um tema.

Dessa forma, ao agruparmos imagens pequenas, reduzimos o número de solicitações ao servidor. Nossa página carrega apenas uma imagem em vez de 30 pequenas. Isso proporciona um ganho significativo na velocidade de carregamento.

Resumindo: CSS Sprites são uma ferramenta para combinar várias imagens em um único arquivo para uso em um site para melhorar significativamente o desempenho. O conceito de Sprite pode parecer um pouco enganador, considerando que você está criando uma imagem grande em vez de trabalhar com imagens pequenas.

Para resumir: o termo "sprites" vem de uma técnica de computação gráfica usada com mais frequência em videogames. A ideia era armazenar uma imagem na memória e depois exibir apenas parte dessa imagem, o que era mais rápido do que buscar novas imagens.

CSS Sprites é praticamente a teoria exata: obtenha a imagem uma vez, mova o fundo e exiba apenas partes dela. Isso reduz a sobrecarga ao recuperar várias imagens.

Existe um grande número de serviços na Internet para a criação de sprites. Você só precisa digitar a consulta apropriada em um mecanismo de pesquisa. Se você estiver com preguiça de pesquisar, aqui estão alguns recursos populares sobre esse assunto. gerador de sprites toptal, gerador de sprites inettools. Digamos que você cortou seu modelo, selecionou todos os pequenos ícones, criou um sprite com ele. O que vem a seguir?

Como usar ícones de um sprite

Agora vamos ver o procedimento para trabalhar com um sprite.

• Vamos criar uma classe geral, por exemplo, chame-a de .sprite, cujo fundo é esta imagem, que foi criada usando o gerador sprite.png. Para a mesma classe definiremos a altura e a largura, que será a altura e largura dos ícones do sprite se eles forem do mesmo tamanho.
• Para blocos onde você precisa usar este ícone, defina o deslocamento do plano de fundo para o valor desejado usando a propriedade css background-position. Mais sobre planos de fundo no artigo anterior.

Exemplo:

.sprite {
 largura: 30px;
 altura: 30px;
 plano de fundo: url("/assets/img/sprite.png");{{HTML 85}}
}
.sprite-icon1 {
 posição de fundo: 0 -80px;
}

Bom trabalho