Как сделать адаптивные изображения?

Подскажите вариант, как сделать адаптивные изображения?
Что хочется:
Под каждый breakpoint грузится свое изображение Учитывается изображение для retina дисплеев Изображения масштабируются

Ответ

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


Допустим, вы хотите, чтобы на экранах до 400 пикселей было одно изображение, а на экранах больше другое. Делаем так:

Также вы хотите, чтобы принималась в учет плотность пикселей. Тогда необходимо в атрибуте srcset указывать несколько путей изображений, через пробел писать 1x, 2x и, если необходимо, то и 3x. x позволяет обратиться к device-pixel-ratio

Также вы хотите для разных брейкпоинтов разный размер изображения, тут придет на выручку атрибут sizes. У нас будет реализовываться следующий сценарий: 1) для экранов меньше 800 пикселей будет изображение ordinary.jpg, 1.1) для экранов 400 и меньше пикселей изображение будет иметь ширину 100vw, в остальных случаях оно будет занимать 70vw; 2) для экранов больше 800 пикселей ordinary2.jpg, 2.2) для экранов больше 1400 пикселей у него будет ширина 40vw, в остальных случаях 50vw