Загружаются ли картинки, которые прописаны для других размеров экранов через медиатег?

Question

[Василий Хрягин]

имеет ли смысл подключать файл css с этим кодом только на ретине. Или они все равнно не будут влиять на загрузку сайта на экранах НЕ ретины?

@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/[e-mail]);
    }
    .choose-style-wrap {
      &__item {
        .image {
          display: none;
          &.retina {
            display: block;
          }
        }
      }
    }
  }

}

Comments

[Alex]

Так, откройте отладчик и посмотрите. Не уверен насчет Chrome но в Firefox точно можно выставлять DPR

[WapSter]

Все что в css в любом случае скачается.

[Ankhena]

Выставляете в инструментах разработчика нужный DPR.
Открываете вкладку Network.
Смотрите что загрузилось.
Для удобства можно поставить фильтр, чтобы показывались только картинки.

[Вова Дружаев]

Все что в css в любом случае скачается.

WapSter, нет. не в любом случае. Если оно в медиазапросе и медиазапрос не выполняется:

@media screen and (min-width:1280px){
    body {
        background-image: url("http://ваш-сайт.ru/wp-content/uploads/2019/11/pic_1920.jpg");
    }
}

на экране в 1000 пикселей картинку и скачивать не будет.
Вот пруф otshelnik-fm.ru/post-group/zagruzhaem-background-v-wordpress-temu-tolko-dlya-shirokix-ekranov-pk/

[WapSter]

Владимир Дружаев, видимо допилили, раньше все подряд грузило. Спасибо за ссылку

Answer 1

[Вова Дружаев]

Ваш ответ наверно тут otshelnik-fm.ru/post-group/zagruzhaem-background-v-wordpress-temu-tolko-dlya-shirokix-ekranov-pk/
Браузеры умеют медиазапросы и достаточно умны чтобы и пикчи оттуда не выкачивать если медиазапрос не сработал