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

Os sprites CSS são implementados combinando várias imagens pequenas em um único arquivo grande (sprite), e depois exibindo a parte necessária dessa grande imagem nos elementos da página usando CSS.

Principais passos:

1. Criação do sprite: Todas as imagens que se deseja combinar (ícones, fundos pequenos, etc.) são colocadas numa única imagem. Isto pode ser feito manualmente num editor gráfico ou com ferramentas automáticas/geradores de sprites.

2. Aplicação do CSS: Para cada elemento onde é necessário "inserir" uma imagem do sprite, definem-se as seguintes propriedades CSS:

   • background-image: Indica o caminho para o arquivo do sprite.
   • background-repeat: no-repeat;: Desativa a repetição da imagem de fundo.
   • background-position: Define as coordenadas do canto superior esquerdo da parte do sprite que se deseja mostrar nesse elemento. Estas coordenadas indicam deslocamento horizontal e vertical a partir do canto superior esquerdo do elemento.
   • width e height: Estabelecem as dimensões da área onde a parte do sprite será exibida. Estas dimensões geralmente correspondem ao tamanho do ícone ou imagem original.

Exemplo de uso para dois ícones num sprite:

/* Ficheiro sprite: icons.png */

.icon {
  background-image: url('icons.png'); // Caminho para o ficheiro do sprite
  background-repeat: no-repeat; // Não repetir a imagem
  width: 32px; // Largura do elemento
  height: 32px; // Altura do elemento
  display: inline-block; /* Ou outra forma de tornar o elemento bloco/inline-block */
}

/* Ícone 1: localizado no sprite na posição 0, 0 */
.icon-home {
  background-position: 0 0;
}

/* Ícone 2: localizado no sprite na posição -40px, 0 (por exemplo, se houver um espaço de 8px entre ícones) */
.icon-settings {
  background-position: -40px 0;
}

Vantagens:

• Redução de pedidos HTTP: Em vez de vários pedidos, o navegador precisa carregar apenas um arquivo sprite, o que reduz o tempo de carregamento da página.
• Caching: Um único arquivo grande é cacheado em vez de múltiplos pequenos.

Desvantagens:

• Complexidade de manutenção: Ao adicionar ou alterar imagens, é necessário recriar o sprite e atualizar as coordenadas CSS.
• Não é adequado para imagens grandes ou muito diferentes.