Otimize seu site usando CSS Sprite
O que é um Sprite?
Sprite é uma técnica utilizada originalmente em jogos 2-D que tem por principio colocar todas as ações de um personagem (movimentos) em uma só imagem, e só mudar a posição que deve ser mostrada na tela. Quando foi criada essa técnica, o hardware era muito limitado, por isso havia a necessidade de otimizar os gráficos para não sobrecarregar o processador.
Exemplo de Sprite do jogo Super Star Wars: The Empire Strikes Back, para SNES
No desenvolvimento Web, os Sprites são amplamente utilizados em ícones e em menus rollover.
Por que utilizar Sprites
Vários sites, como Google e Yahoo, utilizam essa prática para otimizar o carregamento das imagens usadas. Ao invés de requisitar 15 imagens, é feita a requisição de uma só imagem. Isso pode parecer muito pouco de for pensar em 10, 20 acessos, mas pense em milhões de acessos simultâneos? A economia de requisições neste caso é enorme.
A utilização de Sprites trás também a facilidade de alteração do tema do site. Imagine um site com 15 icones: Para mudar o tema, seria necessário mudar 1 por 1 os ícones. Utilizando os Sprites, seria necessário apenas mudar uma imagem que contém todos os ícones.
Como usar essa técnica
Vou demonstrar 2 exemplos do uso da técnica, um para ícones e outro para menus rollover.
O primeiro passo é criar o Sprite contendo as imagens necessárias. Para este exemplo, criei 4 estágios de botões (bem simples, diga-se de passagem):
Menu Sprite
Feito isso, vamos colocar a mão na massa e fazer o HTML.
<ul> <li id="opcao1"><a href="#">Opção 1</a></li> <li id="opcao2"><a href="#">Opção 2</a></li> <li id="opcao3"><a href="#">Opção 3</a></li> </ul>
Cada item tem definido um ID, pois cada um terá um fundo (ícone) diferente.
Agora que temos o HTML, podemos estilizar usando CSS. Para este caso, usaremos a seguinte definição, abstraindo os estilos comuns e mostrando apenas o necessário para fazer a “mágica”:
ul li{background:url(menu_sprite.png) 0px 0px no-repeat;} ul li#opcao1:hover{background-position:-70px 0px;} ul li#opcao2:hover{background-position:-140px 0px;} ul li#opcao3:hover{background-position:-210px 0px;}
Explicando tudo
ul li: Aqui eu defino o background padrão para os botões do menu e posiciono ele na posição (0px, 0px), pois é essa a posição da imagem que eu quero que apareça. Cabe aqui explicar a sintax da propriedade background:
É a combinação de algum ou todos os valor para background-color, background-image, background-repeat, background-attachment e background-position
Como a mesma regra se aplica a todos os links, só alterando a posição, vou colocar a explicação somente para a primeira opção.
ul.li#opcao1:hover: Aqui se aplica a propriedade background-position{ -70px 0px; }, ou seja, deslocar a imagem de background 70 pixels para a esquerda quando o mouse estiver sobre o li, fazendo aparecer a outra imagem do sprite.
Dessa maneira, temos um menu rollover usando apenas uma imagem e a prática do CSS Sprite, com o seguinte resultado:
Menu Sprite com o rollover
O exemplo desta técnica está disponível aqui
Links interessantes sobre o assunto:
Leia também:
19 de novembro de 2009 at 08:36
Já conhecia, porém não sabia que se chamava “Sprite”. Aconselho a todos que desenvolvem página web a utilizar desta mesma técnica!