Указание размеров изображения или соотношения сторон вручную - единственный способ избежать скачков вследствие перекомпоновки DOM?

Как я понял из урока по AMP, "вы должны указывать размеры изображения вручную, потому что если не указывать, будут скачки в потоке документа по мере загрузки изображения":

<amp-img
  src="mountains.jpg"
  layout="responsive"
  width="266"
  height="150"
></amp-img>

Такая проблема имеет место быть и без AMP, поэтому дальше я буду говорить про обычный тэг img (AMP я упомянул затем, что там эта проблема рассмотрена). В идеале было бы просто указать максимальную ширину, а также указать занимать максимум доступного пространства (width: 100%) - и чтобы всё работало:

<figure>
  <img
    src="/images/gray_kitten.jpg"
    style="max-width: 500px; width: 100%;"
    alt="Серый котёнок"
  /> 
  <figcaption>Серый котёнок</figcaption>
</figure>

Но нет, ведь возникнет то явление, о котором говорилось выше. Что же делать? Можно обёртке тэга img указать какой-нибудь цвет-фона по умолчанию, а также соотношение сторон на основе длины и ширины изображения:

<figure>
  <div class="ImageWrapper" style="aspect-ratio: 960 / 280; background-color: lightgrey">
    <img
      src="/images/gray_kitten.jpg"
      alt="Серый котёнок"
    /> 
  <figcaption>Серый котёнок</figcaption>
</figure>

Вопрос у меня такой: единственное ли это решение проблемы скачков из-за перекомпоновки DOM вследствие загрузки изображений? Нет ли что-нибудь более технологичного?

А не нравится мне то, что ручное указание размеров или соотношение сторон изображения - это антипрограммистский подход, потому что в программировании всё тяготеет к автоматизации и смотреть свойства файла, проверять соотношения сторон изображения, вводить их с клавиатуры а потом ещё править вручную всё это по мере обновления контента - слишком много рутины для третьего десятилетия 21 века. О каких нанотехнологиях, терраформировании Марса и квантовых компьютерах может идти речь, когда я должен вручную узнавать размеры изображения и вводить их?