Is it possible to load images differently depending on the monitor resolution?

Question

css

Is it possible to load different images depending on the monitor?
At the same time, without loading 1920x1080 and 1280x720 together.

Answer 1

1. The picture element. Support: caniuse.com/#feat=picture

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

2. A div element with a background image, and media queries in css with changing the background image and the size of the div depending on the size of the window

.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. The img element with the src attribute changed via 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

Check the window.screen.width and window.screen.height variables and, depending on their values, substitute the desired url for the image. Or load with ajax request.