CSS Sprites, a arte de posicionar imagens

Dando continuidade na redução do peso das páginas, apresento à vocês uma técnica chamada: CSS Sprites!

Mas o que diabos é isso? É um novo refrigerante?

Não, não é refrigenrante é a arte de fazer uma unica requisição de imagem via CSS para diversos itens.

Como assim?

Vamos começar do básico.

Segundo o Wikipedia

Sprites were originally invented as a method of quickly compositing several images together in two-dimensional video games using special hardware. As computer performance improved, this optimization became unnecessary and the term evolved to refer specifically to the two dimensional images themselves that were integrated into a scene. That is, figures generated by either custom hardware or by software alone were all referred to as sprites. As three-dimensional graphics became more prevalent, the term was used to describe a technique whereby flat images are seamlessly integrated into complicated three-dimensional scenes.

Em português

Sprites foram originalmente inventadas como um método de composição rápida de algumas imagens juntas em jogos de video game em 2d usando hardwares especiais. Como forma de otimizar o careggamento dos softwares….

Creio que Já é o sificiente!

Vamos ao que interessa. Os Sprites em CSS

A técnica é simples e você pode utilizar para quase todas as imagens do seu layout, desde que essas imagens não se repitam dentro de um mesmo elemento ou não tenham tamanho definido. Exemplo: em um background de página você não deverá utilizar o Sprites, pois não há um delimitador de altura e largura para a exibição desta imagem.

Vamos a um exemplo prático:

Façamos um menu.

Briefing: Quatro links, cada um com a cor de fundo diferente, cada um deve ter um degradê.

1º Passo: A IMAGEM

2º Passo: O HTML

<ul class=”sprites”>
<li class=”um”><a href=”#”>1</a></li>
<li class=”dois”><a href=”#”>2</a></li>
<li class=”tres”><a href=”#”>3</a></li>
<li class=”quatro”><a href=”#”>4</a></li>
</ul>

3º Passo: O CSS

*{list-style:none}
.sprites li{float:left; text-align:center; width:50px; height:30px; background:url(http://tutoriais.leandrogarcia.com/sprites/images/sprites.jpg) repeat-x}

.sprites li.um{background-position: 0 0}

.sprites li.dois{background-position: -30px 0x}

.sprites li.tres{background-position: 0 -60px}

.sprites li.quatro{background-position: 0 -90px}

.sprites li a{color:#000;font-weight:bold}

Resultado



Assim Conseguimos um layout, onde cada um dos itens do menu tem uma imagem de fundo, mas não precisamos requisitar quatro imagens, apenas uma.

Vantagens?

Entre as vantagens, posso citar:

a facilidade de manutenção, uma vez que haverá menos imagens a alterar;

o menor número de requisições HTTP;

maior velocidade de carregamento, uma vez que haverá menos itens a requisitar.

Pra finalizar

Ao utilizar o sprites, nós possíbilitamos ao usuário uma maior velocidade no carregamento. Uma página carregada mais rápido, deixa o usuário mais feliz, um usuário mais feliz, tende a voltar mais vezes, desde que o conteúdo seja relevante

Veja em funcionamento: link

Download: Sprites




2 Comentários »

  1. Pingback por Yslow (Porque está devagar) - Como medir performance de carregamento das páginas… — Blog do Garcia - XHTML, Webstandards e etc. — 29/01/2009 @ 10:43 pm

    [...] Você pode diminuir a rquisição de imagens background através de CSS sprites, já expliquei como fazê-los neste post. [...]

  2. Pingback por Image Sprites | Leandro Garcia — 29/09/2011 @ 6:48 pm

    [...] escrevi alguns posts sobre otimização de sites, usando CSS sprites ou diminuindo código, nesta toada apresento-lhes o image [...]

Rss dos comentários TrackBack URL

Deixe um comentário