As css sprites (ou estampas css) são utilizadas por ninguém menos que Google, Apple, Amazon, Yahoo, YouTube e CNN, para ficar em apenas alguns dos exemplos mais expressivos. Você ainda não ouvir falar de estampas css ou css sprites ? Se você respondeu "não" e se interessa por performance de websites este artigo foi escrito especialmente para você.

No Brasil, a Emprimeiro é a única empresa de desenvolvimento e otimização de websites que utiliza esta técnica de maneira intensiva e ostensiva. Mas afinal, o que são as sprites ? Uma dica: você conhece os mapas de imagens ? Bem, este é o caminho...

O termo "sprite" (semelhante ao "espírito", "duende", ou "gnomo") tem suas origens em computação gráfica, na qual se descreveu um objeto gráfico misturado com uma cena 2-D ou 3-D através de um hardware gráfico. Dado o aumento da complexidade dos jogos de vídeo houve a necessidade de buscar técnicas inteligentes para lidar com gráficos detalhados de objetos, mantendo-se a fluência do jogo.

Para ilustrar, digite na barra de buscas do Google "sonic sprites". O resultado retornará, entre outras, esta imagem:

imagem 1

Em 2004, Dave Shea sugeriu uma simples abordagem CSS baseada em sprites, prática estabelecida por lendários jogos de vídeo do milênio passado (literalmente: antes do ano de 2000 !). Neste caso, várias imagens utilizadas em todo um site seria combinada para a, assim chamada, "imagem-master". Para tanto seria necessário utilizar a propriedade background-position do CSS para definir a posição exata das partes de imagem a ser exibida. Qualquer ação de ativação (hover, active ou focus) seria implementada utilizando a simples definição da propriedade background-position para o elemento exibido.

Ao utilizar este recurso, quando a página é carregada, nada de imagens uma a uma, mas sim apenas o carregamento da imagem master. A técnica precedente que mais se aproximava das sprites, por exemplo no efeito Javascript "onMouse" (baseada em efeitos hover), exigia duas requisições http para cada imagem, o que além de consumir tempo, criava desagradáveis efeitos de "piscar" (delay ou atraso) de imagens. Já com as "estampas css" a imagem-master é carregada com a página inteira apenas uma vez eliminando as requisições http adicionais necessárias com o Javascript.

Evidente que os benefícios a sites com grande tráfego são expressivos: se um site que exibe 20.000 (vinte mil) páginas por dia “economizar” 80ms (milissegundos) em cada uma delas, ele terá feito, ao final das contas, uma economia de 26,66 minutos diários, o que, convenhamos, é algo bastante considerável, tanto em termos de melhoria de experiência do usuário, como em relação à redução do consumo de banda de internet. Feitas as apresentações, vamos discorrer sobre como desenvolver as css sprites, não sem antes apresentar alguns exemplos desta valiosa técnica.

Veja a imagem utilizada no menu exibido na página inicial do Portal Terra:

imagem 2

Esta única imagem oferece ao usuário do site 11 (onze) hiperligações (ou links) que apresentam o efeito on mouse over. Grosso modo, poderíamos estimar, ao utilizar esta técnica, uma melhoria de performance em torno de 15% (quinze por cento), no mínimo, se comparada a outras técnicas para produzir o mesmo resultado.

Para visualizar um exemplo, simplificado, das CSS sprites no menu do Portal Terra, clique aqui.

CSS sprites permitem que você crie um arquivo único que contém todas as imagens definidas em uma grade, ou seja, apenas uma única imagem e apenas uma única requisição ao servidor, com aproximadamente o mesmo tamanho da soma dos arquivos (se colocados um a um), porque o espaço vazio é comprimido. Nesse arquivo, você irá colocar todas as "sprites" que compõem sua interface separadas por um espaço suficiente o bastante para que uma imagem não seja exibida sobre a outra. Em seguida, você define a posição da imagem - background-position - (usando os valores negativos para posicionamento vertical), incluindo um espaço suficiente ao redor de cada sprite, para que só ela apareça como background de um elemento respectivo, efetivamente mascarando o resto das imagens sprite.

