Атрибут imagesrcset (от английского image srcset, «набор картинок») позволяет предзагрузить адаптивную картинку: браузер выбирает из списка подходящий файл так же, как для srcset, и начинает его скачивать ещё до разбора остальной разметки. Закрывающий тег для него не нужен: атрибут пишется внутри открывающего тега <link>, а сам link закрывающего тега не имеет.
Работает он только вместе с rel="preload" и as="image". Все результаты ниже я проверил в браузере, на котором я проверял, а выбор картинки в демонстрациях делает уже ваш браузер.
<link rel="preload" as="image"
imagesrcset="s300.jpg 300w, s600.jpg 600w, s900.jpg 900w"
imagesizes="100vw">В этой статье
- Что такое атрибут imagesrcset в HTML и зачем он нужен
- Для каких тегов работает imagesrcset: только link
- Как записать imagesrcset: кандидаты и дескрипторы
- Какую картинку выберет браузер при предзагрузке
- Как imagesrcset работает с imagesizes
- Когда предзагрузка срабатывает, а когда нет
- Imagesrcset вместе с img: совпадение srcset и sizes
- Imagesrcset в JavaScript: свойства imageSrcset и imageSizes
- Частые ошибки в атрибуте imagesrcset
- Шпаргалка по атрибуту imagesrcset
Что такое атрибут imagesrcset в HTML и зачем он нужен
Обычная предзагрузка картинки через href умеет запросить только один файл. Для адаптивной картинки это неудобно: браузер выберет другой файл, и предзагруженный пропадёт зря. imagesrcset решает это: список кандидатов у предзагрузки такой же, как у самой картинки.
Вторая половина пары это imagesizes: он играет роль sizes, когда в списке указаны ширины. Подробнее о том, как браузер выбирает файл по списку, рассказывает статья про srcset.
По данным каталога web-features, возможность получила статус «Baseline: поддерживается широко» с 11.06.2026: в первых браузерах она появилась в марте 2019 года, в последнем из основных в декабре 2023 года. Описание приёма есть и в статье web.dev.
Для каких тегов работает imagesrcset: только link
Атрибут относится к <link> с rel="preload" и as="image". Свойство imageSrcset я нашёл только у этого тега. У <img>, <source>, <script>, <iframe>, <input>, <object> и <a> его нет: у картинки список записывают в обычный srcset.
| Тег | Что можно сказать | Пример записи |
|---|---|---|
<link> | Предзагрузка адаптивной картинки | <link rel="preload" as="image" imagesrcset="a-1x.jpg 1x, a-2x.jpg 2x"> |
<img> | Здесь список называется srcset | <img src="a-1x.jpg" srcset="a-1x.jpg 1x, a-2x.jpg 2x" alt=""> |
Как записать imagesrcset: кандидаты и дескрипторы
Значение записывают так же, как srcset: через запятую адреса файлов, у каждого дескриптор. Бывает два вида дескрипторов: плотность (1x, 2x) и ширина в пикселях (300w, 600w).
| Вид | Что пишут | Пример записи |
|---|---|---|
| По плотности экрана | Дескрипторы 1x, 2x | <link rel="preload" as="image" imagesrcset="a-1x.jpg 1x, a-2x.jpg 2x"> |
| По ширине файла | Дескрипторы w и imagesizes | <link rel="preload" as="image" imagesrcset="s300.jpg 300w, s600.jpg 600w" imagesizes="100vw"> |
| С запасным адресом | href для старых браузеров | <link rel="preload" as="image" href="a-1x.jpg" imagesrcset="a-1x.jpg 1x, a-2x.jpg 2x"> |
Какую картинку выберет браузер при предзагрузке
Я проверил, какой файл запрашивает link, при разной плотности экрана и ширине окна. Кандидаты 300w, 600w, 900w.
| Условие | Что запросилось | Пример записи |
|---|---|---|
Дескрипторы 1x и 2x, плотность экрана 1 | Файл с 1x | imagesrcset="a1.png 1x, a2.png 2x" |
| Те же, плотность экрана 2 | Файл с 2x | imagesrcset="a1.png 1x, a2.png 2x" |
Ширины, imagesizes="100vw", окно 400 | Файл 600w | imagesizes="100vw" |
| То же, окно 800 | Файл 900w | imagesizes="100vw" |
imagesizes="50vw", окно 800 | Файл 600w | imagesizes="50vw" |
imagesizes не записан, окно 800 | Файл 900w: слот считается равным 100vw | <link rel="preload" as="image" imagesrcset="..."> |
100vw, окно 400, плотность экрана 2 | Файл 900w | imagesizes="100vw" |
Выбор сделан так, как для обычного srcset: из списка берётся первый кандидат, которого хватает на нужную ширину с учётом плотности экрана.
Пример: какой файл выберет предзагрузка в вашем браузере
Выберите значение imagesizes. Браузер сам выбирает кандидата, а демонстрация показывает его, ширину кадра и плотность вашего экрана.
Выбор делает ваш браузер: демонстрация создаёт настоящие предзагрузки и смотрит, какая из них сработала. Результат зависит от ширины кадра и плотности вашего экрана.
Как imagesrcset работает с imagesizes
Если в списке ширины, браузеру нужно знать, какой ширины будет слот картинки на странице. Это и сообщает imagesizes. Записывают его так же, как sizes: в пикселях, в долях окна или с условиями.
| Запись | Что означает | Пример записи |
|---|---|---|
100vw | Слот на всю ширину окна | imagesizes="100vw" |
50vw | Слот в половину ширины окна | imagesizes="50vw" |
300px | Слот шириной 300 пикселей | imagesizes="300px" |
| Не записан | Считается 100vw | imagesrcset="s300.jpg 300w, s600.jpg 600w" |
При дескрипторах 1x и 2x imagesizes не нужен: выбор идёт только по плотности экрана.
Когда предзагрузка срабатывает, а когда нет
Нужны два условия: rel="preload" и as="image". Я проверил, что будет без них и в нескольких особых случаях.
| Ситуация | Что получилось | Пример записи |
|---|---|---|
rel="preload" и as="image" | Файл запрошен | <link rel="preload" as="image" imagesrcset="a.png 1x"> |
Нет as | Запроса нет | <link rel="preload" imagesrcset="a.png 1x"> |
as="script" | Запроса нет | <link rel="preload" as="script" imagesrcset="a.png 1x"> |
rel="prefetch" и as="image" | Запроса нет | <link rel="prefetch" as="image" imagesrcset="a.png 1x"> |
rel="stylesheet" | Запроса нет | <link rel="stylesheet" imagesrcset="a.png 1x"> |
media не выполнено | Запроса нет | <link rel="preload" as="image" media="(min-width: 1000px)" imagesrcset="a.png 1x"> |
Есть и href, и imagesrcset | Запрошен файл из imagesrcset, href не запрашивался | <link rel="preload" as="image" href="fallback.png" imagesrcset="a1.png 1x, a2.png 2x"> |
Только href | Запрошен файл из href | <link rel="preload" as="image" href="only.png"> |
Пустой imagesrcset и href | Запрошен файл из href | <link rel="preload" as="image" href="h.png" imagesrcset=""> |
Правило про href такое: пока imagesrcset непустой, он главнее, а href остаётся запасным для старых браузеров, которые этот атрибут не знают.
Пример: когда предзагрузка срабатывает
Выберите вариант. Демонстрация создаёт настоящую предзагрузку и сообщает, загрузилась ли картинка.
Результат показывает ваш браузер по событию загрузки. Картинки создаются прямо в демонстрации.
Imagesrcset вместе с img: совпадение srcset и sizes
Предзагрузка помогает, только если браузер потом выберет для самой картинки тот же файл. Для этого imagesrcset и imagesizes у link должны совпадать с srcset и sizes у <img>. Я проверил три случая.
| Условие | Что запросилось | Пример записи |
|---|---|---|
srcset и sizes одинаковые | Один запрос: файл 600w использован повторно | <img srcset="..." sizes="100vw" alt=""> |
sizes у img другой (окно 800) | Два запроса: 900w и 600w, предзагрузка пропала зря | <img srcset="..." sizes="50vw" alt=""> |
imagesizes не записан, у img sizes="300px" | Два запроса: 900w и 300w | <img srcset="..." sizes="300px" alt=""> |
Практические советы. Копируйте значения из img в link без изменений. Не ставьте на главной картинке loading="lazy", как описано в статье про loading: иначе предзагрузка теряет смысл. Для главной картинки у link можно добавить fetchpriority.
<link rel="preload" as="image"
imagesrcset="s300.jpg 300w, s600.jpg 600w, s900.jpg 900w"
imagesizes="100vw" fetchpriority="high">
<img src="s600.jpg"
srcset="s300.jpg 300w, s600.jpg 600w, s900.jpg 900w"
sizes="100vw" alt="Главное фото">Imagesrcset в JavaScript: свойства imageSrcset и imageSizes
В скрипте атрибуты доступны как свойства imageSrcset и imageSizes у элемента link. Запись в свойство меняет атрибут.
| Действие | Что получилось | Пример записи |
|---|---|---|
| Чтение без атрибута | Вернулась пустая строка | link.imageSrcset |
| Запись списка | Атрибут imagesrcset изменился | link.imageSrcset = 'a.png 1x' |
| Запись размеров | Атрибут imagesizes изменился | link.imageSizes = '50vw' |
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'image';
link.imageSrcset = 'a-1x.jpg 1x, a-2x.jpg 2x';
document.head.append(link);Частые ошибки в атрибуте imagesrcset
Большинство ошибок связано с тем, что предзагрузка и картинка выбирают разные файлы, или с пропущенными условиями.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Нет as="image" | Предзагрузки нет | Добавить as="image" |
rel="prefetch" вместо preload | Предзагрузки нет | Писать rel="preload" |
imagesrcset у img | У тега такого свойства нет | Для картинки писать srcset |
imagesizes не совпадает с sizes у img | Два запроса вместо одного | Скопировать значение без изменений |
Список у link и у img разный | Предзагрузка пропадает зря | Один и тот же список в обоих местах |
Ширины без imagesizes | Слот считается 100vw, выбор может не совпасть | Записать imagesizes |
Только href у адаптивной картинки | Грузится один файл, а картинка выберет другой | Добавить imagesrcset |
Ждут, что href загрузится вместе с imagesrcset | Запрошен только выбранный из imagesrcset | Оставить href как запасной |
media не выполнено | Предзагрузки нет | Проверить условие |
| Предзагрузка для картинок, которые не видны сразу | Лишний запрос | Предзагружать только главную картинку |
loading="lazy" на предзагруженной картинке | Смысл предзагрузки теряется | Убрать lazy у главной картинки |
Шпаргалка по атрибуту imagesrcset
Всё главное из статьи в одной таблице.
| Задача | Как записать | Пример записи |
|---|---|---|
| Предзагрузить по плотности | Дескрипторы 1x, 2x | <link rel="preload" as="image" imagesrcset="a1.jpg 1x, a2.jpg 2x"> |
| Предзагрузить по ширине | Дескрипторы w и imagesizes | <link rel="preload" as="image" imagesrcset="s300.jpg 300w, s600.jpg 600w" imagesizes="100vw"> |
| Условия | rel="preload" и as="image" | <link rel="preload" as="image"> |
| Тег | Только link | <link rel="preload" as="image" imagesrcset="..."> |
| Запасной адрес | href для старых браузеров | href="a1.jpg" |
| С картинкой | Те же srcset и sizes у img | <img srcset="..." sizes="100vw" alt=""> |
| Приоритет | Атрибут fetchpriority | fetchpriority="high" |
| Прочитать из скрипта | Свойства imageSrcset, imageSizes | link.imageSrcset |
