选择非视网膜图像的响应图像，灯塔抱怨

编程问答 2022-07-09

问题描述

我的响应图像如下：

<img 
  src="image.jpg1"
  srcset="
    image1.jpg 99w 40h,image2.jpg 198w 80h,image3.jpg 124w 50h,image4.jpg 248w 100h,image5.jpg 179w 72h,image6.jpg 358w 144h
  " 
  sizes="(min-width: 1280px) 179px,(min-width: 960px) 124px,99px"
  class="image"
>

然后设置为：

.image {
  width: auto
  height: 40px;

  @media (min-width: 960px) {
    height: 50px;
  }

  @media (min-width: 1280px) {
    height: 72px;
  }
}

图像名称已被删节，但是它们都被动态调整为指定的大小，其纵横比用于确保正确的高度和宽度。

因此，在大屏幕（宽1280像素）上，我希望代码在标准屏幕上选择image5.jpg，在视网膜屏幕上选择image6.jpg。

但是，无论如何，浏览器都会选择两者中的较小者，尽管Lighthouse报告选择较大者，但仍将其标记为问题（尽管图像确定地的大小为358 x 144）： 

displays images with inappropriate size

Image natural dimensions should be proportional to the display size and the pixel ratio to maximize image clarity.

URL         displayed size  Actual size  Expected size
image6.jpg  179 x 72        179 x 72     358 x 144

我已经在Incognito中运行了此程序，以排除它是缓存问题，并且对具有相同结果的不同图像进行了测试。

对于为什么选择了错误的图像以及如何安抚灯塔，我有些困惑。有人有建议吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmlimageimageimagelighthouse