CSS Sprites

Publicado em: 25/11/2009

Aos links do menu de navegação mostrado ao lado foi adicionado o efeito rollover de imagens com uso da pseudoclasse CSS :hover. Passe o mouse sobre os links para verificar o efeito. O menu não é funcional, pois destina-se apenas a servir de meio auxiliar para o entendimento do termo CSS Sprites.

Os primeiros efeitos rollover desenvolvidos com CSS adotavam a técnica de criar uma imagem para ser adicionada como fundo do elemento link em seu estado de repouso e obter o efeito fazendo a mudança para outra imagem a ser mostrada no estado over, ou seja, quando o usuário passa o mouse sobre a área do elemento que contém o link

Uma imagem para o estado em repouso e outra imagem para o estado over, como mostrado a seguir.

link-menu.gif - imagem no estado do link em repouso. (3k)

link-menu-over.gif - imagem no estado over do link. (7K)

E as regras CSS para obter o efeito

#menu li a {
	... 
	background:url(imagens/link-menu.gif) 0 0 no-repeat;
	}
#menu li a:hover {
	...
	background: url(imagens/link-menu-over.gif) 0 0 no-repeat;
	}

O navegador do usuário precisa estar com as duas imagens disponíveis para o efeito funcionar, ou melhor dizendo, as duas imagens devem ter sido baixadas do servidor, sob pena de haver um atraso no efeito motivado pelo fato da imagem para o estado em repouso já ter sido baixada e aquela para o efeito over ainda não.

Além disso, a cada imagem na página uma requisição HTTP é feita ao servidor. Por essas razões a técnica mostrada para obtenção do efeito rollover com CSS está ultrapassada e atualmente usa-se construir uma só imagem contendo as duas e usar a propriedade background-position para controlar a exibição de parte da imagem única.

Observe a imagem a seguir e as regras CSS modificadas para obter o mesmo efeito.

menu.gif - imagem no estado do link em repouso. (10k)

E as regras CSS para obter o efeito

#menu li a {
	... 
	background-image: url(imagens/menu.gif);
	background-position: 0 0;
	background-repeat: no-repeat;
	}
#menu li a:hover {
	...
	background-position: 0 -60px 
	}

Ou a forma abreviada para declarações de background.

#menu li a {
	... 
	background: url(imagens/menu.gif) 0 0 no-repeat;
	}
#menu li a:hover {
	...
	background-position: 0 -60px; 
	}

Essa técnica de construção de uma imagem para dois estados do link é também usada para conter o estado do link visitado e do link corrente, ou uma combinação dos quatro estados conforme a necessidade específica de cada projeto. No menu da navegação principal do meu blog usei uma só imagem para os estados dos links em repouso, over e corrente. A imagem usada é mostrada a seguir.

Mas afinal o que tudo isso tem a ver com CSS Sprites?

CSS Sprites é uma generalização dessa técnica e consiste em se colocar as várias imagens de fundo usadas no template do site em um arquivo único e com a declaração CSS background-position mostrar em cada elemento que recebe uma imagem de fundo uma parte da imagem.

Conclui-se de imediato que imagens de fundo que se repetem em ambos os eixos x e y não podem ser usadas com a técnica CSS Sprites. Imagens que se repetem em apenas um dos eixos podem ser inseridas na imagem única desde que essa seja convenientemente criada.

A ferramenta on-line SpriteMe

Existe uma ferramente on-line denominada SpriteMe que se destina a examinar uma página aberta no navegador e analisá-la para aplicação da técnica CSS Sprite.

A ferramenta analisa as imagens de fundo existentes na página e apresenta ao desenvolvedor uma lista daquelas que, segundo os critérios da ferramenta, poderiam ser reunidas em uma imagem única. Apresenta também uma lista daquelas que, segundo os critérios da ferramenta, não são indicadas para compor a imagem única.

