0 Compartilhamentos 534 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

Carregando...

Você pode se interessar

O que é o FLoC e como ele afeta sua privacidade na internet?
Artigos
76 visualizações
Artigos
76 visualizações

O que é o FLoC e como ele afeta sua privacidade na internet?

Carlos L. A. da Silva - 5 de maio de 2021

Federated Learning of Cohorts é uma API proposta pelo Google para substituir os cookies, mas ela também oferece problemas

Como planejar e construir um projeto de programação
Artigos
296 visualizações
Artigos
296 visualizações

Como planejar e construir um projeto de programação

Carlos L. A. da Silva - 19 de abril de 2021

O desenvolvedor full stack Peter Lynch revela seu método de preparação para qualquer projeto, de forma simples e direta para iniciantes e veteranos.

15 ferramentas de desenvolvimento para melhorar sua produtividade em 2021 sem gastar nada
Artigos
404 visualizações
Artigos
404 visualizações

15 ferramentas de desenvolvimento para melhorar sua produtividade em 2021 sem gastar nada

Carlos L. A. da Silva - 2 de abril de 2021

O cenário de desenvolvimento está em constante mudança e muitas vezes uma ferramenta nova pode agilizar muito seu trabalho.

Deixe um Comentário

Your email address will not be published.

Mais publicações

A tecnologia por trás do deep fake de Deep Nostalgia
Artigos
390 visualizações
390 visualizações

A tecnologia por trás do deep fake de Deep Nostalgia

Carlos L. A. da Silva - 22 de março de 2021
Como se tornar um Engenheiro DevOps em 2021
Artigos
366 visualizações
366 visualizações

Como se tornar um Engenheiro DevOps em 2021

Carlos L. A. da Silva - 1 de março de 2021
Seus dados vazaram. E agora?
Artigos
331 visualizações
331 visualizações

Seus dados vazaram. E agora?

Carlos L. A. da Silva - 19 de fevereiro de 2021