javascript - Image Srcset は実際にどのように機能しますか?

Question

これまでの私の経験が何であるかの簡単な例を作成しました。

1. 160px の画像は読み込まれません。
2. 幅を 147px に変更すると、320px の画像が読み込まれます。
3. 幅を 227px に変更すると、640px の画像が読み込まれます。
4. 幅を 453px に変更すると、1280px の画像が読み込まれます。

ブラウザーの幅が 160px を超えるまでは 160px の画像が読み込まれ、ブラウザーの幅が 320px を超えるまでは 320px の画像が読み込まれる、などと思っていたでしょう。

そうではないのはなぜですか。

編集: 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";
    };

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