Como são implementados os sprites CSS numa página ou…

CSS sprites são uma técnica para combinar várias imagens numa só grande. Implementa-se usando CSS, controlando a visibilidade do fragmento necessário da grande imagem através das propriedades background-image, background-position e background-repeat.

Vantagens:

Redução do número de pedidos HTTP. Em vez de carregar várias imagens pequenas, carrega-se uma grande.
Aceleração do carregamento da página. Menos pedidos ao servidor, renderização mais rápida.
Economia de tráfego. O tamanho total do ficheiro costuma ser menor do que a soma das imagens individuais.

Implementação:

Criação do sprite: Combinar imagens numa só usando editores gráficos ou ferramentas online/especiais (por exemplo, Webpack com o plugin css-spritesmith-plugin).

CSS: Para os elementos que usam imagens do sprite, aplicar os seguintes estilos:

.icon {
  background-image: url('path/to/sprite.png'); /* Caminho para o ficheiro do sprite */
  background-repeat: no-repeat; /* A imagem não repete */
  display: block; /* ou inline-block, dependendo do elemento */
  width: 32px; /* Largura do ícone necessário */
  height: 32px; /* Altura do ícone necessário */
}

.icon-home {
  background-position: 0 0; /* Posição do fragmento necessário do ícone "Início" */
}

.icon-settings {
  background-position: -32px 0; /* Posição do fragmento necessário do ícone "Configurações" */
}

No código CSS fornecido, .icon define as propriedades gerais para todos os elementos que usam o sprite. As classes como .icon-home e .icon-settings definem a posição específica da imagem necessária dentro do sprite usando background-position.

Como são implementados os sprites CSS numa página ou site?