Возможно ли осуществить разную загрузку изображений в зависимости от разрешения монитора?

Question

[Евгений Корякин]

Возможно ли осуществить загрузку разных изображений в зависимости от монитора?
При этом не загружая 1920x1080 и 1280x720 вместе.

Answer 1

[Данакт Фрост]

1. Элемент picture. Поддержка: caniuse.com/#feat=picture

<picture>
  <source srcset="small-image.png" media="(max-width: 720px)">
  <img src="default-image.png" alt="">
</picture>

2. Элемент div с фоновым изображением, и медиа-запросы в css с изменением фонового изображения и размера div'а в зависимости от размера окна

.image {
  display: inline-block;
  width: 1200px;
  height: 700px;
  background: url('default-image.png');
}

@media (max-width: 720px) {
  .image {
    width: 600px;
    height: 400px;
    background: url('small-image.png');
  }
}

3. Элемент img с изменением атрибута src через javascript.

const imageDefault = 'default-image.png'
const smallImage = 'small-image.png'
const imageElement = document.getElementById('image')

function handleWindowResize() {
  const width = window.innerWidth

  if (width <= 720) {
      imageElement.src = smallImage
   } else {
      imageElement.src = imageDefault
   }
}

handleWindowResize()
window.addEventListener('resize', handleWindowResize)

Answer 2

[Андрей Федоров]

https://codepen.io/aliencash/pen/WZQELL?editors=1100

Comments

[Андрей Федоров]

Чтобы не было сомнений, сколько картинок грузится:

[Андрей Федоров]

Не забываем что caniuse.com/#search=picture

Answer 3

[Dark_Scorpion]

Проверяете переменные window.screen.width и window.screen.height и в зависимости от их значений подставляете нужный url на изображение. Или подгружаете ajax запросом.