Any drawbacks to this CSS sprite solution for 'retina' displays?

Question

My idea, assuming you start with a 200x200 sprite (meaning the double resolution image is 400x400) is this:

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

Live example: http://ov3rkill.com/temp/a5dii52/

I've struggled for a while trying to determine the best way to deliver higher resolutions images (previously I kept all images separate and sized them individually) and this frankly seems too simple.

Can anyone see any potential drawbacks? I'm toying with this for production use and so far it appears to work.

Answer 1

Since the media query for retina is being called at load it should override the original call to load the small image. I've never witnessed the low-res image flashing in when using this method on retina displays.

Has anyone used JS to confirm that the smaller image loads on a retina display? I curious to know.