Как отключить загрузку изображения браузером при определенном размере экрана?

Question

[iminby]

1.Подскажите, есть изображение, которое находится в блоке, оно при размере экрана меньше 767px скрывается через css, но понятное дело, браузер из разметки его грузит и идет get запрос.
При таком размере, чтобы не грузить в пустую данное изображение, я попробовал использовать атрибут sizes=(min-width: 767px), но судя по браузеру оно всё равно его загружает.

Атрибут sizes работает лишь с srcset?
Или каким образом можно тут решить момент?

2.Второй вопрос, если в css задан background один просто , а второй в медиа-запросе на определенный размер, браузер будет так же пытаться грузить их оба и будет идти запрос get?

Answer 1

[strelok011]

1. Для картинок есть такой тег как picture
Позволяет подгружать нужное изображение в зависимости от размера окна, подгружать различные форматы изображений, на случай если какой-то не поддерживается.
2. Что запрещает завернуть в медиа-запрос оба условия?

@media screen and (max-width: 767px) {   
    .img{
    	background-image: url(http://...);
    } 
}

@media screen and (min-width: 768px) {      
    .img{      
    	background-image: url(http://...);
    } 
}