@SevenShots

Как убрать загрузку display:none изображений находящихся в?

Суть в том, что есть изображения для десктопа, а есть для мобилки и цель сделать максимально легкий сайт для мобильных устройств, тем самым ускорив загрузку.

Проблема в том, что изображения с display: none также подгружаются на мобильное устройство. А на десктоп соответственно подгружаются изображения для мобилок, тем самым замедляя загрузку.

Пробовал применять media к , но он совсем не рабоатет.

Вот пример кода
<picture>
<source srcset="img/step1/1.avif" type="image/avif">
<source srcset="img/step1/1.webp" type="image/webp">
<img src="img/step1/1.jpg">
</picture>


Есть ли возможность убрать загрузку изображений display:none? Либо как то по другому решить данную задачу?
  • Вопрос задан
  • 91 просмотр
Пригласить эксперта
Ответы на вопрос 2
Said927
@Said927
a little advanced программист
Здравствуйте, можно было бы скинуть и CSS код, но ладно, а вообще это все делается через Медиа запросы, я так вижу вы это и так знаете но их нужно и правильно прописывать
media (min-width:767px) and (max-width:767){
.img__for__decstop{
display:none;
}
}
Ответ написан
galkinhtml
@galkinhtml
Мне проще это делать через атрибут sizes:
sizes="((min-width: 600px) and (max-width: 1004px)) 84vw, (min-width: 1005px) 60vw, 100vw"
Вот здесь расписано:
https://serpstat.com/ru/blog/kak-ispolzovat-atribu...
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
30 нояб. 2021, в 22:17
1000 руб./в час
30 нояб. 2021, в 21:47
1000 руб./за проект
30 нояб. 2021, в 21:47
1000 руб./за проект