¿Algún inconveniente para esta solución de sprite de CSS para pantallas 'retina'?

Question

Mi idea, suponiendo que comienza con un sprite 200x200 (lo que significa la imagen doble resolución es de 400x400) es la siguiente:

.sprite { 
    background-image:url('1x.png'); 
    background-repeat: no-repeat; 
    background-size: 200px 200px; 
} 

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    .sprite { 
     background-image:url('2x.png'); 
    } 
} 

ejemplo vivo: http://ov3rkill.com/temp/a5dii52/

he luchado por un tiempo tratando de determinar la La mejor manera de entregar imágenes con resoluciones más altas (anteriormente mantenía todas las imágenes separadas y las clasificaba individualmente) y esto, francamente, parece demasiado simple.

¿Alguien puede ver algún inconveniente potencial? Estoy jugando con esto para uso de producción y hasta ahora parece funcionar.

Answer 1

Dado que la consulta de medios para retina se está llamando a carga, debe anular la llamada original para cargar la imagen pequeña. Nunca presencié el parpadeo de la imagen de baja resolución cuando uso este método en pantallas Retina.

¿Alguien ha usado JS para confirmar que la imagen más pequeña se carga en una pantalla de retina? Tengo curiosidad por saber