Qual tal otimizar o carregamento das imagens em seu site? Descubra aqui como utilizar CSS sprites para reduzir o tempo e também as requisições ao servidor.
Sprite é o nome dado para a técnica de combinar múltiplas imagens em um único arquivo. Tudo começou com os primeiros vídeo games. Como sua capacidade de processamento era limitada, os sprites foram inventados para carregar apenas uma única imagem na memória e, consequentemente, melhorar o desempenho do jogo. Essa imagem continha todas as posições que o personagem poderia exibir durante jogo.
Para criar a animação dos movimentos, apenas uma parte da imagem era exibida a cada quadro. Assim, bastava alterar o posicionamento da imagem na tela para se conseguir o efeito desejado. Veja um exemplo:
Alterando a posição da imagem em um curto espaço de tempo, criamos a ilusão do movimento:
CSS sprites para a web
Também utilizamos CSS sprites na internet, não para criar animações, mas para obter uma melhora no desempenho: ao agrupar diversas imagens em uma única, conseguimos reduzir drasticamente o número de requisições no servidor e também reduzir o tempo de carregamento da página.
Você poderá se perguntar: mas ao agrupar diversas imagens em um único arquivo, não estaremos criando um arquivo bem maior, com o peso de todas as imagens somadas? A resposta é não. O tamanho final do arquivo de imagem será menor do que a soma dos arquivos individuais.
Vamos usar como exemplo um conjunto de 6 imagens, ícones de redes sociais que pretendemos inserir em um site.
Individualmente elas possuem o seguinte peso:
- Facebook: 5,58 KB
- Instagram: 6,70 KB
- Linkedin: 6,02 KB
- Tumblr: 6,06 KB
- Twitter: 6,44 KB
- YouTube: 6,64 KB
Ao somar o peso de todas as imagens, chegaremos ao número 37,44 KB. Ao combinar os ícones acima em uma única imagem, teremos um sprite com apenas 20,9 KB de peso, ou seja, nosso Sprite ficou mais leve do que a soma de todas as imagens.
Além disso, ainda existe a questão já mencionada do número de requisições no servidor. Ao agrupar os ícones em um sprite, ao invés de seis requisições, apenas uma será feita, mesmo que os links sejam únicos em cada imagem. Vamos ver como isso é possível.
Primeiro, precisamos criar uma lista de links em HTML. Agora, via css, vamos remover o texto de cada item da lista e substituí-lo por sua respectiva imagem.
O resultado, será um bloco com os ícones alinhados horizontalmente, cada um com sua respectiva imagem.
See the Pen jPwGXQ by HostGator Brasil (@hostgatorbrasil) on CodePen.
Baixe aqui as imagens e códigos que utilizamos neste exemplo.
Técnicas para criar um CSS Sprite
Você pode criar um sprite manualmente ou automaticamente. No modo manual, é necessário usar um programa de edição de imagens, como o Photoshop, e uma boa dose de paciência para inserir as imagens e mapear seu posicionamento. O processo é trabalhoso e, dependendo do número de imagens, poderá consumir bastante tempo (e neurônios).
Felizmente os Deuses da internet criaram diversas ferramentas para criação de sprites que o liberam do trabalho manual. Uma delas é o SpriteBox, que é uma ferramenta gratuita e bem fácil de usar.
Ao abrir a ferramenta, clique em “Manage Images” e escolha a opção “Generate Sprite”. Uma caixa de diálogo será aberta para que você selecione as imagens que deseja inserir no Sprite. Selecione todas de uma vez e envie.
O programa vai gerar automaticamente o sprite e também o css necessário. Após o upload, clique na aba “Output” para visualizar o CSS e baixar a imagem criada pelo programa. O download pode ser feito através do botão “Download Sprite” e o CSS pode ser copiado diretamente da tela ou através do botão “Copy to Clipboard”.
Fácil, não é mesmo?
Dica: use sprites para efeitos de mouseover
Você também pode usar sprites para obter um efeito de mouseover e alterar a aparência de uma imagem quando o mouse passar sobre ela. Para isso, basta adicionar o pseudo-classe :hover em seu css e alterar a posição do background com as coordenadas da nova imagem. No exemplo abaixo, o ícone do Facebook será alterado ao passar do mouse (clique na aba “CSS” para visualizar o código).
See the Pen pJwdJm by HostGator Brasil (@hostgatorbrasil) on CodePen.
Nesse caso, a imagem do Sprite, com os dois estados do ícone combinados (em repouso e com o mouse sobre a imagem), seria:
Esperamos que você tenha aprendido a criar imagens em sprite para otimizar o desempenho do seu site. Ficou com alguma dúvida? Deixe seu comentário e teremos prazer em ajuda-lo!
Ícones por Martz90