Otimizando seu site com a técnica CSS Sprite

Há diversas técnicas muito úteis em CSS que devem ser levadas em consideração no desenvolvimento de um website. Uma dessas técnicas é a famosa CSS Sprite, mas que alguns ainda não conhecem.

O que é?
Consiste em agrupar várias imagens do seu site em uma única imagem, e depois manipulá-la através do seu CSS. Isso faz com que a quantidade de requisições ao servidor seja pequena, tornando o site mais rápido.

Algumas vantagens
Sem dúvida a grande vantagem na sua utilização é a rapidez no qual as imagens do site serão carregadas.
Em sites pequenos talvez seu ganho em performance não seja tão evidente, já em sites mais extensos, esta simples técnica faz uma grande diferença.

Além disso, outra vantagem é na manutenção das imagens, onde estarão todas em apenas um arquivo, facilitando a edição do layout. Um site que pode servir como exemplo disso é o Youtube, que utiliza CSS Sprite.

Veja o exemplo abaixo:

IMAGEM

Vamos supor que temos um menu:
HTML

Agora vamos estilizá-lo!
CSS

ul#menu li { float: left; font: 12px Arial; list-style-type: none; line-height: 40px; text-align: center; }
ul#menu li a { background-image: url(‘sprite.png’); background-repeat: no-repeat; color: #fff; display: block; font-weight: bold; height: 40px; text-decoration: none; width: 126px; }
ul#menu li a:hover#link1 { background-position: -378px 0; }
ul#menu li a:hover#link2 { background-position:-252px 0; }
ul#menu li a:hover#link3 { background-position:-126px 0; }

A propriedade CSS que faz a magia acontecer é a background-position, onde o primeiro valor é a posição X (horizontal) e o segundo valor a posição Y (vertical) da imagem que queira exibir.
Neste exemplo, foi necessário apenas uma requisição ao servidor, pois tinha apenas uma imagem utilizada para compor o menu.

Lembre-se que a rapidez de um site é um ponto muito importante atualmente na web, pois se o site demorar para carregar suas imagens o usuário irá desistir e procurar outro que atenda as suas expectativas.