Что делает атрибут srcset у тега img в HTML

Что проверяют

Понимаете ли вы, что вариант картинки выбирает браузер, а не вы, и знаете ли разницу между адаптацией размера и художественной обрезкой. Заодно проверяют, думаете ли вы про вес страницы.

Как отвечать

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

Дескриптор x для картинки фиксированного размера:

<img src="logo.png" srcset="logo.png 1x, logo@2x.png 2x" alt="Логотип">

Дескриптор w для резиновой картинки, и тогда обязателен sizes, который сообщает, какой ширины она будет в макете:

<img src="photo-800.jpg"
     srcset="photo-480.jpg 480w, photo-800.jpg 800w, photo-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Фотография">

Объясните, зачем нужен sizes: препарсер выбирает файл до того, как посчитан макет и применён CSS, поэтому ширину ему называют заранее. Без sizes браузер считает картинку шириной во весь вьюпорт и тянет самый крупный вариант.

И разграничьте инструменты: srcset про один кадр в разных разрешениях, тег picture с вложенными source про смену кадра и формата, другую обрезку для узкого экрана и современный формат с откатом на jpeg.

Где спотыкаются

Пишут дескрипторы w и забывают sizes. Экономии не выходит, браузер грузит крупный файл, а на замерах это выглядит как «srcset не работает».

Второе: ждут, что будет взят минимально достаточный файл. Спецификация оставляет браузеру свободу: уже закэшированный крупный вариант, оценка скорости сети, режим экономии трафика влияют на выбор, поэтому проверять надо на реальном устройстве, а не рассуждением.

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