Sprite é uma técnica utilizada originalmente em jogos 2-D  que tem por principio colocar todas as ações de um personagem (movimentos) em uma só imagem, e só mudar a posição que deve ser mostrada na tela. Quando foi criada essa técnica, o hardware era muito limitado, por isso havia a necessidade de otimizar os gráficos para não sobrecarregar o processador.

Exemplo de Sprite do jogo Super Star Wars: The Empire Strikes Back, para SNES

No desenvolvimento Web, os Sprites são amplamente utilizados em ícones e em menus rollover.

Por que utilizar Sprites

Vários sites, como Google e Yahoo, utilizam essa prática para otimizar o carregamento das imagens usadas. Ao invés de requisitar 15 imagens, é feita a requisição de uma só imagem. Isso pode parecer muito pouco de for pensar em 10, 20 acessos, mas pense em milhões de acessos simultâneos? A economia de requisições neste caso é enorme.

A utilização de Sprites trás também a facilidade de alteração do tema do site. Imagine um site com 15 icones: Para mudar o tema, seria necessário mudar 1 por 1 os ícones. Utilizando os Sprites, seria necessário apenas mudar uma imagem que contém todos os ícones.

Como usar essa técnica

Vou demonstrar 2 exemplos do uso da técnica, um para ícones e outro para menus rollover.

O primeiro passo é criar o Sprite contendo as imagens necessárias. Para este exemplo, criei 4 estágios de botões (bem simples, diga-se de passagem):

Menu Sprite

Feito isso, vamos colocar a mão na massa e fazer o HTML.

<ul>
	<li id="opcao1"><a href="#">Opção 1</a></li>
	<li id="opcao2"><a href="#">Opção 2</a></li>
	<li id="opcao3"><a href="#">Opção 3</a></li>
</ul>

Cada item tem definido um ID, pois  cada um terá um fundo (ícone) diferente.

Agora que temos o HTML, podemos estilizar usando CSS. Para este caso, usaremos a seguinte definição, abstraindo os estilos comuns e mostrando apenas o necessário para fazer a “mágica”:

ul li{background:url(menu_sprite.png) 0px 0px no-repeat;}
ul li#opcao1:hover{background-position:-70px 0px;}
ul li#opcao2:hover{background-position:-140px 0px;}
ul li#opcao3:hover{background-position:-210px 0px;}

Explicando tudo

ul li: Aqui eu defino o background padrão para os botões do menu e posiciono ele na posição (0px, 0px), pois é essa a posição da imagem que eu quero que apareça. Cabe aqui explicar a sintax da propriedade background:

É a combinação de algum ou todos os valor para background-color, background-image, background-repeat, background-attachment e background-position

Como a mesma regra se aplica a todos os links, só alterando a posição, vou colocar a explicação somente para a primeira opção.

ul.li#opcao1:hover: Aqui se aplica a propriedade background-position{ -70px 0px; }, ou seja, deslocar a imagem de background 70 pixels para a esquerda quando o mouse estiver sobre o li, fazendo aparecer a outra imagem do sprite.

Dessa maneira, temos um menu rollover usando apenas uma imagem e a prática do CSS Sprite, com o seguinte resultado:

Menu Sprite com o rollover

O exemplo desta técnica está disponível aqui

Links interessantes sobre o assunto:

CSS Sprite Generator

HTMLDog

Leia também:

1. CSS3: propriedade box-shadow