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

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)

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