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)
