CSS Sprites – Aumente o desempenho do seu site

CSS Sprites é uma técnica muito usada em grandes portais que serve para melhorar o desempenho do site diminuindo o número de requisições HTTP. É uma técnica bem simples que serve para unir várias imagens em um só arquivo e posicionar o conteúdo através de CSS.

Ficou tudo muito abstrato né?

Imagine o seguinte menu (onde cada time tem um link próprio):

Exemplo de CSS Sprite

Agora pergunto:

Quantas imagens são necessárias pra fazer essa coleção de escudos de times?

Apenas uma imagem.

Fixando a altura e a largura de cada botão, podemos posicionar o background de cada link com o css position.

É mais trabalhoso, mas tem vantagens:

Carregando uma imagem grande ao invés de várias imagens pequenas, economizamos banda (nesse exemplo eram 31kb agora são 11), porque pra cada imagem tem cabeçalho, paleta de cores usadas na figura, enfim, uma série de dados que se repetiam em todos os times. E quando tempos uma figura só no lugar de 32, esses dados são preenchidos uma vez somente, e assim economizamos banda.

Além disso, o que melhora e muito a velocidade, é fazer uma só conexão HTTP. veja mais tidbits Em arquivos muito pequenos, costuma demorar mais pra estabelecer uma conexão com o servidor do que o próprio download em sí. Então, 31 conexões a menos com o servidor, dão uma boa diferença no tempo total do load da página.

É simples pra fazer, tem duas formas.

Imagine o HTML desse exemplo:


<ul class="escudos">
	<li><a href="/atleticomineiro">Atlético Mineiro</a></li>
	<li><a href="/atleticoparanaense">Atlético Paranaense</a></li>
	<li><a href="/barcelona">Barcelona</a></li>
	...
</u>

A primeira forma, que eu acho mais simples, funciona como um “mapeamento” da imagem:


/* 
	Adicionando a única imagem de 
	backgrounde e definindo largura na UL
 */
ul.escudos{	
	background:url('times.png'); 
	width: 280px;
}


/* 
	Posicionando os LI's com float
	como fazemos normalmente 
*/
ul.escudos li{ float:left; }


/* 
	Definindo uma largura e altura fixa para 
	os links e adicionando text-indent negativo 
	para fazer o imagem-replacement
*/
ul.escudos li a{ 
	width:35px; 
	height:35px; 
	display:block; 
	text-indent:-9999px; 
}

A segunda forma é uma coleção de css position


/* Definindo a largura somente */
ul.escudos{	width: 280px;}

* 
	Posicionando os LI's com float
	como fazemos normalmente 
*/
ul.escudos li{ float:left; }

/* 
	Definindo uma largura e altura fixa para 
	os links e adicionando text-indent negativo 
	para fazer o imagem-replacement
*/
ul.escudos li a{ 
	width:35px; 
	height:35px; 
	display:block; 
	text-indent:-9999px; 
}

/* 
	Adicionando o background com todos
	os escudos em todos os li's
*/
ul.escudos li{ background:url('times.png'); }

/* 
	Adicionando um background para cada li
	(seria necessario colocar uma classe / id 
	para cada elemento). Veja os exemplos:
*/
ul.escudos li.atleticomineiro { background-position: 0 0; }
ul.escudos li.atleticoparanaense { background-position: 35px 0; }
ul.escudos li.barcelona { background-position: 70px 0; }

A mesma técnica pode ser aplicada em menus, principalmente com mouse over:


<ul class="menu">
	<li class="videos"><a href="videos.php">Vídeos</a></li>
	...
</u>

A imagem é uma só para o estado normal e o estado com over.

E no CSS:


#menu li.videos a { 
	background: url('/images/video.gif'); 
	display: block;
	width: 71px;
	height: 19px;
	text-indent: -9999px;
}
#menu li.videos a:hover { background-position: bottom; }

Repare que o height do link é metade do tamanho da imagem, assim, quando passa o mouse por cima do botão, o background é movido pra baixo dando a sensação de duas imagens diferentes.

6 thoughts on “CSS Sprites – Aumente o desempenho do seu site

  1. Eu acho bem interessante esse recurso, principalmente para rollovers, que podem ser configurados sem necessidade de JavaScript.

  2. Boa DAN .. ajuda bastante economizar as conexões.. tem um video la no café com o tom(egenial) que eh bem interessante.

    Tenho utilizado mas quero ver se acho algum tipo de grid .. ou faço um ..

    flw abração

  3. Olá Danilo, para quem domina é show de bola. Como mero aprendiz só fico babando…
    Mas deu para entender que através do CSS vc economiza e otimiza espaços, mais ou menos isso….
    Parabéns pelo site, um dia vou ter algo parecido…kuakuas
    e obrigado por me convidar no Dihitt. Já está aceito e sendo seguido, doravante…
    Se quiser visitar meu “mirde” blog, a casa é sua:
    http://timideztofora.blogspot.com
    Sucesso

  4. Pelo amor de Deus. TODO tutorial sobre CSS Sprite que encontrei assim como esse, mostram apenas os códigos, OK.

    Mas onde eu adiciono esse código CSS? Incrivel como não relevam onde precisamos adicionar. É um arquivo externo? Adicionamos esse arquivo dentro de uma página?

    ONDE???

  5. Todos os tutorias de css é sempre a mesma coisa, poderia me explicar como eu faço css sprite sem ser em lista?
    Eu quero as imagens em lugares diferentes.

Leave a Reply

Your email address will not be published. Required fields are marked *