Usando CSS Sprites para fazer seu site carregar mais rápido
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.
Muito maneiro Richard.. show de bola mesmo.. parabéns!
Responder
keila100%neymar Reply:
legal
te amo neymar linndo d+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Muito claro e objetivo, para iniciantes como eu começa a tirar a venda dos olhos
Você está de parabens
Responder
Vlw pela dica, eu estava muito querendo aprender isto.
Responder
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
pena que na merda do ie6 a imagem some!
Responder
Olá parabéns pelo texto bastante esclarecedor e uma dica indispensavel para otimização de sites.
Responder
Maravilha! ficou uma feleza!!valew!!!
Responder
Lecal! Hauhauhauhauhauhhau! Vou usar isso no blog que vou lançar ano que vem. (Ou antes se possível!)
Responder
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
muito obrigado por compartilhar conosco, e ainda por cima é compativel com XHTML 1.1 e CSS 3.0
Responder
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
Adorei. Muito útil a dica!
Responder
Como é que eu sei a posição exata na imagem? Supondo o uso do Photoshop…
Responder
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
cara gostei muito desse seu topico sobre CSS Sprites, e ja estou usando, so que fiz um teste qui usando uns comando mais profundos e não deu certo.
Poderia dar exemplo.
#menu li .contato {background-position: -230px 0px; }
#menu li .contato:hover {background-position: -230px -60px;}
#menu li .teste {background-position: -370px -45px; }
#menu li .teste:hover {background-position: -370px -5px; }
#menu li .teste:down {background-position: -370px -5px; }
#menu li .teste:over while down {background-position: -370px -5px; }
caro amigo o down, e o over while down num funcionam…poderia mi dar um exemplo com eles?
Responder
Wow ! show de bola essa dica, otimiza mesmo!
Responder
Principalmente em Projetos grandes né! ajuda muito ‘css sprite’, Deixando o site mais leve e contribuindo com ‘SEO’ também =/.
@LuanAPiki
Responder
vota ai galera =]
http://refresque.sprite.com.br/criesuaarte/galeriaArte.jsp?id=109735
Responder
valeu camarad, mais uma vez arrebentadando!
Responder
Uma dica é utilizar apenas dois botoes um embaixo do outro e repetir para todas os outros botoes, em vez de fazer 4.
Obrigado pela ajuda!!
Responder
Fantastica a dica, muito obrigado…. ajudou muitoooooo
Responder
i hope you keep posting those wonderful articles, thanks a lot.http://www.kitsucesso.com
Responder
Mandou muito bem na explicação
Thanks
Responder
Mandou super bem, Richard! Ótima dica mesmo. Eu já conhecia, até, mas não tinha o costume de usar por achar ser uma técnica não recomendada. Depois que vi sua explicação sobre economia de memória, vou passar a adotar sempre que possível.
Responder
Ninjaria total! :)
Responder
Cara, simples e objetivo, funcionou perfeitamente , e eu aprendi o conceito que era o que meu professor não conseguia me explicar =)
Thanks a bunch!
Só faltou falar um massete para descobrir a posição…
Responder