Lighthouse性能检测提示图片尺寸不当，srcset/sizes配置是否有误？

1. Sizes规则缺失大视口适配逻辑 #

你的图片容器最大宽度是1920px，但当前sizes里只定义到1200px的规则。当视口宽度≥1920px时，浏览器会匹配最后一条100vw规则，这会让浏览器认为图片要占满整个视口（比如2560px宽），进而尝试加载更大的图，但你并没有提供对应尺寸，最终可能导致用1920px的图拉伸显示，出现模糊。

需要在sizes最前面补充大视口的规则：

sizes="
    (min-width: 1920px) 1920px,
    (min-width: 1200px) 1200px,
    (min-width: 992px) 992px,
    (min-width: 768px) 768px,
    100vw
"

2. Srcset末尾的多余逗号 #

srcset最后一项/media/foo_1920.jpeg 1920w,后面多了个逗号，这属于语法错误，部分浏览器会解析失败，要么忽略最后一个资源，要么直接放弃整个srcset规则，退而加载默认的src资源。

修正后：

srcset="
    /media/foo_768.jpeg 768w,
    /media/foo_992.jpeg 992w,
    /media/foo_1200.jpeg 1200w,
    /media/foo_1920.jpeg 1920w
"

3. 默认Src的匹配问题 #

当前默认src="/media/foo.jpeg"在srcset里没有对应的尺寸声明，虽然旧浏览器会加载它，但现代浏览器解析srcset时，这个资源不属于候选集。建议把默认src替换成srcset里的最大尺寸资源，保证兼容性：

src="/media/foo_1920.jpeg"

修正后的完整代码 #

<img alt="" src="/media/foo_1920.jpeg" class="img-fluid d-block mx-auto"
    sizes="
        (min-width: 1920px) 1920px,
        (min-width: 1200px) 1200px,
        (min-width: 992px) 992px,
        (min-width: 768px) 768px,
        100vw
    "
    srcset="
        /media/foo_768.jpeg 768w,
        /media/foo_992.jpeg 992w,
        /media/foo_1200.jpeg 1200w,
        /media/foo_1920.jpeg 1920w
    "
    width="1920" height="600">

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