使用nuxt-img无法设置相对宽高致Google PageSpeed性能扣分问题

Google PageSpeed扣你分是因为没给图片设显式的width和height——浏览器没法提前计算图片占位空间，容易触发布局偏移（CLS）。虽然nuxt-img的width/height属性只支持px，但不用纠结，下面几个方法能搞定：

方法1：填图片原始像素尺寸，配合CSS控制相对布局 #

直接写图片的实际原始宽高像素值（比如你的图是1200x800，就填width="1200" height="800"），然后用你的CSS类bn-img-left里的相对单位（%、vw等）控制显示尺寸就行。浏览器会用原始宽高算出比例占位，不会影响CSS的布局设置，同时满足PageSpeed的要求。

修改后的代码：

<nuxt-img 
  id="imgl" 
  class="bn-img-left" 
  src="/team/TeamBW.webp" 
  loading="lazy" 
  sizes="sm:100vw md:50vw lg:100vw" 
  alt="Team Adapto bianco nero a sinsitra"
  width="1200"  <!-- 替换成图片实际宽度像素 -->
  height="800"  <!-- 替换成图片实际高度像素 -->
>
</nuxt-img>

方法2：用ratio属性（适配Nuxt 3 + Nuxt Image v1） #

如果你用的是Nuxt 3和最新版Nuxt Image模块，直接用ratio属性指定宽高比就行，不用写具体像素。比如图片是3:2比例，就设ratio="3/2"，模块会自动生成符合要求的width和height属性，同时兼容你CSS里的相对布局。

示例代码：

<nuxt-img 
  id="imgl" 
  class="bn-img-left" 
  src="/team/TeamBW.webp" 
  loading="lazy" 
  sizes="sm:100vw md:50vw lg:100vw" 
  alt="Team Adapto bianco nero a sinsitra"
  ratio="3/2"  <!-- 替换成你的图片宽高比 -->
>
</nuxt-img>

方法3：手动加原生宽高属性+CSS覆盖（兼容旧版本） #

如果上面两种方法都不适用，手动给nuxt-img加原生width和height属性，再用CSS覆盖显示尺寸：

<nuxt-img 
  id="imgl" 
  class="bn-img-left" 
  src="/team/TeamBW.webp" 
  loading="lazy" 
  sizes="sm:100vw md:50vw lg:100vw" 
  alt="Team Adapto bianco nero a sinsitra"
  width="1200"
  height="800"
>
</nuxt-img>

CSS里保持你的相对尺寸设置：

.bn-img-left {
  width: 50vw; /* 你的相对值 */
  height: auto; /* 自动保持比例 */
}

设置完重新跑PageSpeed检测，CLS相关的扣分应该就消失了，同时检查页面元素，确认img标签上已经有了width和height属性。

内容的提问来源于stack exchange，提问作者Dimitri