Высота банера для гугл спид тест

[AlexMax13]

Возможно ситуация банальная но многим известная.

 

Есть на сайте банер. Его высота и ширина может менятся в зависимости от ширины страницы. Стандартная ситуация на любом сайте.

 

Но у гугла есть Cumulative Layout Shift, показатель смещения шаблона.

 

Так вот, гугл требует задавать высоту этого фото изначально, чтобы контент не смещался по мере появления банера. Но как я могу задать точную высоту, если она может быть разной для разных устройств? Будет либо растянуто либо сжато по высоте.

 

Есть ли какой то правильный метод решения этой проблемы?

[PaulKravchenko]

У зображення банеру, має бути клас img-responsive, який задає максимальну ширину зображення 100% відповідно до блоку, в якому воно розташоване, і висоту auto, щоб вона обчислювалася на основі співвідношення сторін зображення.

Тому задання розмірів зображення банеру не вплине на його відображення, якщо ви зробите наприклад так:

<div class="swiper-slide">
  {% if banner.link %}
  <a href="{{ banner.link }}"><img src="{{ banner.image }}" alt="{{ banner.title }}" width="300" height="300" class="img-responsive" /></a>
  {% else %}
  <img src="{{ banner.image }}" alt="{{ banner.title }}" width="300" height="300" class="img-responsive" />
  {% endif %}
</div>

 

[AlexMax13]

@PaulKravchenko дякую ще раз, попробую і відпишусь)