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.

Compartilhe: