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

【问题标题】：Core web vitals flagged Image elements do not have explicit width and height核心网络生命体征标记的图像元素没有明确的宽度和高度
【发布时间】：2021-06-09 02:11:56
【问题描述】：

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

【问题讨论】：

看看 - stackoverflow.com/questions/65076805/…

标签： html css seo google-search-console core-web-vitals

【解决方案1】：

回答

我们所说的width 和height 是为了避免警告的固定数字。

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

编辑

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

您正在尝试：

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

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

【讨论】：

在我的实际情况下，我没有将宽度添加为 100%，所以如果我添加固定宽度，那么图像将如何响应，因为我必须根据屏幕尺寸调整图像宽度，但可以做到然后我们为几乎所有的屏幕布局添加了 css 标记为我不知道谷歌使用哪个屏幕布局用于 CLS .. 你能否进一步澄清你的观点可能是我不明白你的观点。我将使用固定的 WidthxHeight，然后我的设计将中断，除非我为所有屏幕尺寸做 css
我知道你需要它来响应（你需要100%）。考虑阅读以下内容：Check the image's width and height attributes in the HTML。可能在这种情况下，您只需要忽略警告即可。
在轮播中使用图像变得更加困难，纵横比是否解决了这个问题..
再一次，我理解你，在处理图像和响应时，很难同时提供一个“漂亮”的用户界面并遵循所有标准，我们无法逃避。关于aspect-ratio，我不确定它是否解决了width 和height 的Core Vitals 警告。

【解决方案2】：

注意：您的图片大小在 Bootstrap 机制中是固定的！

如果您更仔细地查看您的页面，您的图片会响应但不流畅。这意味着当视口改变宽度时，尺寸确实会以预定义的步长改变。在这两个步骤之间，图像的大小总是相同的，即使大小是按百分比设置的。这就是 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。

【讨论】：

您是否建议我应该为不同的屏幕尺寸指定图像宽度和高度。在您的情况下，您已经考虑了 768,992,1024 ... 但我需要为所有其他屏幕尺寸 375、414、480,640 .... 等定义它。在这种情况下，我将面临其他问题，例如图像将出现空白，因为它们不会填满所有例如。屏幕 800x1280 图像将显示更小，因为基于媒体咖喱的图像将是 720px 宽度.. 客户不喜欢这样吗？所以如果我解决了 CLS 问题，那么我们有设计问题吗？
好吧。我解释说，由于 Bootstrap 机制，您的图像仍然具有根据视口宽度固定的大小，即使大小仍然以百分比定义。因此，您可以轻松使用固定尺寸，而无需更改页面结构或设计理念！这意味着：如果以正确的方式完成，这不会导致设计问题。是的。这必须对每个断点进行。但由于断点很少，这也意味着：通过可监督的返工，您可以达到目标，在 Google CLS 排名中变得更好。这就是您要求的可能解决方案。
附加礼貌通知：在 Bootstrap 3 时代不需要这项工作。但随着时间的推移......在现代响应式页面上应该匹配（不仅）谷歌的 CLS 要求，这项工作几乎是一部分从概念开始的设计过程中......做起来更专业一点，在这种情况下使用属性srcset。同样重要的是：是的，现代流畅的布局还有其他解决方案......并非所有都与 Google CLS 匹配。所以问题可能是匹配 Goggle CLS 是否重要或有意义。但该讨论不是实际问题的一部分。

【解决方案3】：

当您使用 img src 标签时，您需要使用 img 标签添加任何实际图像宽度和高度属性的宽度和高度，例如：

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

【讨论】：

如果没有破坏设计，这很容易解决？

【解决方案4】：

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

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

如果您的图片开始非常快速地加载，因此 CLS 不太可能被 Google 标记（或打扰任何用户），以便在布局有机会完全渲染（并因此发生变化）之前知道图片大小。尽可能推迟任何事情，以使图像排在最前面。

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

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

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

【讨论】：

【解决方案5】：

您可以通过以下方式解决此问题

设置显式 <img width height> - 对于高度值，请使用您最好的猜测最多的图像高度是多少
稍后使用以下 CSS 覆盖 HTML 元素的高度属性：

   .my-img {
        height: auto;
    }

但是请注意，这会在加载图像后导致累积布局移位、CLS 事件，因此您实际上是在转移问题。通过确保托管图像的容器元素设置了min-height，可以解决 CLS 问题。

Here is the full source code for an example Svelte component where I worked around this problem.

【讨论】：