srcset — это атрибут тега img, который перечисляет несколько файлов одной картинки с указанием их ширины или плотности пикселей. Что это значит на практике: разметка отдаёт браузеру список вариантов, а он сам решает, какой файл скачать под конкретный экран. Работает атрибут в паре с sizes, где описана планируемая ширина изображения в разных раскладках макета.
Без адаптивной разметки изображений мобильное устройство тянет ту же тяжёлую версию, что и десктоп, и разгоняет вес страницы. Это бьёт по LCP — метрике из Core Web Vitals, где картинка часто оказывается крупнейшим элементом экрана. Проверить, какой файл реально загрузился, можно во вкладке Network в DevTools или через PageSpeed Insights.
§ 01Зачем нужен srcset
Задача атрибута — отдать маленькому экрану лёгкий файл, а плотному Retina-дисплею — версию с большим числом пикселей. Формат записи с дескриптором w выглядит так: img-480.jpg 480w, img-960.jpg 960w, img-1440.jpg 1440w. Браузер сопоставляет эти значения с шириной из sizes и плотностью экрана, после чего качает ровно один подходящий файл. Для чего нужно: сократить объём трафика на мобильных и ускорить отрисовку главного изображения, от которой зависит LCP.
§ 02Как устроен
Внутри атрибута — список пар через запятую: путь к файлу плюс дескриптор. Дескрипторов два вида. w задаёт реальную ширину файла в пикселях и работает вместе с sizes. x задаёт плотность: logo.png 1x, logo@2x.png 2x — без учёта размера вывода. Смешивать w и x в одном списке нельзя. Атрибут src при этом остаётся как запасной вариант для браузеров, которые механизм выбора картинки не поддерживают.
LCP 4.6 → 2.3 c — Интернет-магазин одежды на Shopify внедрил srcset с четырьмя размерами для карточек товара вместо одного тяжёлого файла. LCP на мобильных упал с 4.6 до 2.3 с за 5 недель, вес страницы −38%. Замер через PSI и CrUX-75th, отказы снизились на 11%.
трафик картинок +29% — B2B SaaS-медиа на WordPress добавил srcset и sizes в блог через плагин обработки изображений. Мобильный трафик из Google Картинок вырос на 29% за 4 месяца, время загрузки статей −1.4 с. Динамика по GA4 Acquisition и Search Console.
§ 03Как настраивается
Сначала готовят несколько копий изображения разной ширины — например 480, 960 и 1440 пикселей. Дальше в тег добавляют два атрибута:
srcset— перечень файлов с дескрипторамиw;sizes— правила вида(max-width: 600px) 100vw, 50vw, где описана ширина слота под картинку.
Если нужна ещё и подмена формата или арт-дирекшн, вместо одного img берут обёртку picture с несколькими source. Значение sizes должно совпадать с реальной шириной блока в CSS, иначе браузер выберет файл крупнее нужного.
§ 04Как проверить, что работает
Открой DevTools, вкладка Network, и посмотри столбец с реально загруженным файлом при разной ширине окна и эмуляции устройства. Второй способ — навести курсор на img в панели Elements: браузер покажет currentSrc, то есть выбранный вариант. PageSpeed Insights и Lighthouse отдельно ругаются пунктом Properly size images, если отзывчивые изображения настроены неверно и качается версия крупнее слота. Ещё один маркер — вес страницы на мобильном в отчёте: он падает, когда этот способ подгрузки отдаёт лёгкие файлы.