Sprite com CSS

Para aqueles que se preocupam em otimizar seus sites uma boa técnica é juntar várias pequenas imagens em uma só, chamada Sprite, para diminuir a quantidade de requisições feitas ao servidor e o tempo de download da página. Através do CSS seleciona-se os pontos dessa imagem que devem ser mostrados. Já falei aqui no blog sobre como posicionar o Sprite (Rollover com Sprite), mas não falei sobre como produzir a imagem. Pelo menos não ainda.

Há outras opções além de fazer na unha usando ferramentas de edição de imagens. É possível fazer o Sprite de forma automática e on-line como no SpriteMe, Spritemapper, Sprite Cow, SmartSprites, Gerador de Sprites CSS e o CSS Sprites Generator. Aqui eu vou mostrar um pouquinho do SpriteMe funcionando.

Inicialmente é necessário instalar a ferramenta adicionando-a aos favoritos, como na imagem a seguir:

Basta ir à página web e abrir o SpriteMe. Ele ninjamente agrupa as imagens encontradas na página e então você pode gerar Sprites a partir desses grupos ou fazer seu próprio grupo clicando em "new sprite".

Na página acima o SpriteMe formou dois grupos: um com cinco imagens do rodapé e outro com a logo. Clicando em "make sprite" no primeiro grupo é gerado o Sprite com todas as imagens do rodapé:

É importante fazer o download da imagem e hospedá-la no servidor. Não tente usar o link gerado porque ele é apenas temporário.