Sprite: Imagen e não bebida!!

Já ouviu falar de sprites? Não o Sprite da Coca-Cola, mas a técnica de animação através de imagens sequenciais  Muito utilizado em videogames antes das imagens 3D, por exemplo nosso amigo Megaman correndo.

Megaman correndo

Mas essa técnica pode ser utilizada para melhorar a performance de sites. Normalmente se cria um site com vários botões e várias imagens para esses botões. Como cada imagem está em um arquivo, isso faz com que o navegador faça diversas requisições solicitando arquivos muito pequenos.

Utilizando a técnica de Sprites, cria-se um único arquivo com várias imagens, sendo assim o navegador requisita apenas um arquivo otimizando o desempenho da página. Um belo exemplo disso é a página do Google:

Sprites do Google

Após ter montado a imagem, deve ser feito o mapeamento do posicionamento de cada ícone em estilos de CSS.

E aqui tem um ferramenta bem legal, o Sprite Cow (http://www.spritecow.com/). Ele facilita muito esse mapeamento, basta selecionar qual ícone se quer e ele gera as coordenadas para se colocar no CSS.

Claro que a vaca não é necessária pois todo o processo é simples.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s