Справочник HTML & CSS

srcset

Несколько файлов одной картинки разного размера: браузер выбирает подходящий для экрана.

Синтаксис

<img src="s.jpg" srcset="s.jpg 400w, l.jpg 800w" sizes="(max-width: 600px) 100vw, 50vw" alt="…">

Параметры

Параметр	Тип	Описание
srcset	URL + width (400w) or density (2x)	Список файлов с их шириной или плотностью пикселей.
sizes	media conditions + width	Какой ширины картинка будет на экране при разных условиях.

Примеры

Выбор по ширине картинки на экране:

<img
  src="/media/photo-400x250.jpg"
  srcset="/media/photo-400x250.jpg 400w, /media/photo-800x500.jpg 800w"
  sizes="(max-width: 600px) 100vw, 400px"
  alt="A cup of coffee" style="max-width: 100%;">

Выбор по плотности пикселей (Retina):

<img src="/media/photo-400x250.jpg"
     srcset="/media/photo-400x250.jpg 1x, /media/photo-800x500.jpg 2x"
     alt="A cup of coffee" width="400">

Примечания

Браузер сам решает, какой файл взять, учитывая экран и даже скорость сети — поэтому в разных условиях вы можете увидеть разные файлы. sizes нужен только вместе с дескрипторами w. Если на узком экране нужна другая картинка (другой кадр), используйте <picture>.

См. также

<img> — Картинка.
<picture> — Контейнер для нескольких вариантов картинки: браузер выбирает подходящий `<source>` или берёт `<img>`.
<source> — Один из вариантов файла для `<video>`, `<audio>` или `<picture>`.
src — Адрес встраиваемого файла у `<img>`, `<video>`, `<audio>`, `<script>`, `<iframe>`.

Вопросы и ответы по теме

В учебнике

Адаптивные изображения — Как картинки подстраиваются под экран — max-width, aspect-ratio, object-fit, атрибуты srcset и sizes, элемент picture.

Спасибо, что читаете!