Как в <img> поменять картинку при определенной ширине экрана?

#html #css

В background-image можно поменять через media запросы, а как это сделать с тегом
img? Например, для мобильников подставить картинку поменьше, чтобы они не грузили изображения
по 1000px и более. Возможно ли решение через css или надо как-то по-другому?
    

Ответы

Ответ 1




Дока: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Поддержка браузеров: https://caniuse.com/#search=srcset


Ответ 2

Вы можете использовать следующий подход, переключая изображения с помощью media-queries:




	
	
	



Ответ 3

Через img вы уже отправили запрос. Для таких вещей делается мобильная версия сайта,
которая отдает именно контент для мобильных устройств.