标记为核心 Web Vitals 的图像元素没有明确的宽度和高度

Question

我正在检查 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 class="item">
          <img alt="ALT" class="img-responsive" src="https://dummyimage.com/992x588/000/3431af&text=IMAGE+1">
        </div>
        <div class="item">
          <img alt="ALT" class="img-responsive" src="https://dummyimage.com/992x588/000/3431af&text=IMAGE+2">
        </div>
        <div class="item">
          <img alt="ALT" class="img-responsive" src="https://dummyimage.com/992x588/000/3431af&text=IMAGE+3">
        </div>
        <div class="item">
          <img alt="ALT" class="img-responsive" src="https://dummyimage.com/992x588/000/3431af&text=IMAGE+4">
        </div>
        <div class="item">
          <img alt="ALT" class="img-responsive" src="https://dummyimage.com/992x588/000/3431af&text=IMAGE+5">
        </div>
      </div>
    </div>
  </div>
</div>

代码笔链接

有些文章建议使用 scrset 来处理响应式图像，但这并不实用，因为我们必须上传同一图像的多个版本。

<img
  width="1000"
  height="1000"
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
  alt="Puppy with balloons"
/>

Answer 1

回答

我们width正在height谈论的 是一个固定数字，以避免警告。

需要在加载图像时为其保留（显式）所需的空间。如果你给它一个百分比，浏览器就无法知道它需要的大小，因此它会发生变化，并导致页面布局发生变化（这是我们试图避免的）。

编辑

我不确定你所说的“变得更加困难”是什么意思。没有人说这很容易，因为你有一个复杂的问题。

您正在尝试：

• 提供响应式轮播。
• 具有响应式图像的轮播。
• 避免 Web Vitals 发出有关布局转变的警告。

复杂问题的复杂解决方案，就是这样。