`<picture>` element downloads two images

[skezo]

Test url: https://yitengjun.github.io/ukiyo-js/

Issues: When using the <picture> element both the default src image and the browser's chosen image will be downloaded. For example when viewing the demo page at a width larger than a 1000px the following images will be downloaded:

• Default image: https://images.unsplash.com/photo-1504051771394-dd2e66b2e08f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80
• Browser selected: https://images.unsplash.com/photo-1661961112835-ca6f5811d2af?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80

Source code from test url:

<picture>
        <source srcset="https://images.unsplash.com/photo-1661961112835-ca6f5811d2af?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=80" media="(min-width: 1000px)">
        <source srcset="https://images.unsplash.com/photo-1647849754185-2b52aec8458b?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=80" media="(min-width: 700px)">
        <img class="ukiyo img-size-full" src="https://images.unsplash.com/photo-1504051771394-dd2e66b2e08f?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=80" style="margin-top: 0px; margin-bottom: 0px; display: block; overflow: hidden; backface-visibility: hidden; object-fit: cover; height: 1932px; transform: translate3d(0px, 322px, 0px);">
      </picture>

Browsers: All major browsers

Expected: Only one image should be downloaded when using the <picture> element.