ícones | Blog Web Standards
13 2009 março
Deixando seu site mais rápido: CSS sprites
Muitos desenvolvedores iniciantes vem nos perguntar maneiras de diminuir o peso dos seus sites. O primeiro passo, com certeza, é fazer um código limpo, semantico, seguindo os princípios dos Web Standards.
Mas há casos, como em grandes portais, que necessitamos dimiuir o carregamento do site ao máximo e uma boa alternativa para isso é a técnica CSS sprites.
Como funciona o CSS sprites?
O princípio é o seguinte: se você utiliza diversos ícones em seu site, ao invés de salvar cada ícone separadamente, pode unir todos em um só arquivo, como no exemplo abaixo:
Créditos: famfamfam.com
Para usar cada ícone específico, deve-se criar uma classe para o elemento desejado (um link, por exemplo) que use esta imagem como background deslocando seu posicionamento conforme desejado.
Por exemplo, caso seja necessário usar o ícone do Flash, é só fazer o seguinte HTML:
<a class="flash" href="#" title="Flash">Flash</a>
O CSS neste caso é bem tranquilo de fazer necessitando, somente, mudar a posição do fundo:
.voltar, .avancar, .flash { background-image: url(icones.png); background-repeat: no-repeat; }
.flash { background-position: -209px 0; }
A primeira linha é só um exemplo das várias classes criadas para os ícones distintos, definindo a imagem e a repetição de fundo, enquanto a classe específica (segunda linha) só define o posicionamento do mesmo.
Mas por que este método deixa meu site mais leve?
A resposta para esta pergunta é muito simples. Ao invés do usuário carregar imagem por imagem, ele carrega todas de uma vez, fazendo apenas uma requisição para o servidor, o que torna todo o processo mair rápido. Além disso, quando carregada, a imagem exibirá todos os ícones do site de uma só vez, proporcionando uma melhor navegação aos usuários.