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

Question

[SevenShots]

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

Проблема в том, что изображения с 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? Либо как то по другому решить данную задачу?

Answer 1

[Саид Шукуров]

Здравствуйте, можно было бы скинуть и CSS код, но ладно, а вообще это все делается через Медиа запросы, я так вижу вы это и так знаете но их нужно и правильно прописывать
media (min-width:767px) and (max-width:767){
.img__for__decstop{
display:none;
}
}

Comments

[SevenShots]

Там как раз они через media и прописаны. сейчас приложу код

[SevenShots]

.kviz__img img {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 6px 24px rgb(0 0 0 / 35%);
}
@media (max-width: 481px)
.kviz__img .mob_img {
    display: block;
}

[SevenShots]

При правильном указании media и срабатывании display:none изображения всё равно загружаются

[Саид Шукуров]

SevenShots,
Во первых:
display:block /*не совсем идет*/
display:none /*вот так*/
Во вторых:
media screen and (max-width: 481px){
.kviz__img .mob_img {
display: none;
}
}
Либо как указал galkinhtml сделать, но всем по своему проще, мне медиа запросами

[SevenShots]

Саид Шукуров, проверил, он всё равно загружает их(

[Саид Шукуров]

SevenShots, если вам не помогло то попробуйте вот это:
media screen and (max-width:481px) and (min-width:481px){
.kviz__img .mob_img {
display: none;
}
}

[SevenShots]

Саид Шукуров, понял, спасибо!) Как попробую отпишусь!

Answer 2

[galkinhtml]

Мне проще это делать через атрибут sizes:
sizes="((min-width: 600px) and (max-width: 1004px)) 84vw, (min-width: 1005px) 60vw, 100vw"
Вот здесь расписано:
https://serpstat.com/ru/blog/kak-ispolzovat-atribu...

Comments

[SevenShots]

Тогда они не прогружаются?

[galkinhtml]

Подгружается только одна картинка, отвечающая условию в sizec

[SevenShots]

galkinhtml, Понял, спасибо, попробую!)