Css 针对'；视网膜'；展示？

我的想法是，假设您从200x200 sprite开始（意味着双分辨率图像为400x400），如下所示：

实例：

我已经挣扎了一段时间，试图确定提供更高分辨率图像的最佳方式（之前我将所有图像分开并分别调整大小），坦率地说，这似乎太简单了

---

有人能看到任何潜在的缺点吗？我在生产中使用它，到目前为止它似乎可以工作。

因为加载时调用了视网膜的媒体查询，它应该覆盖原始调用以加载小图像。 在视网膜显示器上使用这种方法时，我从未见过低分辨率图像闪烁

---

是否有人使用JS确认较小的图像加载到视网膜显示器上？我很想知道。

我看到的一个缺点是手机会同时下载两幅图像。使用两种不同的样式表，只在处理媒体查询后应用，怎么样？可能会使用@media not screen和（-webkit min device pixel ratio:2）来加载初始图像，但这会删除一些不支持关键字“not”的用户代理，从而不支持这些用户。

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