Como fazer CSS Sprites sem saber CSS

Publicado em 10 janeiro, 2012 / Atualizado em 21 de janeiro de 2016

Crie imagens com CSS sprites e deixe seu site mais rápido

CSS Sprites é uma técnica que visa unir todas ou diversas imagens de uma página num único arquivo, fazendo com que o tempo de carregamento do site seja diminuído. O principal efeito dessa técnica é diminuir drasticamente o número de requisições HTTP que, quando em grande quantidade, atrasa o carregamento da página.

A lógica é a seguinte: se seu site possui 10 imagens, cada vez que o visitante visualizá-la, o navegador terá que buscar cada uma delas.

Utilizando CSS Sprites, essas 10 imagens serão transformadas em apenas uma, e os linkas associados à cada uma delas serão posicionados através de regras CSS, o que é feito automaticamente quando o navegador carrega o CSS.

Geradores para fazer CSS sprites
Exemplo de efeito obtido com CSS sprites

Para criar esse tipo de efeito do zero, é necessário saber CSS. No entanto, existem sites que fazem automaticamente quase tudo. Basta apenas enviar as imagens e, caso queira, fazer alguns ajustes, e pronto.

Vou listar alguns sites que geram automaticamente CSS Sprites, disponibilizando, em seguida, tanto a imagem quanto o código CSS. São eles: Spritegen, csssprites.com e o spritebox.net..

Bom trabalho.