CSS Sprite – Vários Botões com apenas uma imagem
Uma excelente maneira de se diminuir o número de hits (requisições de clientes ao servidor) ao seu site e deixá-lo mais leve é adotar este conceito.
Trata-se de usar somente uma imagem com todos os botões que você irá utilizar em seu site e programar seu css para mostrar apenas uma pequena parte da imagem correspondente para cada botão.
Isto é possível através do posicionamento de background (background-position).
Por exemplo :
#botao1{
background:url(/images/botoes.png) -50px 10px no-repeat;
}
Irá mostrar somente o quadrante determina por (-50px 10px) no background do botão com id “botao1″.
O trabalho é mapear a imagem e saber as coordenadas de cada pedaço que você quer usar, porém recentemente foi criada uma ferramenta para dar auxílio nesta árdua tarefa, trata-se do Sprite Creator – http://www.floweringmind.com/sprite-creator/, acesse o site e suba sua imagem, selecione o pedaço que você quer e automaticamente ele gera para você o código CSS com as respectivas coordenadas.
Diminuindo o número de imagens carregadas em seu site, você diminui o processamento e o consequentemente seu site fica mais leve, rápido e sem exigir muito do servidor, porém se o navegador do cliente não fizer cache, esta solução não adiantará muito.
Até mais,
Já apliquei as dicas no meu blog. Ajudaram bastante. Até a próxima!