Veja uma das imagens utilizadas na página principal da Emprimeiro em que utilizamos a técnica das "estampas css":

imagem 3

Veja agora a aparência da imagem na seção respectiva:

imagem 4

Veja agora os links desta seção em funcionamento nesta página.

Para obter este resultado utilizamos a imagem 3 (exibida acima) e o seguinte código CSS:

<style type="text/css">  
.empcaixaconteudo {height: auto;padding: 5px;text-align:justify;}    
#botoes-links {height: auto;margin:0;padding-top:10px;}   
#botoes-links span {background: transparent url(botoes-links.jpg) no-repeat;      
width: 46px;height: 32px;display: block;float: left;clear:both;margin: 0 15px;text-align:center;}   
#botoes-links table tr td{text-align:center;}
#botoes-links a {color: #06c;width: 75px;height: auto;display: block;text-align: center;float: left;}
#botoes-links a b {font-weight: normal;}
#botoes-links a:hover {color: #c30;}
#botoes-links span.ultramail {background-position: 0 0;}
#botoes-links span.skype {background-position: -46px 0;}
#botoes-links span.painel {background-position: -92px 0;}
#botoes-links span.hospedagem {background-position: -138px 0;}
#botoes-links span.velocidade {background-position: -185px 0;}
#botoes-links span.instituto {background-position: -231px 0;}
#botoes-links span.horde {background-position: -277px 0;}
#botoes-links span.empainel {background-position: -323px 0;}
a {font-size:12px;text-decoration:none;font-family:calibri;} 
</style>

Utilizamos, ainda, o seguinte código de formatação dentro de <body>:

<div class="empcaixa" id="links">
  <div class="empcaixatopo topolink"></div>  
     <div class="empcaixaconteudo mg">
       <div id="botoes-links">
         <table border="0" align="center">
           <tr>
             <td><a href="http://www.ultramail.com.br/" target="_blank" title="Ultramail">
                <span class="ultramail"></span><b>Ultramail </b></a>
             </td>
             <td><a href="callto://emprimeiro" target="_blank" title="Skype">
                <span class="skype"></span><b>Skype</b> </a>
             </td>
           </tr>
           <tr>
              <td><a href="http://72.29.70.106:8880/login.php3" title="Painel de Controle">
                 <span class="painel"></span><b>Painel de Controle</b></a>
              </td>
              <td valign="top">
                 <a href="http://painel.k8.com.br" target="_blank" title="Hospedagem">
                 <span class="hospedagem"></span><b>Hospedagem<br /></b></a>
              </td>
            </tr>
            <tr>
              <td>
                   <a href="http://www.rjnet.com.br/2velocimetro.php" target="_blank"
 title="Velocidade de Conexão">
                  <span class="velocidade"></span><b>Velocidade de Conexão</b></a>
              </td>
              <td>
                  <a href="http://www.imd.com.br/menudivulga.php" target="_blank"
 title="Instituto de Mídia Digital">
                  <span class="instituto"></span><b>Instituto de Mídia Digital</b></a>
              </td>
            </tr>
            <tr>
                <td><a href="http://webmail.empainel.com.br" target="_blank" title="Horde">
                     <span class="horde"></span><b>Horde</b></a>
                </td>
                <td><a href="http://empainel.com.br" target="_blank" title="Empainel">
                     <span class="empainel"></span><b>Empainel </b></a>
                </td>
            </tr>
        </table>
      </div>
    <div style="clear: both"></div>
   </div>
 </div>

Para que você possa entender melhor o funcionamento das "estampas css", na parte 2 (noticiaremos no twitter a data da publicação) deste tutorial utilizaremos a mesma imagem 3 em posição vertical (rotacionada em 90°).