Дергается картинка при перезагрузке страницы

У меня есть картинка, которая занимает место на странице и участвует в распределении свободного места в флекс контейнере. Есть проблема с загрузкой картинки. До момента, как она загрузилась, контент ведет себя так будто картинки нет. После загрузки изображение, оно начинает занимать место и толкает собой контент. Получается, что страница дергается.

Код для изображения:

<picture>
  <source type="image/svg+xml" srcset="img/logo-desktop.svg" media="(min-width: 600px)" sizes="(min-width: 600px) 60px 20px">
  <source type="png" srcset="img/logo-desktop.png, img/[email protected] 2x, img/[email protected] 3x, img/[email protected] 4x" media="(min-width: 600px)" sizes="(min-width: 600px) 60px 20px">
  <source type="image/svg+xml" srcset="img/logo-mobile.svg" sizes="32px 16px">
  <img src="img/logo-mobile.png" srcset="img/[email protected] 2x" alt="Logo" sizes="32px 16px">
</picture>

У меня есть 2 разных изображения с разными размерами: до 600 пикселей она должна быть 32х16, после 600 - 60х20. Это я делаю с помощью атрибута sizes. Но sizes не решает проблемы с прогрузкой картинки. Ее решают атрибуты width/height. Но width и height я могу задать только одного размера - или 32х16, или 60х20. Если установлю width="32" и height="16", то картинка будет слишком маленькой для десктопа, а если width="60" и height="20", то для десктопа сработает, но для мобайла размер картинки будет слишком большой (сама картинка отрисуется корректно, но она будет размером 32х16 внутри контейнера 60х20 - выделенного места под размер картинки).

Можно как-то решить эту задачу нормальным способом? Или нужно картинке задавать poisition: absolute; чтобы она не участвовала в распределении места?