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.

Como funciona?

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 */

Chegou a hora das imagens SVG?

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!

Esta matéria foi publicada em: 2012-05-4 (sexta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2012/05/04/site-da-apple-adota-imagens-svg/trackback no seu site.