html - 核心网络生命体征标记的图像元素没有明确的宽度和高度

Question

我在 PageSpeed 洞察力上检查 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>

代码笔 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"
/>

Answer 1

注意:您的图像大小在 Bootstrap 机制中是固定的!
如果您更仔细地查看您的页面，您的图像是响应式的，但不是流利的。这意味着当视口(viewport)改变宽度时，尺寸确实会以预定义的步长改变。在这两个步骤之间，图像的大小总是相同的，即使大小是按百分比设置的。这就是 Bootstrap 的机制。
所以， - 您可以在不更改布局的情况下为图像的大小设置固定值!!!
您将在此处找到 Bootstrap 使用的原始步骤(如果未针对元素进行更改):
https://getbootstrap.com/docs/3.4/css/#grid-media-queries
如您所见，Bootstrap 标准是:如果视口(viewport)宽度大于 769px大小变化，与 992px 相同和 1200px .
取自 codepen 示例，您的图像大小为:

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

(注意:以下视口(viewport)宽度 768px codepen 不起作用。请查看原始页面上的尺寸。)
知道您可以通过媒体查询为图像提供固定尺寸的建议。您可以使用 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 .