In your last example you forgot to close your source tags.

In general dicking around with source sets for widths has always struck me as a waste of time, and could indicate placing images into a website that have ZERO business on websites, or at least no business in the markup.

If the bandwidth difference between your small and large images is so huge as to make a difference, I would say that unless said image is 100% essential content, get rid of the largest size or perhaps the entire image altogether. Or use one smaller size and make a link to the largest one if it's that important.

In particular the orientation images tend to hit these types of issues since people use them when crapping background images or presentational logos into the markup.

That said, it's good to know these techniques exist, but using it for size -- to me at least -- is an indicator of improper use of images in the markup.

Far more useful is that your sources can also obey mime-type. This lets you easily implement webp or avif with png or jpg fallbacks.