O desenvolvedor deverá analisar as sugestões da ferramenta e escolher, segundo seus critérios, as imagens que deverão ser reunidas em uma só imagem, arrastando-as de cada uma das lista para um box. Feito isso clicar um botão para acionar a ferramenta que retornará um endereço para a imagem única e as regras CSS para posicionar as imagens na página.

Observe a seguir alguns screenshots da ferramenta e uma explicação mais detalhada do seu funcionamento.

A ferramenta SpriteMe é um bookmarklet (ver definição na Wikipedia), para instalar abra o site da ferramenta clique e arraste o link SpriteMe para a barra de favoritos do seu navegador ou clique com o botão direito do mouse no link e adicione o URL do link nos Favoritos.

Uma vez "instalada" a ferramenta ela está pronta para o uso.

Abra uma página web e clique no link SpriteMe instalado como mostrado na figura anterior ou vá ao menu de favoritos e abra SpriteMe se optou pela instalação nos Favoritos. Feito isso abre-se uma janela pop-up da ferramenta no canto superior direito da página conforme mostrado na figura a seguir.

Na figura mostrada abrimos a home page do site do Maujor e acionamos a ferramenta. Acompanhe as explicações pelos números na figura.

1. A ferramenta informa quantos conjuntos de imagens ela sugere para Sprite na página. Clicar o link "share your savings" autoriza a ferramenta a ferramenta a colocar para visualização pública o resultado da sua utilização em um log que pode ser visualizado no link "Savings" do menu principal da ferramenta (não mostrado nas figuras). Ver o link Savings da ferramenta.
2. Box contendo o endereço das imagens para o Sprite sugerido. Caso a ferramenta sugira mais de um grupo de imagens aparecerão tantos boxes quantos forem os grupos sugeridos.
   Clicar o sinal + que precede cada endereço da imagem mostra em qual elemento HTML a imagem está aplicada e qual a regra background para ela.
   Passar o mouse sobre o endereço das imagens faz com que abra uma janela pop-up à direita mostrando a imagem.
3. Clicar o botão "make sprite" faz com que a ferramenta crie uma imagem única contendo as imagens que estão no box e gere as regras CSS necessárias para posicionar as imagens na página. Na figura a seguir mostramos o resultado do clique nesse botão.
4. Box contendo o endereço das imagens de fundo sugeridas como não candidatas à Sprite.
5. Quando houver mais de um grupo de imagens sugeridas para sprite, clicar o botão "make all" equivale a "make sprite" para todos os grupos de uma só vez.
6. Clicar o botão "new sprite" abre um box vazio para que o desenvolvedor em não concordando com as sugestões da ferramenta possa criar seu próprio grupo de imagens para Sprite. Basta arrastar e soltar o endereço das imagens contidas nos boxes das sugestões da ferramenta para esse novo box vazio que foi aberto e criar sua prórpia lista de imagens para Sprite.
   Além disso você pode arrastar e soltar imagens entre os boxes iniciais sugeridos pela ferramenta, sem necessidade de abrir novo box vazio.
7. Clicar o botão "export CSS" abre uma página contendo o endereço da imagem única e as novas regras CSS conforme mostrado na segunda figura a seguir.

Observe na figura a seguir o resultado do clique no botão "make sprite".

Nessa figura informa-se o número de requisições HTTP eliminadas com o Sprite e quantos Kb a mais ou a menos a imagem única difere das imagens individuais.

Observe na figura a seguir o resultado do clique no botão "export CSS".

A ferramenta mostra o link para a imagem única gerada. Abra a imagem, salve e hospede no seu domínio, não use o endereço fornecido para linkar à sua CSS pois ele é temporário. Além do link as novas regras CSS para posicionar as imagens de fundo são fornecidas. Copie as regras e substitua as antigas (aparecem riscadas). Não esqueça de trocar o endereço da imagem para aquele no qual você hospedou a imagem no seu servidor.

É isso. Agora você sabe o que é CSS Sprite, conhece a ferramenta MakeSprite e está em condições de otimizar seus sites para imagens de fundo. Bom proveito!