Explique os sprites CSS e como você os implementaria em uma página ou site.

Os sprites CSS combinam várias imagens em um único arquivo de imagem maior e usam uma combinação de CSS background-image, background-position e background-size para selecionar uma parte específica da imagem maior como a imagem desejada.

Essa técnica costumava ser comumente usada para ícones (por exemplo, o Gmail usa sprites para todas as suas imagens).

Vantagens

• Reduz o número de solicitações HTTP para várias imagens (apenas um único pedido é necessário por spritesheet). Mas com HTTP2, carregar várias imagens já não é muito problema.
• Download avançado de ativos que não serão baixados até ser necessário, como imagens que aparecem apenas nos pseudo-estados :hover. O piscar não seria visto.

Como implementar

1. Use um gerador de sprites que agrupa várias imagens em uma só e gere o CSS apropriado para isso.
2. Cada imagem teria uma classe CSS correspondente com as propriedades 'background-image' e 'background-position' definidas.
3. Para usar essa imagem, adicione a classe correspondente ao seu elemento.

A folha de estilos gerada pode parecer algo como:

.icon {
  background-image: url('https://example.com/images/spritesheet.png');
  width: 24px;
  height: 24px;
}

.icon-cart {
  background-position: 0 0;
}

.icon-arrow {
  background-position: -24px 0;
}

E pode ser usado no HTML como tal:

<span class="icon icon-cart"></span>

<span class="icon icon-arrow"></span>

Referências

• Implementando sprites de imagem em CSS - CSS: Cascading Style Sheets | MDN