Sgobin Studio - Sites e Design

artigos e notícias

Sprites e a performance de um site

por Sgobin

Conheça os duendes (sprites) e saiba como eles podem melhorar a performance do seu site. Além disso veja como criá-los por CSS/THML em nosso tutorial.

Mas o que são os duendes?

Os duendes que nos interessam hoje não são os homenzinhos que algumas pessoas vêem, os elfos e fadas do folclore europeu. Mas os "sprites" criados na década de setenta para serem usados em videogames, ou seja, uma imagem bi-dimensional usada como integrante de uma cena maior.

Estes sprites eram uma técnica de composição rápida de imagens 2D utilizando um hardware especial nos videogames. Uma imagem menor poderia se mover sobre a maior, se a camera ficasse sobre a imagem menor cria-se aquela ilusão de movimento com o fundo. Alguém se lembrou dos irmãos encanadores?

Uma das técnicas utilizadas valia-se de colocar em um grid de uma só imagem centenas de pequenas outras imagens com as variações de movimento dos personagens e quando necessário era só acessar a imagem desejada usando as coordenadas dela no grid, mudando-se as coordenadas, cria-se o movimento.

Dos videogames para a Internet

Deixando a nostalgia de lado, esta técnica pode ser utilizada hoje em sites de internet para aumentar a performance, mellhorando a "responsividade" e diminuindo o tempo de espera do usuário. Segundo o Yahoo 80% do tempo de resposta do usuário é gasto no "front-end", ou seja, esperando o download das imagens, scripts e outros componentes da página.

Quando você entra em uma página HTML, o browser lê o conteúdo e encontra uma imagem. Então ele checa se a imagem já foi baixada, se não, faz o pedido (http request) dessa imagem ao servidor. O mesmo acontece com cada componente daquela página. Com a complexidade das páginas hoje em dia, imagine a quantidade de pedidos necessários para renderizá-la por completo. Diminuir a quantidade de http requests é uma maneira de aumentar a performance do seu site. Hoje em dia, o design das páginas web utiliza-se muito de imagens, são fundos, figuras de menus, ícones, etc. O uso se sprites é uma maneira de diminuir e muito o número de http requests para as imagens.

O uso da técnica de sprites abre uma infinidade de possibilidades, você pode utilizar em ícones, fundos e botões de menu ou o que você for criativo para inventar. Veja por exemplo a imagem que o google utiliza para sprites:

Na página de resultados da busca no google, veja os sprites da imagem sendo utilizados em diversos locais na página. A imagem completa tem apenas 8KB. Como se não bastasse a diminuição dos http requests, faça o teste de recortar todos os sprites em imagens individuais e somar seus tamanhos. Você pode mesmo otimizá-los mas mesmo assim seu tamanho conjunto será maior que a imagem unida sob as mesmas condições. Isso acontece porque cada imagem deve carregar um certo header com informações sobre ela.

Esses são os benefícios de se utilizar sprites na internet, agora vamos à receita do bolo.

Usando CSS para criar menus com Sprites

Talvez o principal uso para os sprites seja em menus: eles vão aparecer em praticamente todas as páginas de seu site. Mesmo que o usuário vá utilizar apenas uma das opções, você precisa apresentar o menu completo, ou seja, todas as imagens terão que ser carregadas. Além disso, se você utiliza imagens para diferenciar os estados do menu (mouseover, ativo, visitado) você precisa de alguma maneira pré-carregar os próximos estados para que o site tenha uma resposta transparente ao usuário.

Por isso, neste exemplo, vou ensinar como criar uma barra de navegação. É um exemplo real utilizado em um dos sites criados pela SGOBIN Studio.

Vamos iniciar pelo markup do menu, para manter acessibilidade utilizamos um lista sem ordem (ul). O importante aqui é acrescentar uma classe distinta para cada um dos elementos da lista.

<ul id="nav">
	<li class="home"><a href="#">Homepage</a></li>
	<li class="produtos"><a href="#">Produtos</a>
	<li class="treinamento"><a href="#">Treinamento</a></li>
	<li class="empresa"><a href="#">A Empresa</a></li>
	<li class="contato"><a href="#">Contato</a></li>
</ul>

Com o markup pronto podemos iniciar a confecção dos estilos. Abaixo está a imagem usada para o sprite, eu tive que reduzi-la para encaixá-la no espaço do post, mas você pode conferir o tamanho original no site.

