相关疑难解决方法(0)

Lighthours 和 Pagespeed 洞察力不断告诉我为图像定义明确的宽度和高度。但我的大部分图像来自图片标签，因为移动设备和桌面图像尺寸不同。如何根据所选图像提供不同的宽度和高度值？

<picture>
  <source media="(max-width:767px)" srcset="img_pink_flowers_small.jpg">
  <source media="(min-width:768px)" srcset="img_pink_flowers_large.jpg">
  <img src="img_pink_flowers_small.jpg" width="?" height="?">
</picture>

我正在检查 PageSpeed Insight 上的 Core Vitals，并注意到它的标记 Image elements do not have explicit width and height和建议Set an explicit width and height on image elements to reduce layout shifts and improve CLS.

我不确定这到底意味着什么以及我可以采取什么措施来解决这个问题，具体针对我的情况

<img src="someimage.jpg" width="100%" height="100%" alt="something" class="img-responsive">

我的页面是响应式的，我对此网页使用 bootstrap v3.x，因为它是旧页面。因为页面是响应式的，并且我使用的是 class="img-responsive" ，它会自动调整图像大小，但这会影响 CLS 等核心要素。

由于布局是响应式的，定义使用图像以避免 CLS 问题的最佳方法是什么。

我注意到 Page Speed Insigh 报告的大部分 CLS 都是针对 owl Carousal

以下是生成图像 CLS 问题的代码副本

<div class="container">
  <div class="row">
    <div class="col-md-12 col-lg-12 lc-hp-col">
      <div class="owl-carousel owl-theme" data-items="1" data-items-desktop="1" data-items-tablet="[991,1]" data-items-mobile="[767,1]" data-pagination-speed="200" data-auto-play="true" data-stop-on-hover="true">
        <div …