CSS Sprites – Otimizando layouts

Continuando a escrever sobre a otimização de sites, hoje vou falar um pouco sobre o CSS Sprite, esta é uma técnica que tem por finalidade reduzir o tempo de carregamento das imagens utilizadas no background dos nossos layouts web. Para entender o funcionamento devemos entender um pouco sobre como funciona a compressão de arquivos, então não custa na consultar a Wikipedia. O principio da técnica é simples, todas as imagens passíveis de agrupamento são combinadas em uma unica imagem então é utilizada declaração background-position CSS para realizar o posicionamento da imagem no layout.  Quando combinamos várias imagens em uma unica otimizamos a velocidade dos nossos sites de duas formas:  primeiro reduzimos o números de requisições HTTP para baixar as imagens; segundo aumentamos o poder de compressão do GZip, pois cinco arquivos de 1MB cada, comprimidos separadamente, tem a soma de seus tamanhos maior do que um único arquivo de 5MB comprimido(Podem fazer o teste).

Uma ótima ferramenta para auxiliar nesse processo é a SpriteME, inclusive ela é  recomendada pela equipe do Google, para utiliza-la basta acessar o link e adicionar o link indicado aos favoritos.

SpriteME 1

SpriteME 1

Após adicionar o link aos favoritos você deve acessar seu site e clicar no link adicionado, então a ferramenta vai sugerir quais sprites podem ser realiados.

SpriteME 2

SpriteME 2

Nos primeiros box ficam as sugestões de imagens para o sprite, nos demais ficam as imagens que não são recomendadas para gerar um sprite. Dependendo do site os boxes podem se apresentar de formas diferentes. É interessante fazer várias simulações sprite pra verificar qual melhor se adapta a seu site. Após selecionar as imagens com as quais criaremos o sprite basta clicar no botão “make sprite”  e depois clicar no botão “exporte CSS”.

SpriteME 3

SpriteME 3

Após exportar o CSS será apresentada uma tela(conforme acima) com o link para baixar a(s) imagem(ns) que foram agrupadas no sprite e as configurações necessárias que devem realizadas no seu arquivo de stilos(css).

Até a proxima []s

Deixe uma resposta

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

 

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.