Mostrando la imagen de la retina con css puro.

Tengo una situación en la que no puedo saber las dimensiones de una imagen (un cms limitado propietario ...)

Necesito averiguar cómo mostrar una imagen de nivel de retina, y quiero hacerlo sin usar javascript (si es posible).

He estado usando:

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

Pero eso solo me ha ayudado con elementos que tienen imágenes de fondo. Dado que la imagen en cuestión no puede ser una imagen de fondo (ya que no sé el tamaño ...), ¿cuál es una forma de resolver esto?

yo tengologo.png ylogo2x.png, y mi marcado aplicable se ve algo como:

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

¿Es esto posible sin javascript? No estoy en contra de usar css no estándar para esto, siempre y cuando funcione con webkit (ios / iphone en este caso). Quiero mostrarlogo.png para los navegadores normales perologo2x.png para navegadores con una proporción de píxeles de al menos 2.

Respuestas a la pregunta(2)

Su respuesta a la pregunta