Are images loaded for other screen sizes via a media tag?

Question

css

does it make sense to include the css file with this code only on the retina. Or will they still not affect the loading of the site on NON-retina screens?

@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) {

  
  header .right .favorites:after {
    background-image: url(../img/home/);
  }
  section#choose-style {
    .left-col {
      background-image: url(../img/home/[email protected]);
    }
    .choose-style-wrap {
      &__item {
        .image {
          display: none;
          &.retina {
            display: block;
          }
        }
      }
    }
  }

}

Answer 1

Your answer is probably here otshelnik-fm.ru/post-group/zagruzhaem-background-v-wordpress-temu-tolko-dlya-shirokix-ekranov-pk/
Browsers are able to media queries and are smart enough not to download pictures from there if the media query did not work