Коротко:
Тег source
используется для определения нескольких файлов-ресурсов в тегах video
, audio
или picture
. В вашем случае это тег picture
.
Атрибут srcset
указывает адрес медиа-файла (в вашем случае это URL-адрес изображения).
Атрибут media
определяет условие, при котором этот источник будет использован. Любой современный браузер самостоятельно выбирает (ответ на ваш вопрос: загружает на устройство. Остальные медиа-файлы при этом не будут загружены) наиболее подходящий источник из списка в соответствии с условием.
Рекомендация:
Дополнительно предлагаю использовать атрибут sizes
, который устанавливает размеры изображения в зависимости от media
-условия. Вот самый простой пример его использования:
<img srcset="demo.jpg 600w,
demo.jpg 800w,
demo.jpg 1200w"
sizes="(max-width: 600px) 520px,
(max-width: 800px) 720px,
1200px"
src="demo.jpg">
Более подробную информацию об атрибуте sizes
и его использовании можно найти на просторах Интернета.