A metade superior da imagem contém os fundos para o estado "normal" do link, a metade inferior o estado para quando o mouse passa sobre o item. Vamos então constuir o menu utilizando CSS. Para identificar a lista demos a ela um id de "nav". Começamos movendo-a para a esquerda com float. Em seguida configuramos os elemento li de maneira geral, ou seja, tornamos a lista horizontal com float: left; display: inline; position: relative;. Depois tratamos das tags de link, aqui tornamos ela em bloco, definimos uma altura fixa, deixamos todas na mesma linha e por último sumimos com o texto para que apenas a imagem apareça, respectivamente: display: block; height: 60px; float: left; text-indent: -9999px;

O código dessa primeira fase ficou assim:

ul#nav			{ float: left; }
ul#nav li		{ float: left; display: inline; position: relative; }
ul#nav li a		{ display: block; height: 60px; float: left; text-indent: -9999px;}

Precisamos então formatar cada um dos ítens individualmente, todos eles usarão a mesma imagem como fundo, mas posicionada de forma específica para cada um deles. Veja um pedaço do código como exemplo:

ul#nav li.home a     { width:131px; background:url(../imagens/menu.png) 0 0; }
ul#nav li.produtos a { width:114px; background:url(../imagens/menu.png) -131px 0; }
ul#nav li.clientes a { width:102px; background:url(../imagens/menu.png) -245px 0; }
...

O seletor CSS vai agir sobre o elemento <a> dentro de um item de lista <li> com classe "home"; em uma lista não ordenada de id nav ul#nav. Trabalhando de forma específica você diminui as chances de um estilo influienciar de maneira inesperada em outro.

Neste estilo, definimos que o link para a homepage terá largura de 131px, e posicionamos a imagem de fundo (menu.png) no canto superior esquerdo. Para o segundo item do menu, li.produtos movemos a imagem de fundo para a esquerda -131px, ou seja, exatamente a largura do primeiro item. Pode parecer confuso se você não está familiarizado ao box-model do CSS, veja o diagrama abaixo:

Na figura acima o quadro magenta representa o box do formado pelas dimensões de ul#nav li.home a na parte superior e ul#nav li.produtos a na parte inferior. O quadro cinza é nossa imagem (menu.png). Agora fica fácil perceber que a posição da imagem de brackground é relativa a margem superior esquerda do elemento. Quando movemos a imagem de fundo -131px na horizontal, estamos movendo-a para a esquerda. Continuamos movendo o fundo a medida que formatamos os outros botões da barra. No final teremos no CSS:

ul#nav li.home a        { width:131px; background:url(../imagens/menu.png) 0 0; }
ul#nav li.produtos a    { width:114px; background:url(../imagens/menu.png) -131px 0; }
ul#nav li.clientes a    { width:102px; background:url(../imagens/menu.png) -245px 0; }
ul#nav li.treinamento a { width:138px; background:url(../imagens/menu.png) -347px 0; }
ul#nav li.empresa a     { width:114px; background:url(../imagens/menu.png) -485px 0; }
ul#nav li.contato a     { width:105px; background:url(../imagens/menu.png) -599px 0; }

Terminamos o menu. Agora vamos adicionar o "hover state". Quando o mouse passar por sobre o item do menu, a imagem de fundo muda. Para a nossa imagem, basta apenas alterar a posição e exibir a metade inferior da imagem. Veja abaixo o exemplo para os dois primeiros itens:

ul#nav li.home a:hover     { width:131px; background:url(../imagens/menu.png) 0 60px; }
ul#nav li.produtos a:hover { width:114px; background:url(../imagens/menu.png) -131px 60px; }
...

As mudanças foram bem simples: adicionamos a:hover a cada um dos seletores CSS e mudamos a posição do brackground subindo a imagem 60px. Você pode perguntar porque simplesmente não utilizamos background-position ao invés de repetir a declaração da imagem e largura. É que já tivemos a experiência do browser "perder" a imagem, o que foi resolvido "redeclarando" o background completo.

Esse é o tipo de código que você vai querer ter sempre a mão na hora de utilizar para reutilizar.

As imagens e animação dos "mariozinhos" são desse site e a imagem do google você pode encontrar no CSS de qualquer página de busca dele.