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.
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.
