@iminby

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

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

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

2.Второй вопрос, если в css задан background один просто , а второй в медиа-запросе на определенный размер, браузер будет так же пытаться грузить их оба и будет идти запрос get?
  • Вопрос задан
  • 70 просмотров
Пригласить эксперта
Ответы на вопрос 2
@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://...);
    } 
}
Ответ написан
bestowhope
@bestowhope
Печатает...
а второй в медиа-запросе на определенный размер, браузер будет так же пытаться грузить их оба и будет идти запрос get?


Если через медия - он обратится(начнет грузить) ко второй картинке только когда это понадобится. В твоем случае это только при достижении разрешения в медиазапросе
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы