Какой лучший способ минимизировать совокупный сдвиг макета для адаптивных изображений с различным соотношением сторон?

Для <picture> вы должны быть в порядке, если каждое <source> изображение имеет одинаковое соотношение сторон в вашем адаптивном фрагмент изображения:

<img width="1000" height="1000"
       src="puppy-1000.jpg"
    srcset="puppy-1000.jpg 1000w,
            puppy-2000.jpg 2000w,
            puppy-3000.jpg 3000w"
           alt="Puppy with balloons"/>

Для <picture>, где у каждого <source> разное соотношение сторон, браузеры ожидают стандартизации ширины / высота рекомендуется для каждого <source> для сценария использования художественного направления:

<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>

А пока вы можете предоставить height через CSS-хаки padding-top с различными носителями. -запросы на <picture> точку останова.

Исходным элементом, поддерживающим атрибуты измерения, является теперь является частью стандарта HTML - https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element

Стандартизация соответствует примеру реализации @addyo уже предоставлен.

Для варианта использования <picture> в художественном направлении, где каждый <source> имеет разное соотношение сторон, каждый <source> может предоставить свое собственное значение width и height.

<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>

Реализация поддержки браузера в процессе, и ее следует отслеживать в скоро выйдет.