O que são sprites CSS?

Sprites CSS são um método de otimização que permite combinar várias imagens numa única imagem grande. Em vez de carregar cada imagem separadamente, o navegador carrega um único ficheiro grande e depois usa as propriedades CSS background-image, background-position e width/height para mostrar a parte necessária dessa imagem.

Vantagens do uso de sprites CSS:

• Redução do número de pedidos HTTP: Carregar um único ficheiro em vez de muitos reduz a carga no servidor e acelera o tempo de renderização da página.
• Caching: Uma imagem grande é armazenada em cache pelo navegador, o que melhora o desempenho em visitas repetidas.
• Redução do tamanho do ficheiro: Em alguns casos, a combinação de imagens pode levar a uma ligeira redução do tamanho total dos ficheiros devido à otimização de compressão.

Exemplo de uso (HTML):

<div class="icon home"></div>
<div class="icon settings"></div>

Exemplo de uso (CSS):

.icon {
  width: 32px; /* Largura do ícone */
  height: 32px; /* Altura do ícone */
  background-image: url('sprites.png'); /* Caminho para o ficheiro sprite */
  background-repeat: no-repeat;
}

.icon.home {
  background-position: 0 0; /* Posição do ícone "home" no sprite */
}

.icon.settings {
  background-position: -32px 0; /* Posição do ícone "settings" no sprite */
}

Neste exemplo, sprites.png é o ficheiro que contém os ícones "home" e "settings". A propriedade background-position define o deslocamento para mostrar o ícone desejado.