Как использовать элемент изображения для резких изображений на мобильных устройствах

Элемент изображения получает широкое распространение и быстро распространяется (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>

Ответы

Ответ 1

Браузер учитывает плотность пикселей при выборе изображения. Таким образом, устройство с шириной экрана шириной 360 пикселей и плотностью 2x пикселей будет выбирать medium.jpg. Это именно то, что предназначено для описания дескриптора w и sizes! Не используйте picture здесь.