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

如何解决核心 Web Vitals 标记的图像元素没有明确的宽度和高度

我在 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>

CodePen link

有些文章建议将 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"
/>

解决方法

答案

我们正在谈论的 width 和 height 旨在成为一个固定数字以避免警告。

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

编辑

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

您正在尝试：

• 提供响应式轮播。
• 带有响应式图片的轮播。
• 避免来自 Web Vitals 的关于布局偏移的警告。

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

,

注意：从 Bootstrap 机制开始，您的图像大小是固定的！

如果您仔细查看您的页面，您的图像会响应但不流畅。这意味着当 vieport 改变宽度时，尺寸确实会以预定义的步骤改变。在此步骤之间，即使大小以百分比设置，图像的大小也始终相同。这就是 Bootstrap 的机制。

因此，您可以在不更改布局的情况下为图像大小设置固定值！！！

您将在此处找到 Bootstrap 使用的原始步骤（如果未针对项目进行更改）：
https://getbootstrap.com/docs/3.4/css/#grid-media-queries

如您所见，Bootstrap 标准是：如果视口宽度超过 769px，则尺寸会发生变化，与 992px 和 1200px 上的相同。

取自 codepen 示例，您的图像大小为：

// Up from Vieport width:  
768px = Image: 720x426px   
992px = Image: 940x557px   
1200px = Image: 992x588px  

（注意：在视口下方，768pxcodepen 不起作用。查看原始页面上的尺寸。）

知道您可以通过媒体查询为图像提供固定大小的建议。您可以将 sass 与 Bootstrap 的原始工具一起使用（参见上面的链接）。或者做这样的事情：

/* below 768px take values from original page */

@media (min-width: 768px { 
   .owl-carousel img {
      width: 720px !important;
      height: 426px !important; 
}
@media (min-width: 992px { 
   .owl-carousel img {
      width: 940px !important;
      height: 552px !important; 
}
@media (min-width: 1200px { 
   .owl-carousel img {
      width: 992px !important;
      height: 588px !important; 
}

注意：我不太确定该 css 是否会覆盖 Bootstrap 标记。所以也许你必须给它一个更高的特异性，即通过使用 div.owl-carousel div img 或类似的东西。如果高度不正确，请从原始页面读出所有尺寸。有时您需要更精确，即使用 height: 588.xxxx px。

,

除了您提到的 srcset 解决方案之外，此问题没有真正的解决方案。除非您指定图像尺寸，否则可能会标记布局偏移问题。

我同意多种图像尺寸的集成既困难又麻烦，而且可能并不总是合理的。即使您集成了多种尺寸的图像，如果图像设置为响应任何尺寸而不仅仅是一组选项，您仍然可以进行布局转换。

如果您的图像开始非常快地加载，以便在布局有机会完全呈现（并因此移动）之前知道图像大小，则 CLS 不太可能被 Google 标记（或打扰任何用户）。推迟任何你能把图像带到队伍前面的事情。

这可能有问题，但我实现了一个很小的生成 png 来快速加载图像数据，如下所示：

<img class="img_scale"
    src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" 
    data-src="/img/img.jpg"
/>

您也许还可以使用 csscalc 来估计图像容器的百分比、像素值或 em 值，以大大减少偏移量。如果不使用静态尺寸，您可能无法消除它，但您可以将其缩小。

,

当您使用 img src 标签时，您需要添加宽度和高度，无论实际图像的宽度和高度属性是否带有 img 标签，例如：

所以它不是在谷歌页面洞察中创建 CLI。