03 Novembro 2008 Escrito por Gonçalo Martins

Qual foi a pessoa que desenvolve sites de Internet que não ouviu falar ou usou CSS sprites?
A resposta é: "Bastantes!!"

As sprites CSS deviam ser um standard no que toda ao desenvolvimento de Websites. Porque, perguntam vocês?

Porque utilizar sprites CSS permite juntar numa única imagem, N imagens. Confuso?

 

Ora um exemplo:

Vamos imaginar um determinado Website, que possui 10 imagens, imagens estas que abrem em todas as páginas (ou quase todas) desse mesmo site.

Para um browser abrir estas 10 imagens têm que realizar 10 pedidos HTTP ao servidor. Ora se cada pedido HTTP têm um custo, vamos supor 100ms, ao fim de 10 pedidos HTTP o browser gastou 1 segundo. Segundo este que poderia ter poupado caso tivesse realizado unicamente um pedido HTTP.

Ah 1 segundo... que é isso? Um segundo aqui, um segundo ali....

É um facto adquirido que na web moderna os browsers passam entre 10 a 30% do seu tempo a realizar o download do HTML, e 60 a 95% do restante tempo a realizarem pedidos HTTP, dos elementos no html (imagens, javascript, css,...). Reduzir o numero de pedidos HTTP é a forma mais simples de reduzir o tempo de resposta e aumentar a performance de qualquer website!

 

Como funcionam os sprites CSS?

Como já disse, os sprites consistem em colocar numa grande imagem "todas" as imagens mais pequenas do seu website. Um exemplo de um sprite CSS pode ser visto aqui no weblouca, onde a utilizo para as imagens do header.

Embora o tamanho desta imagem (sprite) seja considerável, é mesmo assim mais reduzida que a soma das imagens que a compõem.

 

Como Utilizar?

Pode criar o seu sprite CSS facilmente com a seguinte ferramenta: Css sprite generator

Basta colocar as imagens que deseja que façam parte da sprite num arquivo .zip e enviar para o Css sprite generator. Após isto o Sprite generator irá fornecer-lhe as coordenadas a utilizar quando desejar realizar o load das suas imagens via CSS.

 

Vamos supor que envio as imagens exemplo1.gif, exemplo2.png e exemplo3.jpg, para a ferramenta anterior.

A ferramenta fornece uma sprite, à qual vamos dar o nome de sprite.png.

O sprite generator fornece ainda as "coordenadas" a utilizar, vamos imaginar que o output foi o seguinte:

.sprite-exemplo1 { background-position: 0 -30px; } 
.sprite-exemplo2 { background-position: 0 -84px; } 
.sprite-exemplo3 { background-position: 0 -137px; } 

 

Agora o código CSS seria algo do género: