Telas de alta resolução, como a tela Retina do iPhone e o MacBook Pro com tela Retina, já estão na corrida na web. Pessoalmente, acho que devemos começar a fazer sites compatíveis com telas Retina também.
Até agora eu sabia a melhor maneira de otimizar gráficos de sites para exibição em alta resolução da seguinte maneira:
(min-device-pixel-ratio : 1.5)Com prefixos de navegadores, é claro. Mas aposto que há muito poucas pessoas que conhecem a função image-set () proposta nas especificações CSS4 e já suportada em navegadores baseados em -webkit. Funciona da seguinte maneira:
body{
background: -webkit-image-set( url('path/to/image') 1x, url('path/to/high-res-image') 2x );
}Esta sintaxe certamente oferece um código sem complicações, agora estou apenas esperando que esta sintaxe entre em ação em todos os navegadores.