Mostrando imagem de exibição retina com css puro

Eu tenho uma situação onde eu não posso saber as dimensões de uma imagem (um proprietário limitado cms ...)

Eu preciso descobrir como mostrar uma imagem de nível de retina e quero fazê-lo sem usar o javascript (se possível).

Eu tenho usado:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {}

mas isso só me ajudou com elementos que possuem imagens de fundo. Como a imagem em questão não pode ser uma imagem de fundo (já que não sei o tamanho ...), qual é a maneira de descobrir isso?

eu tenhologo.png elogo2x.pnge minha marcação aplicável é algo como:

<h1 id="logo">
  <a href="/">
    <img src="images/logo.png">
  </a>
</h1>

Isso é possível sem o javascript? Eu não sou contra o uso de CSS não-padrão para isso - contanto que ele funcione com o webkit (ios / iphone, neste caso). Eu quero mostrarlogo.png para navegadores normais, maslogo2x.png para navegadores com uma taxa de pixels de pelo menos 2.

questionAnswers(2)

yourAnswerToTheQuestion