Problem:
Implementing aspect ratios during the first layout calculation for when various aspect ratios are utilized, such as with art direction.
Avoid any extra layout calculation's after initial layout. (avoiding page jumps!)
Avoid writing any CSS for the aspect ratio.
Avoid needing custom JS to do any of this.

Use Case:
Using multiple <source> 's within <picture> or <video>

Requirements:
Aspect-ratio MUST be known for each source.
(ideally it should match the intrinsic ratio of source asset, otherwise when the asset loads the intrinsic ratio changes and may cause layout recalc? which we want to avoid!)
New attributes(s) for <source>:width="1600" height="900" (16/9 ratio)
Both width and height of the source must be supplied for a ratio to be calculated.
e.g. <source srcset="https://via.placeholder.com/600x279" media="(max-width: 599px)" width="600" height="279">

My thoughts on implementation for <picture>
Either the <img> inside <picture> or the <picture> element itself will have the aspect ratio applied to it.

<picture>
  <source srcset="https://via.placeholder.com/600x279" media="(max-width: 599px)" width="600" height="279">
  <source srcset="https://via.placeholder.com/1500x300" media="(max-width: 991px)" width="1500" height="300">
  <img src="https://via.placeholder.com/1500x300" width="1500" height="300">
</picture>