According to the guidelines, when sizes is not specified in the image attribute, the browser should automatically calculate the required size based on CSS rendering.
In this scenario, my image is 300px and the browser should select the 300px image. However, it's opting for the 1024px image instead.
<html>
<div style="width:300px">
<img
width="100%"
src="https://staging.wpspeedmatters.com/wp-content/uploads/2019/11/migrating-birds-560x336.jpg"
class="attachment-csco-medium-alternative size-csco-medium-alternative wp-post-image"
alt=""
srcset="
https://staging.wpspeedmatters.com/wp-content/uploads/2019/11/migrating-birds-300x200.jpg 300w,
https://staging.wpspeedmatters.com/wp-content/uploads/2019/11/migrating-birds-380x253.jpg 380w,
https://staging.wpspeedmatters.com/wp-content/uploads/2019/11/migrating-birds-768x512.jpg 768w,
https://staging.wpspeedmatters.com/wp-content/uploads/2019/11/migrating-birds-800x533.jpg 800w,
https://staging.wpspeedmatters.com/wp-content/uploads/2019/11/migrating-birds-1024x683.jpg 1024w,
https://staging.wpspeedmatters.com/wp-content/uploads/2019/11/migrating-birds-1160x773.jpg 1160w.
https://staging.wpspeedmatters.com/wp-content/uploads/2019/11/migrating-birds.jpg 1500w,
"
/>
</div>
</html>