Why does the browser doesn't seem to respect the srcset attribute?

Question

See the following img snippet:

<img width="768" height="514" 
  src="https://example.org/wp-content/uploads/2024/02/ottawa-815375_1280.jpg" 
  class="img-fluid article-img large wp-post-image" alt="" decoding="async" loading="lazy" 
  srcset="https://example.org/wp-content/uploads/2024/02/ottawa-815375_1280.jpg 1280w, https://example.org/wp-content/uploads/2024/02/ottawa-815375_1280-300x201.jpg 300w, https://example.org/wp-content/uploads/2024/02/ottawa-815375_1280-1024x686.jpg 1024w" 
  sizes="(max-width: 768px) 100vw, 768px">

I opened the page in Chrome's responsive mode with a viewport width of 360px.

What I expect

I would expect that the srcset part https://example.org/wp-content/uploads/2024/02/ottawa-815375_1280-1024x686.jpg 1024w matches as it's the first one bigger than 768px according to the sizes attribute.

What actually happens

But Chrome loads the full size image https://example.org/wp-content/uploads/2024/02/ottawa-815375_1280.jpg.

Why doesn't Chrome respect the srcset attribute? What am I missing?

EDIT: Here's a Fiddle where you can reproduce the behavior.