Como utilizar sprites em projetos web

Sabemos que com CSS Sprite você pode utilizar de várias formas, botões, menus, backgrounds e imagens para compor o layout.

Neste artigo eu vou expor minha opinião sobre a implementação sprites de imagens em CSS.

Não vou mostrar como se faz, e sim abordar em que momentos podemos utilizar essa técnica em nossos projetos.

Como surgiu o sprite?

Tudo começou com os primeiros vídeo games.

Como os jogos tinham capacidade de processamento limitada, os sprites foram inventados para carregar apenas uma única imagem na memória e, dessa forma, com a combinação de múltiplas imagens em um único arquivo o desempenho do jogo melhorava.

Por meio do sprite, essa imagem continha todas as posições que o personagem poderia exibir durante jogo.

Defina o que é mais importante

Se as imagens que você possui em seu projeto são importantes do ponto de vista de SEO, você precisa sempre colocar a imagem no src do .

Porém saiba que muitas imagens separadas com pode ter um custo de performance.

Se você fizer qualquer outra coisa o Google não vai indexar a imagem corretamente.

Isso quer dizer que uma imagem que você considerar importante for inserida no sprite, o Google não vai enxergar essa imagem.

Se SEO é importante pra você (óbvio que é), não coloque as imagens no sprite, e sim do jeito tradicional com .

Caso o ponto mais importante do seu projeto seja performance, e o mesmo possui centenas de imagens, pode não ser tão interessante carregar tudo em

Existe um truque chamado Lazy load, que é uma forma de carregar imagens com javascript só quando ela for necessária.

Só que para SEO isso não é válido, porque o Google também não consegue enxergar essas imagens.

Mas se todos esses pontos são importantes, existe a possibilidade de conciliar performance e seo? A minha resposta é: tudo vai depender.

Você irá precisar analisar o cenário e ver qual o melhor caminho a seguir.

Cenários para usar sprites

Efeitos
Quando criamos um menu por exemplo e necessitamos de um efeito visual quando passarmos o mouse, é bom utilizar sprites.

Isso porque no navegador do usuário precisa estar com as duas imagens disponíveis para o efeito funcionar, isto é, as duas imagens devem ter sido baixadas do servidor.

Caso o over do mouse passe pelo elemento pode ter um atraso no efeito motivado pelo fato da imagem para o segundo estado ainda não ter sido baixada do servidor.

Quando você quer juntar todas as imagens

Se você fez a analise que em seu projeto é necessário juntar determinadas imagens que não são importantes para SEO, faça isso!

Páginas estáticas
Se você tem uma Landing Page por exemplo, que possui várias imagens e recebe bastante tráfego direto, é interessante implementar sprite.

Dessa forma o trafego de banda será menor por que ao invés de várias requisições para o servidor o navegador irá fazer uma requisição.

Menos requisições HTTP

Quando o assunto for diminuir o número de requisições, observe quais imagens que compõe o layout podem ser transformadas em sprite.

Com o sprite haverá uma melhor performance no site e menos requisições HTTP.

Ferramentas online e outras que você pode instalar diretamente do npm

Antigamente a geração de um sprite era trabalhoso e manual.

Quando era necessário adicionar uma nova imagem muitas vezes acabávamos criando uma segunda versão do arquivo só por garantia.

Hoje em dia há várias ferramentas que automatizam o processo para as imagens que queremos.

A ferramenta já junta todas as imagens em um único arquivo e gera as classes CSS de acordo com nossas instruções.

Como fazer sprites?

Editor de imagem
Para aplicar essa técnica você pode recorrer ao Photoshop, Gimp ou qualquer outro editor de imagem colocando todas as imagens em um só arquivo e então buscando a posição X e Y com a régua.

Sites que geram sprites
Existem boas ferramentas como o SpriteCow e o SpritePad que te auxiliam nesse trabalho.

Automatização de sprites
Se você quer algo que realmente agilize seu trabalho, seja na criação ou na manutenção de seu CSS, alguns automatizadores como O Gulp ou Grunt são ótimas opções.

Essas ferramentas são poderosas para automatizar tarefas de build.

Tem bastante foco em tarefas de front-end, mas pode ser usado pra todo tipo de build além de geração de sprites.

Eu fiz um vídeo recente onde eu ensino como criar Sprites em arquivos SVG, é uma técnica muito legal, vale a pena conferir o vídeo 😉

Se você gostou deste artigo e tem algo para compartilhar, deixe um comentário.