Can loading="lazy" be used on <source> - html

Question

I know I can use loading="lazy"on <img> and <iframe> for browser native lazy loading, but can I also use this attribute on <source>? I cannot find related documentation.
Something like this:
<picture>
<source srcset="/image.webp" type="image/webp" loading="lazy"/>
</picture>

Answer 1

No, it can't be used on source, because a <picture> element has to have one <img> element inside. This <img> can have the lazy attribute. The browser then figures out on his own (at least I hope it does) which of the source tags it should lazy-load.
Description of picture from MDN
The HTML element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.
So the correct code to lazy-load a source should be:
<picture>
<source srcset="/media/examples/surfer-240-200.jpg"
media="(min-width: 800px)">
<img src="/media/examples/painted-hand-298-332.jpg" alt="" loading="lazy"/>
</picture>

Answer 2

Cloned was correct - if using picture to wrap around sources, the last element should be a fallback img tag. The browser uses the img 'alt' and the 'loading="lazy" to feed into these sources.
Example, if any of these images are fetched, they'll be done so in a lazy manner:
<picture>
<source media="(min-width: 0)" srcset="image/bike-480.jpg">
<source media="(min-width: 800px)" srcset="image/bike-900.jpg">
<source media="(min-width: 1200px)" srcset="image/bike-1300.jpg">
<img loading="lazy" src="image/mage/bike-900.jpg" alt="man riding a blue bicycle">
</picture>