Простой подход к работе с отзывчивыми изображениями

Возмём 3 произвольные точки:

<picture>
    <source srcset="изображение_для_экранов_меньше_360" media="(max-width: 360px)">
    <source srcset="изображение_для_экранов_меньше_700" media="(max-width: 700px)">
    <source srcset="изображение_для_экранов_меньше_1240" media="(max-width: 1240px)">
    <img src="оригинальное_изображение">
</picture>

Сначала проверяется первый source, если экран устройства меньше либо равен 360px, то используется это изображение, если больше, переходит к следующему source.
Если ни один из source не подошел по условию, используется оригинальное изображение

Простой подход к работе с отзывчивыми изображениями

Проверяли, увы, с медленным интернетом тянется тоже 2х, но ужимается в режиме Экономии трафика

Простой подход к работе с отзывчивыми изображениями

Ребят, ну вы чего? В 2020 без этого уже никак, стандарт
Шаг 1. Добавляем 2-6 точек под сетку
Шаг 2. Добавляем 1.5х-2х для устройств с большой плотностью пикселей
Шаг 3. Не забываем про .webp и loading="lazy"
Для любых сайтов, делает верстальщик, статику ручками, динамику отдает на бек