CSS SVG Image Sprites – Retina Ready, WTF ?!

Olá pessoal. Eu presumo que a maioria de vocês já usou ou teve experiência com sprites de imagem .
Os sprites de imagem ajudam a minimizar a quantidade de imagens, fazendo menos solicitações ao servidor e fazendo com que o site carregue mais rápido.

Até poucos anos, trabalhar com sprite de imagem PNG era a melhor prática. mas algo como 2-3 anos atrás, vieram as telas de Retina para telefones celulares e tablets e agora até telas de desktop!

As telas de retina têm 2 resoluções. Vejamos por exemplo o Galaxy S4 da Samsung .
A primeira resolução – resolução web ou resolução CSS é 360X640.
A segunda resolução – a resolução real de fábrica é 1080X1920. é principalmente para vídeos e imagens.
* Para mais informações sobre Retina Screens – Como obter resoluções CSS móveis reais para design responsivo .

O problema

Em telas retina, o PNG Image Sprite não parece bom porque a tela pode carregar mais informações por pixel. No Galaxy S4, é 3 vezes mais. Por exemplo, se temos um ícone de imagem de 10X10 pixels, precisamos carregar uma imagem de 30X30 pixels para que tenha uma boa aparência no Galaxy S4, e nem sempre sabemos qual é a densidade da tela.

A solução

Imagens SVG – são vetores, isso significa que não importa a resolução da tela, a imagem sempre ficará boa e nítida, mesmo quando você aumenta o zoom da tela ou usa transform: scale (*) em CSS, não há pixelização!

É importante saber!
Embora o vetor não funcione com unidades de pixels, quando você usa o Photoshop para criar formas vetoriais e exportá-las para o Illustrator, a proporção do sprite SVG é salva na unidade de pixel e, por causa disso, podemos usar SVG como uma imagem de sprite.

Como fazer uma imagem de Sprite SVG no Photoshop (e exportar para o Illustrator) – Passo a Passo

1. Use a ferramenta de vetores

Cenário

2. Faça seus ícones (estou usando formas vetoriais de photoshop)

Cenário

Cenário

3. Selecione a camada de todos os vetores

Cenário

4. Mesclar todas as camadas com o botão direito do mouse

Cenário

5. Selecione a camada de mesclagem e verifique se você vê os pontos de vetor no PSD

Cenário

6. Exportar para o Illustrator por meio do menu Arquivo

Cenário

Cenário

Cenário

7. Abra o arquivo salvo no Illustrator

Cenário

8. Use a ferramenta de seleção e a página em branco

Cenário

9. RESULTADO: Agora você pode ver os objetos vetoriais

Cenário

10. Pinte as formas vetoriais usando a opção Preencher

Cenário

11. RESULTADO: Agora os objetos vetoriais estão visíveis

Cenário

12. Mova o objeto vetorial para o canto da página

Cenário

13. Salvar arquivo como SVG – Menu-> Arquivo-> Salvar como

Cenário

14. Salvar arquivo como PNG para o Internet Explorer Fallback e Mapa de Pixels de medidas para Sprite – Menu-> Arquivo-> Salvar para a Web

Cenário

Imagem Sprites We Got (SVG / PNG) – Download .

Fazendo o HTML e CSS para a imagem Sprite

Agora temos 2 arquivos, um SVG e o segundo PNG.
Fazemos o arquivo CSS da imagem sprite como você fez antes, usamos o arquivo PNG para medições e chamamos o arquivo SVG!

Exemplo CSS

.icon{
background
:url(sprite.svg);
width
:22px;
height
:22px;
display
:inline-block;
}
.icon.left{background-position:0 0; }
.icon.right{background-position:-22px 0;}
.icon.bottom{background-position:-45px 0;}
.icon.top{background-position:-67px 0;}

Exemplo HTML

<span class="icon left"></span>
<span class="icon right"></span>
<span class="icon bottom"></span>
<span class="icon top"></span>

Sim! conseguimos fazer o Sprite SVG! temos imagens nítidas para todos os tipos de tela!

Suporte a navegadores antigos – como Internet Explorer 7 e 8

Usando o Modernizr, você pode adicionar facilmente suporte para navegadores antigos que não são compatíveis com SVG.
Basta adicionar a classe .no-svg para suportar o IE7 / 8, todos nós temos as mesmas coordenadas no arquivo PNG que criamos.

Exemplo CSS

.no-svg .icon{background:url(sprite.png);}

Só isso, espero que gostem.

Se gostou deste post, você também pode gostar: – Como obter resoluções CSS reais para o design responsivo .

Se você gostou deste post, ficarei feliz em receber seu UPVOTE. Você está convidado a me seguir ou a minha equipe @Walla! P&D e endosso minhas habilidades.

Elad Shechter.