Bất kỳ hạn chế nào đối với giải pháp CSS sprite này cho màn hình 'võng mạc'?

Question

Ý tưởng của tôi, giả sử bạn bắt đầu với một sprite 200x200 (có nghĩa là hình ảnh có độ phân giải gấp đôi là 400x400) được điều này:

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

Sống dụ: http://ov3rkill.com/temp/a5dii52/

Tôi đã vật lộn một thời gian cố gắng để xác định cách tốt nhất để cung cấp hình ảnh độ phân giải cao hơn (trước đây tôi giữ tất cả hình ảnh riêng biệt và có kích thước riêng lẻ) và điều này thật thẳng thắn dường như quá đơn giản.

Có ai có thể thấy bất kỳ hạn chế tiềm năng nào không? Tôi đang chơi đùa với điều này để sử dụng sản xuất và cho đến nay nó xuất hiện để làm việc.

Answer 1

Vì truy vấn phương tiện truyền thông cho võng mạc đang được gọi khi tải nên ghi đè cuộc gọi ban đầu để tải hình ảnh nhỏ. Tôi chưa bao giờ chứng kiến ​​hình ảnh có độ phân giải thấp nhấp nháy khi sử dụng phương pháp này trên màn hình võng mạc.

Có ai đã sử dụng JS để xác nhận rằng hình ảnh nhỏ hơn tải trên màn hình võng mạc không? Tôi tò mò muốn biết.