CSS Sprites - O que são?

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:

css
#ex1{background:url(img/sprite.png) 0 -30px no-repeat;
height: tamanho da imagem exemplo1.gifwidth: largura da imagem  exemplo1.gif}#ex2{background:url(img/sprite.png) 0 -84px no-repeat;
height: tamanho da imagem  exemplo2.pngwidth: largura da imagem exemplo2.png} #ex3{background:url(img/sprite.png) 0 -84px no-repeat;
height: tamanho da imagem exemplo3.jpgwidth: largura da imagem exemplo3.jpg} 

TrackBack URI for this entry

Rodrigo Novembro 03, 2008	Mais uma vez um excelente artigo, realmente as sprites css poderiam ser mais utilziadas e com muitas vantagens quer para o utilizador como para o dono da pagina de internet
Filipe Novembro 12, 2008	Algo que se devia ver mais vezes no desnvolvimento de website mas que não se vÊ!!