Вам в любом случае нужно знать размеры картинки. Это можно узнать с помощью php на сервере. Либо для использования в атрибутах, что вам не подходит, либо так как опишу ниже.
Делаем обертку для картинок:
<div class="img-placeholder-responsive">
<div class="img-placeholder-responsive__box">
<img src="" alt="">
</div>
</div>
.img-placeholder-responsive {
&__box {
position: relative;
width: 100%;
height: 0;
box-sizing: border-box;
padding-bottom: percentage(3/4); // default aspect ratio
// Можем этот плесхолдер стилизовать как-то, пока картинка не загружена
background: gray;
// Можем надпись добавить
&::before {
position: absolute;
content: 'Картинка загружается...';
}
> img {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
}
}
Здесь использован вложенный блок, а не псевдоэлемент для распорки, так как нам нужно передавать aspect из php.
Используем:
<?php
// Получаем размер картинки
$width = getImageSize();
$height = getImageSize();
?>
<!-- Вставляем в разметку -->
<div class="img-placeholder-responsive">
<div class="img-placeholder-responsive__box"
style="padding-bottom: <?= $height / $width * 100 ?>%"
>
<img src="" alt="">
</div>
</div>
Наслаждаемся результатом!
PS. Если у вас соотношение сторон изображений величина постоянная для всех, то от получения размеров и вставки их в разметку можно отказаться, и задать дефолтный aspect в css (в примере есть).PPS. Если aspect различается незначительно, можно его также вшить в css и задать картинке стиль object-fit: cover (или contain) 
Средний
