Jakiekolwiek wady tego rozwiązania sprite CSS dla wyświetlaczy "siatkówkowych"?

Question

Mój pomysł, zakładając, że zacząć 200x200 ikonki (czyli podwójna rozdzielczość obrazu wynosi 400x400) jest to:

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

żywo przykład: http://ov3rkill.com/temp/a5dii52/

Mam walczył na chwilę próby określenia najlepszy sposób na dostarczenie obrazów o wyższej rozdzielczości (poprzednio zachowałem wszystkie zdjęcia oddzielnie i pomniejszałem je indywidualnie), a to wydaje się zbyt proste.

Czy ktoś widzi potencjalne wady? Używam tego do celów produkcyjnych i jak na razie wygląda na to, że działa.

Answer 1

Ponieważ zapytanie o nośnik dla siatkówki jest wywoływane podczas ładowania, powinno zastąpić pierwotne wywołanie w celu załadowania małego obrazu. Nigdy nie widziałem migającego obrazu o niskiej rozdzielczości podczas używania tej metody na wyświetlaczach Retina.

Czy ktoś użył JS do potwierdzenia, że ​​mniejszy obraz ładuje się na wyświetlaczu siatkówki? Ciekawi mnie to.