Search code examples
cssimageretina-display

Are both standard and high-resolution images loaded on retina displays when using css media selectors?

I am using the css shown below for serving hi-res images to 'retina' displays. Are both standard and high-resolution images are loaded on a 'retina' display device? Or just the high-res image?

.icon {
  background-image: url(example.png);
}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .icon {
    background-image: url([email protected]);
  }
}
Solution

  • Only the high-res image is used in the final page. First the entire CSS style sheet is loaded, then the browser determines what it actually needs to display. The @media query referencing the high-res image will override the original instance of .icon for retina devices.