No artigo de hoje, vamos apresentar um método de alavancar a performance de seu site/blog, no que diz respeito ao carregamento de imagens do site/blog, na qual usaremos o famoso CSS Sprite. Uma técnica que muita gente conhece ou já ouviu falar e reconhecem sua importância, porém não aplicam essa técnica por preguiça ou por dificuldades em seu manuseio.

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

O que é CSS Sprites?

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, pois imagina ter que requisitar nosso servidor 20 vezes para carregar a mesma imagem, símbolo por símbolo, totalmente desnecessário e arcaico, por isso podemos recorrer aos CSS Sprites da seguinte maneira. Montamos nossa lista não-ordenada de elementos, mas em vez 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. Assim conseguimos diminuir o tamanho em KB dos dados trafegados e também o número de requisições HTTP para o servidor, aumentando consideravelmente a performance no carregamento de suas imagens em sua página.

.escudos {
	background: url('images/sprite.png') no-repeat;
}
 
.atletico-mg {
	background-position: 0 -416px;
}
 
.botafogo {
	background-position: 0 -557px;
}
 
.coritiba {
	background-position: 0 -185px;
}

Como fazer?

Para aplicar essa técnica você pode recorrer a 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. Uma ferramenta online e grátis para te auxiliar, facilitando assim a vida dos desenvolvedores, na qual basta você fazer o upload da imagem, e após carregada, clicar nela e a ferramenta lhe dará as coordenadas X e Y para o posicionamento correto no css.

Dúvidas, críticas ou sugestões comentem abaixo e bons estudos =)