Media queries to load only 1 image per browser width / pixel density

SASS: Retina image media query mixin

// webkit-only .sass --------------------------------

@media (min-width: 20px) and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5)
  #site-loader-inner
    background: transparent url('mobile/loaders/[email protected]', image)

@media (min-width: 20px) and (max-width: 480px) and (-webkit-max-device-pixel-ratio: 1.5)
  #site-loader-inner
    background: transparent url('mobile/loaders/loader-spin.png', image)



// retina-respond.scss mixin ------------------------------- 

@mixin respond-to($media) {
  @if $media == nonretina {
    @media (-webkit-max-device-pixel-ratio: 1.5), (max-resolution: 143dpi) { @content; }
  }
  @else if $media == retina {
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { @content; }
  }
}


// example use:

@include respond-to(nonretina)
  background: $white-bg url($file-fire) center top no-repeat
@include respond-to(retina)
  background: $white-bg url($file-fire-2x) center top no-repeat
  background-size: 311px 208px