Основные веб-показатели отмечены. Элементы изображения не имеют явно заданной ширины и высоты. ⇐ Html

[Anonymous]

Я проверял Core Vitals на странице PageSpeed ​​Insight и заметил, что помеченные элементы изображения не имеют явной ширины и высоты и предлагаю установить явную ширину и высоту для элементов изображения, чтобы уменьшить сдвиги макета и улучшить CLS.
Я не уверен, что именно это означает и что я могу сделать правильно, чтобы решить эту проблему, специфичную для моего случая



Моя страница адаптивна, и я использую для этой веб-страницы загрузочную версию v3.x, так как это старая страница. поскольку страница отзывчива, и я использую class="img-Response", который автоматически изменяет размер изображения, но это влияет на основные важные функции, такие как CLS.
Поскольку макет отзывчив, каков наилучший подход к определению использования изображения, чтобы избежать проблем CLS.
Я заметил, что большая часть CLS, о которой сообщает Page Speed Insigh, предназначена для owl Carousal
Ниже приведена копия кода, который генерирует проблему CLS для изображения




















Ссылка на CodePen
В некоторых статьях предлагалось использовать scrset для адаптивных изображений, но это непрактично, поскольку нам приходится затем загружать несколько версий одного и того же изображения.


srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
alt="Puppy with balloons"
/>


Подробнее здесь: https://stackoverflow.com/questions/665 ... and-height