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.

Ryu Sprites

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.

Sprites do Menu

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.

Sprite Cut

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.

30 Comments ,

30 Responses to “Usando CSS Sprites para fazer seu site carregar mais rápido”

  1. Cesar Leite 12/06/2008 at 14:46 #

    Muito maneiro Richard.. show de bola mesmo.. parabéns!

    Responder

    keila100%neymar Reply:

    legal
    te amo neymar linndo d+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

  2. Leonardo Wandré 10/07/2008 at 17:13 #

    Muito claro e objetivo, para iniciantes como eu começa a tirar a venda dos olhos

    Você está de parabens

    Responder

  3. Willian Aguiar (Natyvw) 29/07/2008 at 11:35 #

    Vlw pela dica, eu estava muito querendo aprender isto.

    Responder

  4. Cesinha 06/08/2008 at 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

  5. flavio 08/02/2009 at 21:14 #

    pena que na merda do ie6 a imagem some!

    Responder

  6. Robson Baptista Pinto 25/03/2009 at 23:47 #

    Olá parabéns pelo texto bastante esclarecedor e uma dica indispensavel para otimização de sites.

    Responder

  7. Download e Tudo Mais 27/04/2009 at 13:39 #

    Maravilha! ficou uma feleza!!valew!!!

    Responder

  8. Gabriel Mineiro 15/09/2009 at 20:14 #

    Lecal! Hauhauhauhauhauhhau! Vou usar isso no blog que vou lançar ano que vem. (Ou antes se possível!)

    Responder

  9. Haz 01/12/2009 at 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

  10. Sites TopTec 14/04/2010 at 11:26 #

    muito obrigado por compartilhar conosco, e ainda por cima é compativel com XHTML 1.1 e CSS 3.0

    Responder

  11. caco 30/06/2010 at 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

  12. Thúlio Jardim 16/07/2010 at 17:14 #

    Adorei. Muito útil a dica!

    Responder

  13. Thúlio Jardim 16/07/2010 at 17:34 #

    Como é que eu sei a posição exata na imagem? Supondo o uso do Photoshop…

    Responder

  14. Thúlio Jardim 16/07/2010 at 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

  15. Felippe 25/08/2010 at 23:05 #

    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

  16. Danilo Ramos 14/09/2010 at 20:39 #

    Wow ! show de bola essa dica, otimiza mesmo!

    Responder

  17. Luan Ramos 29/09/2010 at 16:56 #

    Principalmente em Projetos grandes né! ajuda muito ‘css sprite’, Deixando o site mais leve e contribuindo com ‘SEO’ também =/.

    @LuanAPiki

    Responder

  18. alan 07/11/2010 at 01:03 #

    valeu camarad, mais uma vez arrebentadando!

    Responder

  19. Higor 26/04/2011 at 18:47 #

    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

  20. Le Chambly 06/03/2012 at 11:57 #

    Fantastica a dica, muito obrigado…. ajudou muitoooooo

    Responder

  21. Diovalda 28/05/2012 at 10:52 #

    i hope you keep posting those wonderful articles, thanks a lot.http://www.kitsucesso.com

    Responder

  22. wellington 13/06/2012 at 15:28 #

    Mandou muito bem na explicação

    Thanks

    Responder

  23. Stanley Sathler 27/08/2012 at 00:04 #

    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

  24. Silvio Clécio 31/12/2012 at 17:33 #

    Ninjaria total! :)

    Responder

  25. Alan 01/03/2013 at 16:49 #

    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

Trackbacks/Pingbacks

  1. CSS Sprites – O que são, porque são importantes e como utilizar - 09/02/2010

    [...] Usando CSS Sprites para fazer seu site carregar mais rápido [...]

  2. Como usar CSS Sprites? - 20/07/2010

    [...] Richard Barros – Usando CSS Sprites para fazer seu site carregar mais rápido [...]

  3. Trabalhando com CSS Sprites | Blog da Destaque Studio - 15/10/2011

    [...] Fonte: http://www.richardbarros.com.br/blog/design/usando-css-sprites-para-fazer-seu-site-carregar-mais-rap… Publicado em Sem categoria por admin. Marque Link Permanente. [...]

Leave a Reply