Сейчас, во времена адаптивных шаблонов, уже некого не удивишь совершенно разным дизайном для мобильных платформ и десктопов, но довольно часто верстальщики приналегают оптимизацией размера картинок и отображаю на всех устройствах одну и ту же картинку, просто меняя ее визуальную ширину / высоту.
Итак атрибут srcset позволяет задать какие картинки, при какой ширине экрана нужно загружать. Это позволяет не только экономить трафик, но и проходить Google pagespeed.
Пример того, как можно отображать разные картинки в зависимости от размера экрана:
<picture>
<source srcset="/img/small.jpg" media="(max-width: 300px)">
<source srcset="/img/medium.jpg" media="(max-width: 699px)">
<source srcset="/img/big.jpg" media="(min-width: 700px)">
<img src="/img/default.jpg" alt="ALT">
</picture>
Живое демо 1 - нужно уменьшить размер окна.
Еще пример:
<img src="big.jpg" alt="img"
srcset="small.jpg 400w,
med.jpg 800w,
big.jpg 1000w">
Живое демо 2
Еще есть sizes="50vw", этот атрибут позволяет браузеру самому выбирать какую картинку отображать, что бы она нормально смотрелась, например, на половине экрана (50vw) .
Детальнее можно прочесть в:
Полное руководство по отзывчивым изображениям
Адаптивные изображения на сайте