Esta técnica é aconselhável tanto para sites com layout de muitas imagens como para sites com menus animados. Sabe quando você passa o mouse sobre um item do menu de um site e tem que esperar a imagem que corresponde ao “botão pressionado” carregar? Ou quando o conteúdo em texto do site já apareceu, mas ainda fica uma eternidade até carregar imagem por imagem? É exatamente isso que vamos tentar evitar por aqui.
Veja, por exemplo, o tempo que alguns sites conhecidos levam para carregar o HTML e outros arquivos como imagens, css e javascript.
- Yahoo: 10% do tempo carregando HTML e 90% do tempo em outras requisições.
- eBay: 5% do tempo carregando HTML e 95% do tempo em outras requisições.
- Youtube: 9% do tempo carregando HTML e 91% do tempo em outras requisições.
Já dá para ter uma idéia de que diminuir o número e o tamanho das requisições poderá reduzir significamente o tempo de carregamento de um website.
Os Sprites
Sprite [en] é um frame de uma animação qualquer, termo muito utilizado no desenvolvimento de jogos 2d, em que todas as poses dos personagens eram gravadas em um só Bitmap para não sobrecarregar o hardware limitado da época. A programação do jogo só tinha o trabalho de dizer qual dos sprites ia aparecer fornecendo apenas o X, Y, altura e largura correspondente no Charset do personagem.

Se a técnica já trazia uma otimização considerável para os processadores de games da época, podemos ser no mínimo otimistas com os ganhos pro desenvolvimento web.
Criando seu próprio CSS Sprite
A criação dos CSS Sprites é muito simples, abra o seu editor de imagens e unifique todos os frames do menu em uma única figura (ou separando por ítem de menu, por exemplo – crie seu próprio critério). Neste exemplo específico trabalharemos com os Sprites de todos os ítens de menu em uma única imagem. Veja abaixo.
![]()
Se fossemos carregar cada imagem desse menu separadamente teríamos 6 requisições e 18kb no total, e com tudo em uma só imagem o tamanho cai para 14kb. Uma notável otimização.
Partindo pro CSS
O código HTML do exemplo é bem simples, criaremos um menu em lista e colocaremos a imagem como background (plano de fundo) e ao definirmos largura e altura fixa para cada item de menu, só aparecerá o sprite correspondente. Veja abaixo.

A propriedade CSS responsável pela mudança dos sprites é a background-position. Ela definirá em que posição o background será exibido, e a partir daí, basta ver na figura onde está o X e o Y do sprite desejado.
/* todos os links dentro do menu terão a imagem dos sprites
como background */
#menu li a { background: url(images/sprites.jpg) no-repeat; display: block; width: 120px; height: 60px; }/* define para cada item a posição em que o sprite está na
imagem /*
#menu li .home { background-position: 0px 0px; }
#menu li .home:hover { background-position: 0px -60px; }
#menu li .textos { background-position: 120px 0px; }
#menu li .textos:hover { background-position: 120px -60px; }
#menu li .contato { background-position: 240px 0px; }
#menu li .contato:hover { background-position: 240px -60px; }
Clique aqui para ver o exemplo online.
Pense também na vantagem na hora de editar um layout, basta abrir uma única imagem no Photoshop, fazer todas as alterações e salvar. CSS Sprites deixa o site mais leve pro usuário, da uma folga maior pro servidor e ainda facilita a manutenção pro designer.





Cesar Leite em 12/06/2008 às 14:46
Muito maneiro Richard.. show de bola mesmo.. parabéns!
[Responder]
Leonardo Wandré em 10/07/2008 às 17:13
Muito claro e objetivo, para iniciantes como eu começa a tirar a venda dos olhos
Você está de parabens
[Responder]
Willian Aguiar (Natyvw) em 29/07/2008 às 11:35
Vlw pela dica, eu estava muito querendo aprender isto.
[Responder]
Cesinha em 06/08/2008 às 15:36
Excelente post, já tinha ‘ouvido falar’ sobre o assunto, mas só agora parei pra ler, e entendi mto bem o conceito desta técnica.
Feed assinado, c/ certeza!
[Responder]
flavio em 08/02/2009 às 21:14
pena que na merda do ie6 a imagem some!
[Responder]
Robson Baptista Pinto em 25/03/2009 às 23:47
Olá parabéns pelo texto bastante esclarecedor e uma dica indispensavel para otimização de sites.
[Responder]
Download e Tudo Mais em 27/04/2009 às 13:39
Maravilha! ficou uma feleza!!valew!!!
[Responder]
Gabriel Mineiro em 15/09/2009 às 20:14
Lecal! Hauhauhauhauhauhhau! Vou usar isso no blog que vou lançar ano que vem. (Ou antes se possível!)
[Responder]
Haz em 01/12/2009 às 10:40
Muito bom artigo, parabéns!
Comecei a usar isso com mais força depois de ver uma matéria na revista W. Ajuda bastante, não só pra otimizar e acelerar os sites, mas pra organizar as imagens melhor. :)
[Responder]
CSS Sprites – O que são, porque são importantes e como utilizar em 09/02/2010 às 08:46 - Pingback
[...] Usando CSS Sprites para fazer seu site carregar mais rápido [...]
Sites TopTec em 14/04/2010 às 11:26
muito obrigado por compartilhar conosco, e ainda por cima é compativel com XHTML 1.1 e CSS 3.0
[Responder]
caco em 30/06/2010 às 16:25
Legal a dica! Já dei uma garibada no meu blog, e de 50 segundos caius para 20. Pois é , era uma carroça devido ao excessivo número de imagens e css. Nas imagens eu arrumei com as dicas do Richard, e o css tô indo mais devagar. Valeu pelas dicas. Um abraço!
[Responder]
Thúlio Jardim em 16/07/2010 às 17:14
Adorei. Muito útil a dica!
[Responder]
Thúlio Jardim em 16/07/2010 às 17:34
Como é que eu sei a posição exata na imagem? Supondo o uso do Photoshop…
[Responder]
Thúlio Jardim em 16/07/2010 às 18:25
Eu entendi perfeitamente como funciona. Mas tô tendo dor de cabeça para aplicar o esquema numa gadget do blogger. Teria como você ver esta imagem » http://dl.dropbox.com/u/3883715/KY-RSS_Twitter_Favoritos.png « e me dizer como seria, se não for te pedir demais, o código???
Eu agradeceria profundamente.
PS – Se você visitar o meu blog, entenderá que já há essa “mudança” quando se passa o mouse. O que achei interessante, é transformar várias imagens numa única.
[Responder]
Como usar CSS Sprites? em 20/07/2010 às 13:14 - Pingback
[...] Richard Barros – Usando CSS Sprites para fazer seu site carregar mais rápido [...]