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.
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.
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 🙂
