Srcset html что это?

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

<img
  src="lake-800.jpg"
  srcset="lake-400.jpg 400w, lake-800.jpg 800w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Озеро у леса">

Числа 400w и 800w должны соответствовать реальной ширине файлов в пикселях. Sizes описывает предполагаемую ширину места, которое изображение занимает в раскладке при данных условиях. Это подсказка для выбора ресурса, а не CSS-правило, которое само задаёт отображаемую ширину. Настройте размеры элемента стилями отдельно и согласуйте их с описанием sizes.

Другой вариант — дескрипторы плотности 1x, 2x, когда изображение занимает известное место и предлагаются версии разной плотности. Не смешивайте ширинные и плотностные дескрипторы в одном списке. Для смены самой композиции или кадрирования по условиям подходит picture с источниками, а не только набор копий разного размера.

Браузер принимает решение с учётом условий, плотности экрана и других факторов. Не обещайте, что после каждого изменения ширины он обязательно скачает другой файл: уже загруженный подходящий ресурс может остаться в использовании. Проверяйте выбранное изображение через currentSrc и запросы в инструментах разработчика, учитывая кэш.

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