HTML: не работают "отзывчивые" изображения через атрибут srcset

Подскажите, почему не корректно работают "отзывчивые" изображения, если использовать их через srcset и sizes в теге img.

Проблема в примере ниже: здесь всегда загружается изображение с именем файла mushroom_landscape.jpg независимо от разрешения экрана:

   <img 
    src="https://webref.ru/example/image/mushroom.jpg"
    srcset="https://webref.ru/example/image/mushroom_portrait.jpg 350w, https://webref.ru/example/image/mushroom_landscape.jpg 650w" 
    sizes="(max-width: 600px) 350px, (min-width: 601px) 650px"
    alt="test">

В атрибуте sizes я указал условия при которых должна меняться ширина изображения в зависимости от ширины экрана. Меняя размер экрана я вижу, что ширина слота меняется: когда ширина экрана меньше 600px - ширина слота - 350px, больше 601px - изображение впишится в ширину слота 650px.

В описании написано, что браузер должен самостоятельно выбрать максимально подходящие изображения, ссылки на которые указаны в атрибуте srcset. В моем случае, если ширина экрана меньше 600px ширина слота изображения должна стать 350px. Следовательно в этот слот браузер должен добавить изображение максимально близкое к этим размерам.

В атрибуте srcset я указал ссылку на картинку и ее размер 350w. Однако браузер игнорирует и не зависимо от размеров экрана ничего не меняет(остается изображение mushroom_landscape.jpg).

Почему? Что я делаю не так?(браузер Google Chrome, Safari, FireFox. КЭШ чистил)

А здесь работают корректно:

    <picture>
      <source media="(max-width: 600px)" srcset="https://webref.ru/example/image/mushroom_portrait.jpg">
      <source media="(min-width: 601)" srcset="https://webref.ru/example/image/mushroom_landscape.jpg">
      <img src="https://webref.ru/example/image/mushroom.jpg" alt="test">
    </picture>

https://jsfiddle.net/3xo2vr85/