Media query for all hi-res devices. Load only hi-res photos

Media query for all hi-res devices. Load only hi-res photos

I have a page with a lot of img. I try to put the img in background to
have same img for hi-res devices and other img for non hi-res.
Is this mediaquerry up to date and useful for all new hi-res devices,
Apple retina and the other new hi-res?
In this case, the hi-res devices will load the non hi-res img too? If so,
how to make hi-res devices load only hi-res photos?
HTML:
<div class="photo"> </div>
CSS:
.photo {
position:relative;
margin:0 auto;
width:980px; height:660px;
background-image:url('img/normal/1.jpg');
background-repeat:no-repeat;
background-position:center;
background-size:100%;
}
/* for all hi-res */
@media (-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi){
#photo { background-image:url('img/2x/1.jpg'); }
}