​​Как использовать адаптивные изображения в HTML? Рассмотрим типичный сценарий - в шапке каждого поста установлена картинка, для экрана компьютера она узкая и длинная, например 1200x200 пикселей, а для экрана смартфона 320x200 пикселей. Если использовать большую картинку и просто обрезать лишнее на экране смартфона, например с помощью object-fit, то получим низкую скорость загрузки страницы. Идеально иметь несколько версий изображения и загружать только одно для каждого устройства. Чтобы устранить эту проблему, добавим в <img> атрибуты srcset и sizes. Они представляет собой набор значений, разделенных запятыми. Каждое значение srcset содержит url-изображения и дополнительные параметры(дескрипторы), каждое значение sizes содержит медиа запрос и минимальный размер картинки: <img src="small-image.png" alt="A description of the image." srcset="small-image.png 480w, large-image.png 800w" sizes="(max-width: 600px) 480px, 800px" > Атрибуты srcset и size выглядят сложными, но их не так уж сложно понять, если отформатировать их, как показано выше. Srcset определяет набор изображений, которые мы разрешаем браузеру выбирать, а также размер каждого изображения, обратите внимание, что здесь используется единица измерения w, а не пиксели. Sizes определяют набор медиа-условий (например, ширину экрана) и указывают, какой размер изображения лучше всего выбрать, когда определенные медиа-условия верны. Браузер определит первое истинное выражение в sizes, проверит размер указанный в нем и загрузит изображение из списка srcset, которое имеет тот же размер, или первое изображение, которое больше выбранного размера. Типичный Веб Разработчик