Srcset: как использовать?

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

Пример использования атрибута srcset с несколькими изображениями разного разрешения и плотности пикселей:

srcset="medium.jpg 1000w,

large.jpg 2000w"

sizes="(max-width: 600px) 100vw,

50vw">

В этом примере мы указываем, что небольшое изображение small.jpg используется по умолчанию для всех экранов и устройств. Также мы указываем два дополнительных источника изображений - medium.jpg и large.jpg. Каждый источник имеет свое разрешение (1000w и 2000w соответственно). С помощью атрибута sizes мы указываем, что для экранов с шириной до 600 пикселей будет использоваться ширина экрана во всю ширину (100vw), а на экранах большего размера - 50% ширины экрана (50vw).

Таким образом, если у пользователя маленький экран, то браузер загрузит small.jpg, если экран больше 600 пикселей, то будет загружено изображение medium.jpg (если ширина окна браузера 1000 пикселей или меньше), или large.jpg (если ширина окна браузера больше 1000 пикселей).

Применение атрибута srcset может значительно улучшить работу сайта на мобильных устройствах и на устройствах с высоким DPI (dark dots per inch), таких как новые смартфоны и планшеты. Оптимизация изображений под такие устройства может уменьшить время загрузки страниц, уменьшить трафик и сократить размер страниц на сервере.