Esta ferramenta online permite automatizar o processo de criação de Sprites CSS. Basta fornecer um arquivo ZIP contendo 2 ou mais imagens (GIF, PNG ou JPG) e ela irá gerar uma imagem sprite e as regras CSS correspondentes para segmentar e exibir cada componente da imagem.
As Sprites CSS são uma forma de reduzir o número de pedidos HTTP feitos pelo seu site ao combinar diversas imagens menores em uma única imagem mais larga e atribuir coordenadas X e Y para cada uma das imagens originais. Após atribuir a imagem gerada como fundo de elementos presentes na página, a propriedade CSS background-position pode ser utilizada para deslocar a área visível necessária para exibir a imagem menor original.
Este recurso é amplamente utilizado em sites de muito tráfego, como o Yahoo, que precisam ter o menor número possível de requisições ao servidor. Ao invés de solicitar um punhado de imagens pequenas, carrega uma única vez uma imagem que é a soma de todas. Um bom exemplo da técnica pode ser visto abaixo, em um sprite gerado pelo site de comércio eletrônico de jogos GOG.com, onde os principais elementos gráficos fazem parte da mesma imagem:
Apesar das vantagens da técnica, criar uma imagem que reúna todos os elementos usados em um layout pode ser bastante trabalhoso. Calcular manualmente a posição X e Y do elemento dentro da figura só aumenta a complexidade da tarefa. Felizmente, o Gerador de Sprites CSS consegue realizar estas duas coisas em questão de segundos.
Com diversas opções de configuração, a ferramenta online permite especificar a distância entre os elementos, o prefixo e o sufixo das classes CSS, a orientação da imagem gerada (vertical ou horizontal), a cor de fundo da nova imagem (podendo ser inclusive um PNG transparente), além de formatar o código e comprimir o arquivo final. A única limitação da ferramenta é o tamanho do ZIP que ela é capaz de processar: o arquivo que comprime as imagens originais não pode ter mais de 1MB. Mas nada impede que você tenha mais de um sprite em seu projeto: um para o menu principal, outro para elementos de formulário, outro para pequenos detalhes que se repetem etc.
O Gerador de Sprites CSS possui uma boa documentação em diversas línguas (incluindo o Português) e é totalmente gratuito.
