Как подгружать картинки меньшего размера для мобильных устройств?

[ЮрийВеб]

Вопрос по ускорению загрузки сайта для мобильных размеров экрана. 

Как подгружать картинки меньшего размера для мобильных устройств, если адаптивность задается медиа-запросами, которые располагаются в конце CSS-файла? Ведь при этом все равно сначала грузится большая картинка для десктопного варианта, а уже потом вместо нее можно будет подгрузить меньшую картинку для меньшего размера экрана? Так ведь? При этом ускорения как-то не получается...

Так как для мобильного сразу подгружать картинку помельче? Неужели только отдельный CSS-файл для этого делать?

[Igor Schnaider]

Так просто пропишите правила для каждого экрана:

@media (min-width: 500px) {
  .image {
    background-image: url('./path_to_image/image.jpg?small');
  }
}

@media (min-width: 700px) {
  .image {
    background-image: url('./path_to_image/image.jpg?medium');
  }
}

@media (min-width: 900px) {
  .image {
    background-image: url('./path_to_image/image.jpg?large');
  }
}

 

[ЮрийВеб]

Спасибо!

А при такой записи для экрана width>=1024px не загрузятся ли последовательно все три картинки? Или я что-то затупил...

Вот, кстати, еще решение - http://vavik96.com/kak-sdelat-kartinku-adaptivnoj/

 

Edited November 29, 2016 by ЮрийВеб

[by chris]

@media all and (min-width: 500px) and (max-width: 669px) {
  .image {
    background-image: url('./path_to_image/image.jpg?small');
  }
}

@media all and (min-width: 700px) and (max-width: 889px) {
  .image {
    background-image: url('./path_to_image/image.jpg?medium');
  }
}

@media all and (min-width: 900px) {
  .image {
    background-image: url('./path_to_image/image.jpg?large');
  }
}

 

 

 

[Int]

Есть ещё srcset и sizes, но не всех их поддерживают.