0 Compartilhamentos 211 Views

Gerador de Sprites CSS

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:

Sprite do GOG.com

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.

Acessar o  Gerador de Sprites CSS

Você pode se interessar

7 Passos para preparar sua loja online para a Black Friday e o Natal
Artigos
4 visualizações
Artigos
4 visualizações

7 Passos para preparar sua loja online para a Black Friday e o Natal

Carlos L. A. da Silva - 12 de novembro de 2019

Chegou aquela época do ano que os lojistas adoram e o desafio está lançado: sua loja online está preparada?

Pipeline (CD/CI) // Dicionário do Programador
Vídeos
9 visualizações
Vídeos
9 visualizações

Pipeline (CD/CI) // Dicionário do Programador

Thais Cardoso de Mello - 11 de novembro de 2019

Continuous Integration e Continuous Delivery Pipeline ou CI/CD Pipeline, ou ainda Continuous Delivery Pipeline, ou Pipeline para os íntimos é um processo que vem sendo amplamente utilizado nas empresas de desenvolvimento.

Promoções de Jogos do Final de Semana (09/11)
Notícias
17 visualizações
Notícias
17 visualizações

Promoções de Jogos do Final de Semana (09/11)

Carlos L. A. da Silva - 9 de novembro de 2019

Confira as melhores ofertas de jogos de PC para o final de semana.

Mais publicações

Como se Tornar um Cientista de Dados de Sucesso // Vlog #105
Vídeos
9 visualizações
9 visualizações

Como se Tornar um Cientista de Dados de Sucesso // Vlog #105

Thais Cardoso de Mello - 7 de novembro de 2019
Aprenda a acelerar a performance de sites com “premonição”
Artigos
18 visualizações
18 visualizações

Aprenda a acelerar a performance de sites com “premonição”

Carlos L. A. da Silva - 5 de novembro de 2019
Swift (a linguagem do iOS) // Dicionário do Programador
Vídeos
8 visualizações
8 visualizações

Swift (a linguagem do iOS) // Dicionário do Programador

Thais Cardoso de Mello - 4 de novembro de 2019
Promoções de Jogos do Final de Semana (01/11)
Notícias
12 visualizações
12 visualizações

Promoções de Jogos do Final de Semana (01/11)

Carlos L. A. da Silva - 1 de novembro de 2019