A solução clássica para servir imagens para dispositivos móveis dotados da tecnologia Retina Display (Tela Retina) é criar uma imagem com dimensões dobradas em relação a imagem original e serví-la para uso daqueles dispositivos selecionando-os com media query e definindo a propriedade background-size apropriada. Essa é uma solução que melhora a apresentação da imagem naqueles dispositivos, mas está longe de ser a solução ideal.
Com o lançamento recente do iPad dotado da tecnologia Retina Display a Apple insatisfeita com a solução tradicional para servir imagens em alta resolução optou por ser servir uma imagem alternativa criada com SVG para tirar o máximo proveito da funcionalidade Retina Display.
Assim, os textos do menu de navegação do site da Apple usa uma imagem PNG para servir seu site para desktop e uma imagem SVG para seus dispositivos dotados da tecnologia Retina Display.
Quando a página é carregada um script JavaScript identifica a existência da funcionalidade Retina Display no dispositivo que a carregou e caso positivo acrescenta uma classe denominada svg no elemento container da barra de navegação.
Com uso da classe serve-se a imagem SVG.
Observe a seguir trechos da marcação HTML e regras CSS do site da Apple, envolvidas nessa negociação da imagem.
Marcação HTML para a barra de navegação
<nav id="globalheader"> <ul id="globalnav"> <li id="gn-apple"><a href="\"><span>Apple</span></a><li> <li id="gn-store"><a href="..."><span>Store</span></a><li> <li id="gn-mac"><a href="..."><span>Mac</span></a><li> <li id="gn-ipod"><a href="..."><span>iPod</span></a><li> ... </ul> <div id="globalsearch">...</div> </nav>
Observe a seguir as regras CSS para inserção das imagens dos textos do menu. Notar que os textos estão em uma imagem única e usa-se a técnica CSS Sprites para posicioná-los nos itens da navegação.
Veja a imagem PNG nesse link e a imagem SVG nesse link. Examine o código fonte da página que contém a imagem SVG.
#globalheader #globalnav li a span { background: url("/global/nav/images/globalnav_text.png") no-repeat scroll 50% 0 transparent; display: block; height: 30px; margin: 3px auto; width: 100%; } #globalheader.svg #globalnav li a span { background-image: url("/global/nav/images/globalnav_text.svg"); } /* Técnica CSS Sprites */#globalheader #globalnav li#gn-apple a span { background-position: 50% 0; } #globalheader #globalnav li#gn-store a span { background-position: 50% -30px; } #globalheader #globalnav li#gn-mac a span { background-position: 50% -60px; } #globalheader #globalnav li#gn-ipod a span { background-position: 50% -90px; } /* Idem para os demais itens da navegação */
A solução da Apple para servir imagens em alta resolução coloca o centro do foco no uso de imagens SVG na Web. O suporte SVG em navegadores desktop modernos é consistente inclusive com Internet Explorer 9 já oferecendo suporte. Para dispositivos móveis a tecnologia SVG também é muito bem suportada.
Com essa sinalização da Apple para SVG o que você acha sobre essa tecnologia? Chegou a hora? Opine!
Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…
Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…
Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…
HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…
Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…
Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…
View Comments
Bacana!
É importante entender este conceito. Tendências e novidades chegam todos os dias e para nós desenvolvedores, é bom se atualizar sempre. Quanto a geração destas imagens e o emprego do SVG acredito que ainda a muito que se amadurecer e saber aplicar o uso correto.
Abs e todos!
Uma tecnologia bem interessante, aposta de futuro.
Muito interessante! Realmente as imagens da Apple são sempre de ótima qualidade. Abraços!
Olá Hallison,.
Gráficos SVG são gerados com marcação XML e na maioria das vezes são mais "leves" do que gráficos bitmap e não ao contrário como você sugere.
O Intertnet Explorer 9 já vem com suporte nativo razoável para SVG.
O uso da biblioteca SVG Web permite suporte nos IE6+
Um abraço e grato pelo comentário.
Finalmente. A tecnologia por trás do formato SVG é muito confiável e robusta. Infelizmente, devido as limitações de conexão de outrora, o formato foi substituído por outros com mais "leves" como o GIF, JPEG e PNG. Mas nos anos recentes a qualidade das conexões melhoraram significativamente e podemos finalmente usufruir de seus benefícios dos quais, na minha opinião, os mais importantes são a renderização vetorial (que oferece melhor qualidade nas imagens) e a animação.
Infelizmente, como tudo não é perfeito, a MS não desenvolveu com suporte para SVG em seu IE e, como já citado pelo Rodrigo, terá os mesmos problemas do PNG.
Leiam maiores detalhes em http://en.wikipedia.org/wiki/Svg.
Parabéns pela postagem.
Realmente uma tecnologia que poderá ser muito usada. Principalmente pela facilidade que os dispositivos móveis têm de usar zoom nas páginas.
Bem provável que sua adoção será como a do PNG transparente na era IE6, no começo com cautela, e em projetos específicos. Depois evoluindo gradualmente conforme o suporte dos navegadores.
Acho que com o aumento da densidade de pixels nas telas certamente a SVG se tornará a opção mais viável. Como essas telas vêm com dispositivos atuais não temos de nos preocupar com suporte, basta adicionar um fallback para PNG como a Apple fez.
Muito legal ver esse uso, espero que os desenvolvedores passem a adaptar seus sites com SVG; afinal, a Apple dita tedências e certamente teremos telas-"retina" fora dos smartphones e tablets ficando populares.