「網膜」のこのCSSスプライトソリューションの欠点は何ですか？

Question

私の考え、あなたは（ダブル解像度の画像は、400x400のある意味）200x200のスプライトを開始されたと仮定すると、この：

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

ライブ例：私は決定しようとしばらく苦労してきましたhttp://ov3rkill.com/temp/a5dii52/

高解像度の画像を配信するための最良の方法（これまではすべての画像を別々にして個々にサイズを決めていました）これは率直にも単純すぎるようです。

誰もが潜在的な欠点を見ることができますか？私はこれをプロダクション用に使っていますが、これまでのところは動作するようです。

Answer 1

網膜のメディアクエリがロード時に呼び出されているので、小さな画像をロードする元の呼び出しを上書きする必要があります。 この方法を網膜ディスプレイに使用すると、低解像度画像が点滅することはありませんでした。

JSを使用して、小さな画像が網膜ディスプレイに表示されることを確認した人はいますか？私は知りたいと思っています。