O conceito de sprites já existe há algum tempo. É uma das técnicas mais comumente usadas na indústria de jogos para acelerar o processo de exibição de animações em uma tela. Neste artigo, veremos em particular como essa técnica pode nos ajudar a melhorar a experiência do usuário em páginas da web com a ajuda de CSS Sprites na seguinte ordem:
- O que é um Sprite?
- O que é CSS Sprite - uma visão geral rápida?
- Exemplo de como isso ajuda no Desenvolvimento Web?
- Vantagens de usar CSS Sprites
- O que um desenvolvedor deve fazer ao trabalhar com CSS Sprites?
- Como criar uma Folha de Sprite CSS?
- Como trabalhar com CSS Sprites?
- Empresas que usam CSS Sprites
O que é um Sprite?
Um sprite é uma única imagem que faz parte de uma cena maior em um jogo. Vários sprites são então combinados em uma grande imagem chamada folha de sprite. Assim que uma folha de sprite é carregada na memória, diferentes sprites são renderizados em rápida sucessão para dar a ilusão de animação. Isso é feito simultaneamente para dezenas a centenas de sprites diferentes para gerar uma cena no jogo.
A ideia básica é que é muito mais rápido carregar uma imagem e exibir uma parte dela sempre que necessário, em comparação com carregar várias imagens e exibi-las.
O que é CSS Sprite: uma visão geral rápida?
Um sprite CSS é uma técnica frequentemente usada por desenvolvedores da web para otimizar o desempenho das páginas da web. Nesta técnica, várias imagens menores geralmente das mesmas dimensões são combinadas em uma única imagem grande chamada de Folha de sprite ou conjunto de ladrilhos . Esta folha de sprite é então usada para exibir elementos individuais sempre que precisarmos deles.
Normalmente, elementos como logotipos, setas de navegação, botões são incluídos na folha de sprite, pois são quase das mesmas dimensões e são freqüentemente usados em uma página da web.
Exemplo de como isso ajuda no Desenvolvimento Web?
Geralmente, durante a criação de páginas da web, as imagens são armazenadas e usadas como arquivos individuais. Assim, quando um usuário abre uma página web, o navegador tem que fazer uma solicitação HTTP para cada um desses arquivos, baixá-los separadamente e exibi-los. Isso leva a tempos de carregamento de página mais elevados, pois uma página da web específica pode ter um grande número de imagens menores, como botões, ícones, logotipos.
Sprites CSS ajudam os desenvolvedores a combinar essas pequenas imagens freqüentemente usadas em uma grande imagem. O navegador então tem que baixar apenas um arquivo que é usado paraexibir a seção necessária deslocando a imagem.
Vantagens de usar CSS Sprites
Existem duas vantagens principais de usar sprites CSS sobre imagens normais:
Carregamento de página mais rápido: Aumenta o tempo de carregamento da página, pois as imagens usadas na página da web aparecem assim que a folha é baixada.
Maior capacidade e menor uso de recursos: Não apenas essa técnica melhora a experiência do usuário final, tornando o carregamento da página mais rápido,mas também reduz o congestionamento da rede à medida que um número menor de solicitações HTTP é feito.
O que um desenvolvedor deve fazer ao trabalhar com CSS Sprites?
Ao trabalhar com imagens individuais, o desenvolvedor pode simplesmente trabalhar com a tag HTML e estilize-o em CSS, se necessário. Mas ao trabalhar com CSS Sprites, um desenvolvedor precisa fazer duas coisas específicas:
- Criação da Folha Sprite
Ao desenvolver uma página da web, se o desenvolvedor decidir usar sprites CSS, ele deve primeiro criar a folha de sprite mesclando todos os elementos desejados como botões, logotipos, etc. em um padrão de grade. Isso pode ser feito usando qualquer programa de edição de imagem como Photoshop ou Gimp. Existem também muitas ferramentas online disponíveis que o ajudam a fazer a folha de sprite. Essas ferramentas são discutidas posteriormente neste artigo.
- Acesse um elemento específico do sprite usando o Posição de fundo CSS propriedade
Assim que a planilha do sprite estiver pronta, o desenvolvedor deve usar os atributos CSS para acessar diferentes partes da planilha.
- largura: Largura do sprite
- altura: Altura do sprite
- fundo: Referência à folha de sprite
- Posição de fundo: Valores de deslocamento (em pixels) para acessar apenas a parte necessária da folha de sprite
Como criar uma Folha de Sprite CSS?
Você pode usar qualquer software de edição de imagem para organizar suas imagens menores em uma grade, mas dois métodos mais fáceis são discutidos abaixo:
1. Ferramenta de Criação de Folha de Sprite Online
LIGAÇÃO: toptal.com/developers/css/sprite-generator/
Essa ferramenta não é apenas gratuita, mas também fornece o código CSS necessário que pode ser usado ao fazer referência à planilha de sprite. Além disso, você pode mexer em diferentes propriedades, como o preenchimento entre os elementos e a alteração de seu alinhamento.
2. Gerando Folha Sprite com Sprity
Se você estiver usando Grunt, Node ou Gulp, você pode instalar um pacote chamado Sprity que o ajudará a criar uma folha de sprite em uma variedade de formatos como PNG, JPG, etc.
Em primeiro lugar, você precisará instalar o Sprity usando:
npm install sprity -g
Então, para gerar a folha de sprite, use o seguinte comando:
sprity ./output-directory/ ./input-directory/*.png
Como trabalhar com CSS Sprites?
Neste exemplo, usaremos a seguinte folha de sprite:
Como você pode ver na imagem acima, seis ícones (Instagram, Twitter e Facebook) foram organizados em um padrão de grade. Na primeira linha, temos um estado normal e, na segunda linha, temos o estado hover (a imagem que aparece quando passamos o cursor do mouse sobre eles).
Se você fez a folha de sprite usando as ferramentas que discutimos acima, você já conhece os deslocamentos necessários no CSS, mas se você usou alguma outra ferramenta ou simplesmente recebeu uma folha de sprite, não se preocupe, estaremos discutindo um método que o ajudará a obter compensações para o elemento necessário.
Vamos ver agora uma maneira muito simples de obter os deslocamentos necessários para cada um dos seis ícones usando o MS Paint. Pode não ser uma solução ideal para trabalhar com sprites, mas como tem o recurso que fornece as coordenadas do cursor do mouse, pode ser usado para obter as coordenadas X e Y necessárias.
Primeiro, abra a imagem da folha do sprite (grade contendo todas as imagens menores) e coloque o cursor do mouse no canto superior esquerdo do sprite que deseja agarrar.
Depois de ter as coordenadas do ponto superior esquerdo do seu sprite (imagem do Instagram superior esquerdo), você pode exibir esse sprite específico sempre que necessário usando o código CSS:
background: url ('img_sprites.png')
posição de fundo: 0 0
largura: 125px
altura: 125px
Estamos usando largura e altura de 125 pixels, pois nossos ícones são dessa dimensão. Para buscar a próxima imagem (Twitter) na mesma linha, usamos o seguinte código:
comprimento de um array javascript
background: url ('img_sprites.png')
posição de fundo: -128px 0px
largura: 125px
altura: 125px
Observe o atributo background-position no snippet acima. (-128px, 0) significa que estamos deslocando nossa folha de sprite para a esquerda em 128 pixels (levando em consideração o preenchimento entre os elementos) e 0 pixels no eixo Y. Se acessássemos o ícone de foco do Twitter, nosso atributo background-position seria:
posição de fundo: -128px -128px
Desta forma, agora podemos acessar cada componente de nossa folha de sprite usando CSS. Vamos examinar um código HTML e CSS completo sobre como fazer isso.
Passo 1: Escrever o código HTML necessário
No código abaixo, estamos simplesmente adicionando três links. Além disso, vincularemos nosso HTML com a folha de estilo (screen.css).
Passo 2: Escrever o CSS necessário. Primeiro, definiremos o estilo de nossa classe de ícone compartilhada. Aqui, você pode ver que estamos nos referindo à folha de sprite que criamos.
/ * Classe de ícone compartilhado * /
span.icon a: link,
span.icon a: visitou{
exibição:quadra
text-indent:-9999px
imagem de fundo: url (./ img_sprites.png)
fundo de repetição:não repetir
}
Etapa 3: Obter os ícones individuais da folha de sprite usando os deslocamentos.
/ * Instagram Icon * /
span.instagram a: link,
span.instagram a: visitou{
largura:125px
altura:125px
posição de fundo:0 0
}
/ * Twitter Icon * /
span.twitter a: link,
span.twitter a: visitou{
largura:125px
altura:125px
posição de fundo:-128px 0
}
/ * Ícone do Facebook * /
span.facebook a: link,
span.facebook a: visitou{
largura:125px
altura:125px
posição de fundo:-257px 0
c ++ classificando uma matriz
}
Passo 4: Obter os ícones de foco da folha de sprite usando os deslocamentos.
span.instagram a: pairar{posição de fundo:0 -128px}
span.twitter a: pairar{posição de fundo:-128px -128px}
span.facebook a: pairar{posição de fundo:-255px -128px}
Empresas que usam CSS Sprites
Muitos grandes nomes da indústria usam CSS Sprites para melhorar a capacidade de resposta de seus sites. Empresas como Google, Facebook, Amazon usam amplamente esse método, pois isso os ajuda a reduzir o número de solicitações HTTP por sessão para um determinado usuário. Este é um grande benefício quando levamos em conta que essas empresas atendem milhões de clientes a qualquer momento.
Agora que você já sabe o que são os sprites CSS e como trabalhar com eles, está um passo mais próximo em sua jornada para aprender CSS. Conceitos como sprites são uma virada de jogo nos dias de hoje, pois se tornou extremamente importante para os desenvolvedores extrair todo o desempenho de uma página da web.
Confira nosso que vem com treinamento ao vivo conduzido por instrutor e experiência em projetos da vida real. Este treinamento torna você proficiente em habilidades para trabalhar com tecnologias da web de back-end e front-end. Inclui treinamento em Desenvolvimento Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.
Tem alguma questão para nós? Mencione isso na seção de comentários do blog “Imagens HTML” e entraremos em contato com você.