Eventuali inconvenienti a questa soluzione di sprite CSS per i display 'retina'?

Question

La mia idea, supponendo che si avvia con un 200x200 sprite (che significa l'immagine doppia risoluzione è di 400x400) è questo:

.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'); 
    } 
} 

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

ho lottato per un po 'cercando di determinare il il modo migliore per fornire immagini ad alta risoluzione (in precedenza ho tenuto tutte le immagini separate e le abbiamo ridimensionate individualmente) e francamente sembra troppo semplice.

Qualcuno può vedere potenziali svantaggi? Sto giocando con questo per uso di produzione e finora sembra funzionare.

Answer 1

Poiché la query multimediale per retina viene richiamata al caricamento, è necessario ignorare la chiamata originale per caricare l'immagine piccola. Non ho mai visto l'immagine a bassa risoluzione che lampeggia quando si utilizza questo metodo sui display retina.

Qualcuno ha usato JS per confermare che l'immagine più piccola carica su un display retina? Sono curioso di sapere.