Стиль страницы, который меняется в зависимости от размера экрана регулируется в CSS. (Если конечно не использовать JS)
В данном примере изображение и его настройки по дефолту установлено в классе .class, но дальше написан стиль, который использует media для корректировки в зависимости от размера экрана. Таким образом когда ширина экрана меньше 700px, то параметр background-image меняется, но остальные настройки остаются такими же
<html>
<head>
<title>Image</title>
<style>
.class {
display: block;
width: 500px;
background-image: url(https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg);
height: 500px;
border: 1px solid black;
}
@media (max-width: 700px) {
.class {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png);
}
}
</style>
</head>
<body>
<div class="class"></div>
</body>
</html>
Так же хочу обратить внимание на то, что картинка использована как бэкграунд блока div. Она не выводится отдельно, и устанавливается в CSS. Во многих случаях это крайне неудобно
