CSS Sprites - Agrupe suas imagens

"Um pouco de matemática e muita CSS" - essa é a maneira que Dave Shea de "A List Apart" usou para definir como funcionam as CSS Sprites.

Com o sucesso que essa técnica vem alcançando, já não preciso fazer uma tutorial completo, cheio de explicações técnicas - os geradores online facilitam a vida do webmaster e do designer.


Mas fiquem pelo menos com o conceito:

Quanto menor a quantidade de imagens (independente do tamanho)  que seu blog carregar a cada mudança de página, mais rápido ele se tornará. Se você já transferiu todas as imagens decorativas para sua folha de estilos, o primeiro passo foi dado - as imagens carregarão no cache na primeira vez que o leitor entrar no blog e não precisarão ser carregadas novamente nas mudanças de página.

O segundo passo agora, é colocar o maior número de imagens em um único arquivo, reduzindo ainda mais o número de "chamadas" que o navegador precisará fazer para carregar imagens.

Essas imagens ficarão distribuídas no arquivo "mestre" como se estivessem em uma grade e depois, com a propriedade background-position, faremos a chamada de cada uma para o local onde deverão se localizar.

Algo semelhante ao mapa de imagens, mas você não precisa "fazer contas" usando o gerador online.

Vamos trabalhar um exemplo para você entender e poder aplicar em seu blog. 


Estes dois widgets foram colocados em uma FooterToolsBar -Barra de Ferramentas no Footer do blog.

Eles foram criados com listas de links, onde cada link possuia uma pequena imagem no background. No caso dos ítens da lista do Tradutor, as imagens ficam como background posicionado à esquerda do link e no caso dos botões de redes sociais ficam no lugar do texto dos links.

Veja o HTML de cada lista e a CSS antes de fazer a Sprite:

Botões de Redes Sociais

Este é o HTML da lista de botões. As imagens foram retiradas do HTML original de cada botão e substituídas por um link de texto (em azul)

<div id="fave-buttons">
<ul>
<li class="imglink button-blogblogs"><a href="http://endereço-favoritar-blogblogs" rel="alternate" title="Adicionar aos Favoritos BlogBlogs">Blogblogs</a></li>
<li class="imglink button-technorati"><a href="http://endereço-favoritar-technorati" title="Favorite no Technorati">Tecnhorati</a></li>
<li class="imglink button-mybloglog"><a href="http://endereço-mybloglog" title="Join My Community at MyBloglog!">>Join My Community at MyBloglog!</a></li>
<li class="imglink button-bc"><a href="http://endereço-blogcatalog" title="Favorite no Blog Catalog">Blog Catalog</a></li>
<li class="imglink button-yoomp"><a href="http://endereço-oomp" title="Yoomp">Yoomp</a></li>
<li class="imglink button-bloggeral"><a href="endereço-obloggeral" title="Maratona de Blogs. Cadastre o seu!">Blog Geral</a></li>
</ul></div>

<div style="font-size:90%;"><a href="http://www.google.com/endereço-perfil-google" title="Perfil">Mais redes e diretórios >> </a></div>

Como os botões ficarão no lugar do link de texto, usei o indent para esconder os textos. Veja a CSS (antes da Sprite):

.imglink a { /* class para todos os links que precisarão de identação */
display: block; 
text-indent: -2000em; 
text-decoration: none; 
z-index: 1000;
} 

/* Estilo da lista */
#fave-buttons li { 
padding: 2px 0 5px 15px;
}

#fave-buttons li a:hover { /* coloca transparência nos botões em mouse-over */
opacity:0.60;
}

#fave-buttons li.button-technorati a { 
background: url(http://endereço-da-imagem-do-botão-technorati.gif) no-repeat 0 0;
}

#fave-buttons li.button-mybloglog a { 
background: url(http://endereço-da-imagem-do-botão-mybloglog.gif) no-repeat 0 0;
}

#fave-buttons li.button-bloggeral a { 
background: url(http://endereço-da-imagem-do-botão-bloggeral.gif) no-repeat 0 0;
}

#fave-buttons li.button-blogblogs a { 
background: url(http://endereço-da-imagem-do-botão-blogblogs.gif) no-repeat 0 0;
}

#fave-buttons li.button-bc a { 
background: url(http://endereço-da-imagem-do-botão-blogcatalog.gif) no-repeat 0 0;
}

#fave-buttons li.button-yoomp a { 
background: url(http://endereço-da-imagem-do-botão-yoomp.gif) no-repeat 0 0;
}

Tradutor

HTML do tradutor

<ul id="tradutor">
<li class="uk"><a href="#" target="_blank" rel="nofollow" title="BloggerSPhera in English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cen&hl=en'); return false;">English</a></li>
<li class="spain"><a href="#" target="_blank" rel="nofollow" title="BloggerSPhera en Español" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Ces&hl=en'); return false;">Español</a></li>
<li class="france"><a href="#" target="_blank" rel="nofollow" title="BloggerSPhera en Français" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cfr&hl=en'); return false;">Français</a></li>
<li class="germany"><a href="#" target="_blank" rel="nofollow" title="BloggerSPhera in Deutsch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cde&hl=en'); return false;">Deutsch</a></li>
<li class="italian"><a href="#" target="_blank" rel="nofollow" title="BloggerSPhera in italiano" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cit&hl=en'); return false;">Italiano</a></li>
</ul>

No caso do tradutor não precisamos identar o texto do link, mas precisamos de um "padding" para distanciar a imagem do texto.

CSS

#tradutor li { 
padding: 2px 0 5px 15px; 
}

#tradutor li a { /* padding para distanciar as bandeirinhas do texto */
padding-left: 27px;
}
#tradutor li.uk a { 
background: url(http://endereço-da-imagem-da-bandeira-inglaterra.gif) no-repeat 0 0;
}

