img srcset - игнорировать плотность пикселей

Question

У меня есть два изображения: один - 1000 x 800 пикселей («большой»), а один - 200 x 200 пикселей («маленький»). Я хочу использовать srcset/размеры/picturefill, чтобы отобразить небольшое изображение, когда на экране меньше или равна 500 CSS пикселей в ширину, и большое изображение в противном случае.

Вот соломенный человек предложение: http://jsfiddle.net/ghhjfo4z/1/embedded/result/

<img srcset="http://i.imgur.com/hw9O9Ia.jpg 1000w, http://i.imgur.com/BgLoqRx.jpg 500w"> 

Это прекрасно работает на моем ом дисплее плотности пикселей. Но когда я переключаюсь на дисплей сетчатки с плотностью в 2 пикселя, внезапно небольшое изображение отображается только тогда, когда область просмотра меньше или равна 250 пикселям CSS.

Есть ли способ заставить браузер использовать небольшое изображение на моем дисплее с плотностью 2 пикселя, когда область просмотра меньше или равна 500 пикселей?

В основном я хочу игнорировать плотность пикселей устройства, а также использовать srcset и/или размеров только выбрать изображение, основанное на ширине CSS пикселя в окне просмотра.

Answer 1

Вкратце это невозможно. Если вы хотите иметь больше контроля, вы можете использовать элемент изображения.

<picture> 
    <source srcset="img-500w.jpg" media="(max-width: 650px)" /> 
    <img srcset="img-1000w.jpg" /> 
</picture> 

Существует также интересный lazySizes plugin for you, optimumx. Разметка будет выглядеть следующим образом:

<img 
    data-srcset="http://placehold.it/300x150 300w, 
     http://placehold.it/700x300 700w, 
     http://placehold.it/1400x600 1400w, 
     http://placehold.it/2800x1200 2800w" 
    data-sizes="auto" 
    data-optimumx="1.5" 
    class="lazyload" 
    src="http://placehold.it/300x150" 
    alt="flexible image" /> 

Было бы целесообразно, чтобы установить его на 1.2 или выше 1.5, а не только 1.

Для других performance vs. retina considerations посмотрите здесь.

Answer 2

Просто для завершения: я нашел следующее решение работает для меня:

<img 
    srcset="http://i.imgur.com/hw9O9Ia.jpg 1000w, 
     http://i.imgur.com/BgLoqRx.jpg 500w" 
    sizes="(-webkit-min-device-pixel-ratio: 2) 50vw, 
     (min-resolution: 192dpi) 50vw, 
     (min-resolution: 2dppx) 50vw, 
     (-webkit-min-device-pixel-ratio: 3) 33.33vw, 
     (min-resolution: 288dpi) 33.33vw, 
     (min-resolution: 3dppx) 33.33vw" />