Не отзывчивое изображение в эмуляторе телефона ⇐ CSS

[Anonymous]

Я хочу сделать супероптимизированный сайт для любимого проекта. Возникла необходимость адаптировать изображения так, чтобы на экранах ПК было изображение в высоком разрешении, а на телефонах - маленькое.
Я сделал адаптивное изображение, меняющее размер в зависимости от пикселей окна пользователя, на ПК все работает нормально, но когда я включаю симуляцию телефона в режиме разработчика, все работает не очень: изображение не адаптируется, в результате вместо этого из 300 КБ, в DOM загружается 1,2 МБ, это огромные цифры в секундах, особенно если сеть 3G.
У меня такая проблема с самого начала изучения WEB, пробовал решить на 2-х браузерах Firefox и Chrome - не пропадает. Какие есть советы по решению проблемы?

Код: Выделить всё

[img]assets/images/image-3840.jpg[/img]
 width="100%"
alt="Cyber Prototype" >

Ошибка реагирования

< /p>
Если изображение больше 1280 пикселей


Если изображение меньше 1280 пикселей



P.S. Я знаю, что могу использовать элемент
, но есть ли более элегантное решение?
Я пытался применить srset
Я ожидал, что мое изображение будет адаптировано для телефонов
В результате мое изображение не адаптируется под телефоны и нагружает систему пользователя с ненужной большой картинкой

Подробнее здесь: https://stackoverflow.com/questions/791 ... e-emulator