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