Как грузить разные изображения в зависимости от максимальной ширины экрана?

Question

[bxspb]

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

Да разница большая, альбомные 2k 90% для настолок по 1000kb и книжные мобилки по 80kb
Нет, бэкграундом не вариант

Comments

[v3shin]

Вместо каждого изображения отображать заглушку, в data- каждого изображения прописать данные об изображениях для разных разрешений. После загрузки страницы пройтись по нужным изображениям js'ом и, в зависимости от разрешения экрана, подменить src на данные из data-.

[Ankhena]

Для этого есть тег picture

[bxspb]

Ankhena, точняк, забыла про него, спасибо. А чего все боитесь в ответы то писать?))

[Ankhena]

bxspb, я как-то подробно отвечала на этот вопрос (в комментариях к нему). Он был, наверное, по тегу QnA.
В данном случае, потому что это легко гуглится и вы просто забыли тег.

[bxspb]

Ankhena, первые страниц 10 гуглятся исключительно медиазапросы

[Ankhena]

bxspb, да? Мне первой же ссылкой выдает подробную статью с MDN.

[Антон Литвиненко]

srcset

[bxspb]

Ankhena, это по тому что вы в гугле гуглите)

Answer 1

[jIVOYz]

Есть такой крутой тег в HTML называется picture, там можно установить какая картинка будет отображаться в зависимости от экрана пользователя.
Посмотри в интернете как оно делается.