#tradutor li.spain a { 
background: url(http://endereço-da-imagem-da-bandeira-espanha.gif) no-repeat 0 0;
}

#tradutor li.france a { 
background: url(http://endereço-da-imagem-da-bandeira-frança.gif) no-repeat 0 0;
}

#tradutor li.germany a { 
background: url(http://endereço-da-imagem-da-bandeira-alemanha.gif) no-repeat 0 0;
}

#tradutor li.italian a { 
background: url(http://endereço-da-imagem-da-bandeira-italia.gif) no-repeat 0 0;
}

Preparando as imagens para a CSS Sprite

O HTML e a CSS estão construídos, mas como queremos dimiuir o carregamento da página, vamos usar a CSS Sprite para colocar todas as imagens em um arquivo único.

Antes de começar, veja se suas imagens estão bem identificadas - nada de nomes de arquivo como "imagem1", "imagem2", etc. Coloque nomes que estejam relacionados com o conteúdo do link como "bandeira-italia" , "botao-blogblogs". Se for usar CSS Sprites para imagens de um header, por esemplo, coloque: "header-topo", "header-diretia", etc. Isso vai facilitar o reconhecimento na hora de usar o gerador de Sprite.

Depois de renomear as imagens, salve-as em uma única pasta que você pode nomear como Sprite (ou o nome que queira).

Compacte a pasta usando ZIP.

Usando o Gerador Online

Existem alguns geradores que você pode usar - escolha o que achar mais fácil. Vou ensinar como usar o gerador do Project Fondue.

Acesse o site do Gerador de Sprites CSS (versão português) do projeto Fondue.

Neste tutorial vou ensinar como fazer uma Sprite simples com os exemplos dos widgets de botões de redes sociais e de tradução, portanto, não usaremos alguns campos do formulário. Acompanhe pela numeração na imagem como preencher os campos

1. Faça o upload da pasta zipada Sprite (ou o nome que você escolheu para a pasta com todas as imagens);
2. Direcionamento - Escolha se você quer a apresentação das imagens no arquivo mestre de forma vertical ou horizontal. No caso dos botões, escolhi vertical. Isso dependerá do tamanho de suas imagens (largura x altura) e da quantidade de imagens;
3. Afastamento Vertical / Horizontal - Neste exemplo, como estamos colocando as imagens na vertical, o espaçamento horizontal não é muito importante. Você deve escolher um espaçamento mínimo (para que a imagem mestre não fique muito grande), mas que não "embole" uma imagem sobre a outra;
4. Cor de fundo - É importante colocar a cor de fundo para que não seja necessário usar um arquivo PNG (formato mais pesado). Veja qual é a cor de background do local onde você colocará as imagens e coloque o código hexadecimal nesse campo;
5. Formato de saída - Usei o mesmo formato das imagens pequenas (GIF);
6. Prrenchidos esses campos principais, clique em "Criar Imagens Sprite e CSS.
   

Depois de clicar em "Criar... " você é direcionado à uma nova página onde fará o download do arquivo mestre e terá as coordenadas para o "background-position" de cada ítem da lista.

1. Faça o download da imagem mestre. Mude o nome do arquivo para um nome que você possa identificar melhor ("sprite" , "seublog-sprite", etc) e depois faça o upload desse arquivo para seu site de hospadagem preferido. Neste caso eu indico o DropBox porque você poderá fazer alterações posteriores sem necessidade de ficar alterando os links no template. Anote o endereço da imagem upada;
2. Como usaremos a imagem mestre em mais de um container, não colocaremos a regra CSS descrita em "2" no "li". 
3. As imagens foram nomeadas com uma boa identificação, dessa maneira podemos pegar as coordenadas (background-position) de cada botão/bandeira e mudarmos nossa CSS.
   

Tansferindo os dados do Gerador para sua CSS

Na CSS, só precisamos alterar o endereço das imagens de cada botão e de cada bandeira para esse novo endereço único da imagem mestre e alterar o background-position de cada ítem de 0 0 para as novas coordenadas:

Botões redes sociais:

#fave-buttons li.button-technorati a { 
background: url(http://endereço-imagem-mestre/sprite.gif) no-repeat 0 -80px;
}

#fave-buttons li.button-mybloglog a { 
background: url(http://endereço-imagem-mestre/sprite.gif) no-repeat 0 -60px;
}

#fave-buttons li.button-bloggeral a {
background: url(http://endereço-imagem-mestre/sprite.gif) no-repeat 0 -40px;
}

#fave-buttons li.button-blogblogs a { 
background: url(http://endereço-imagem-mestre/sprite.gif) no-repeat 0 0;
}

#fave-buttons li.button-bc a {
background: url(http://endereço-imagem-mestre/sprite.gif) no-repeat 0 -20px;
}

#fave-buttons li.button-yoomp a { 
background: url(http://endereço-imagem-mestre/sprite.gif) no-repeat 0 -100px;
}

Tradutor:

#tradutor li.uk a { 
background: url(http://endereço-imagem-mestre/sprite.gif) no-repeat 0 -189px;
}

#tradutor li.spain a { 
background: url(http://endereço-imagem-mestre/sprite.gif) no-repeat 0 -172px;
}

#tradutor li.france a { 
background: url(http://endereço-imagem-mestre/sprite.gif) no-repeat 0 -122px;
}

#tradutor li.germany a { 
background: url(http://endereço-imagem-mestre/sprite.gif) no-repeat 0 -139px;
}

#tradutor li.italian a { 
background: url(http://endereço-imagem-mestre/sprite.gif) no-repeat 0 -155px;
}