Очередная интересная штука от разработчиков HTML, о которой мало кто знает.
Итак, обычно элемент <img> позволяет указать только один путь к файлу:
А если мы хотим разные размеры под разные разрешения? Конечно, можно помучиться с JS, бэком или даже CSS. Но есть путь проще, “из коробки”. Два новых атрибута — srcset и sizes — позволяющие добавить дополнительные изображения с пометками, чтобы браузер выбрал подходящее.
srcset включает названия изображений, среди которых браузер выберет нужное и их размеры. Перед каждой запятой части значения в таком порядке:
- Название изображения (elva-fairy-480w.jpg.)
- Пробел.
- Актуальная ширина картинки в пикселах (480w) — заметьте, что здесь используется w вместо px, как вы могли ожидать. Эта настоящая ширина изображения.
sizes определяет перечень медиавыражений (например, ширину экрана) и указывает предпочтительную ширину изображения, когда определённое медиавыражение истинно. В нашем случае, перед каждой запятой мы пишем:
- Медиа-условие ((max-width:480px)). В этом случае, мы говорим "когда viewport width меньше или равен 480 пикселям".
- Пробел.
- Ширину слота (в оригинале "width of the slot"), занимаемую изображением, когда медиа-условие истинно. (440px)
Итак, с такими атрибутами, браузер сделает следующее:
- Посмотрит на ширину экрана устройства.
- Попытается определить подходящее медиа-условие из списка в атрибуте sizes.
- Посмотрит на размер слота к этому медиавыражению.
- Загрузит изображение из списка из srcset, которое имеет тот же размер, что и выбранный слот, или, если такого нет, то первое изображение, которое больше размера выбранного слота.
Часть материалов взята с сайта https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images