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.