CSS Sprites

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

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 🙂

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *