Элемент изображения получает широкое распространение и быстро распространяется (http://caniuse.com/#search=picture), и я думаю, что это отличный способ избежать обслуживания негабаритных/низкорослых, особенно если вы хотите отображать одну и ту же картинку на мобильном и рабочем столе при 100% ширины окна просмотра.
Это можно решить следующим образом:
<img
srcset="large.jpg 1920w,
medium.jpg 720w,
small.jpg 360w"
src="medium.jpg">
Это позволяет браузеру быть умным и решать, какое изображение загружаться, но я нахожу проблему с этим подходом: многие мобильные устройства имеют плотность пикселей 2 или более! Поэтому при отображении его на 360w нам действительно нужен средний образ, если мы хотим, чтобы это изображение выглядело резким. Это можно сделать следующим образом:
<picture>
<source srcset="http://goo.gl/LsuU9t" media="(min-width: 720px)">
<source srcset="http://goo.gl/LsuU9t" media="(min-width: 360px and min-resolution: 2dppx)">
<img src="http://goo.gl/LsuU9t">
</picture>