Как работает изображение Srcset?

Question

Я создал быстрый пример того, что до сих пор переживает мой опыт.

1. 160px-изображение никогда не загружается.
2. Когда я меняю ширину на 147px , загружается изображение 320 пикселей.
3. Когда я меняю ширину на 227 пикселей, загружается изображение 640px.
4. Когда я изменяю ширину до 453 пикселей, загружается изображение 1280px .

Я бы подумал, что изображение 160 пикселей будет загружаться до тех пор, пока ширина браузера не будет больше 160 пикселей, а изображение 320 пикселей будет загружаться до тех пор, пока ширина браузера не будет больше 320 пикселей и т. Д.

Почему это не так?

Редактировать: Похоже, что stackoverflow не является хорошим местом для проверки этого примера. Возможно, вам придется скопировать код в свой браузер, чтобы копировать разные размеры браузера.

window.onresize = displayWindowSize; 
 
    window.onload = displayWindowSize; 
 

 
    function displayWindowSize() { 
 
     myWidth = window.innerWidth; 
 
     myHeight = window.innerHeight; 
 
     // your size calculation code here 
 
     document.getElementById("dimensions").innerHTML = "Current screen width: " + myWidth + "px"; 
 
    };

\t <div id="dimensions"></div> 
 
\t <img src="http://imgur.com/z5X66tR" 
 
\t  srcset="http://imgur.com/z5X66tR.png 160w, 
 
\t    http://imgur.com/kPOTVv7.png 320w, 
 
\t    http://imgur.com/xj9RPrV.png 640w, 
 
\t    http://imgur.com/PgJsD95.png 1280w">

Answer 1

Похоже, у вас есть экран 2x, и ваш браузер листать на среднем геометрических размерах.

Напомним, что числа w - это просто ширина изображения в пикселях изображения, а не команда о размере окна браузера или что-то в этом роде. Используя размер от sizes (по умолчанию 100 вольт), вы можете преобразовать числа w в эквивалентные числа x. Например, когда ваш экран имеет ширину 320 пикселей, ваши четыре размера эквивалентны .5x, 1x, 2x, 4x. Если у вас есть экран 2x (который по умолчанию используется для macs в эти дни), браузер часто предпочитает источник 2x, который является вашим 640w.

Это объясняет ваши номера переходов. Среднее геометрическое 320 и 640 составляет 452,5; вы заметите, что 227 * 2 составляет 454. То же самое для 640 и 1280 - среднее геометрическое составляет 905, а 453 * 2 - 906.