Tableless

Busca Menu

CSS Sprites

Seja o primeiro a comentar por

Um tópico recorrente na discussão sobre performance no lado do cliente é o famoso CSS Sprite. O problema é que muita gente conhece a técnica, muita gente reconhece sua importância, mas aplicar que é bom, nada.

Por isso, vou mostrar hoje algumas ferramentas que podem te ajudar nessa missão.

O que é?

Pra quem não conhece, essa é uma técnica que se baseia em combinar diversas imagens em uma só, em busca de diminuir o número de requisições HTTP para o servidor. E essa é apenas uma de suas aplicações, no mundo dos games, por exemplo, ela é muito usada para fazer animações.

Imagine um menu como esse:

Fazer uma requisição para cada uma das imagens é muito ruim em termos de performance, por isso podemos recorrer aos CSS Sprites da seguinte maneira. Montamos nossa lista não-ordenada de elementos, mas ao invés de utilizarmos a tag img, aplicamos uma classe para cada um dos itens.

<ul>
	<li class="escudos atletico-mg"></li>
	<li class="escudos botafogo"></li>
	<li class="escudos coritiba"></li>
</ul>

Para então no CSS, utilizarmos como background apenas uma imagem que contém todos os escudos. E para cada um dos elementos, colocamos a posição X e Y dentro dessa imagem que contém todos eles.

.escudos {
	background: url('images/sprite.png') no-repeat;
}

.atletico-mg {
	background-position: 0 -416px;
}

.botafogo {
	background-position: 0 -557px;
}

.coritiba {
	background-position: 0 -185px;
}

Assim conseguimos diminuir o tamanho em KB dos dados trafegados e também o número de requisições HTTP para o servidor.

Como fazer?

Para aplicar essa técnica você pode recorrer ao Photoshop colocando todas as imagens em um só arquivo e então buscando a posição X e Y com a régua. Uma excelente alternativa para pessoas masoquistas.

Já para pessoas normais, existem boas ferramentas como o SpriteCow e o SpritePad que te auxiliam nesse trabalho.

Agora, se você quer algo que realmente agilize seu trabalho, seja na criação ou na manutenção de CSS Sprites, então apresento-lhe o Sprite Generator do Compass.

Confere aí o vídeo que gravei especialmente pra vocês 🙂

Publicado no dia