Lighthouse 性能测试“正确调整图像大小”...我的 srcset/sizes 错误吗?

Lighthouse performance test "Properly Size images"... are my srcset/sizes wrong?

提问人:gremo 提问时间:11/17/2023 更新时间:11/17/2023 访问量:8

问:

图像容器的最大宽度为 1920 像素。我的源图像是 1920x600 像素。我尝试为每个视口大小提供不同的图像:

<img alt="" src="/media/foo.jpeg" class="img-fluid d-block mx-auto"
   sizes="
       (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">

属性和必须存在,以允许浏览器在不下载图像的情况下计算保留空间。widthheight

我在这里做错了什么?

HTML 灯塔

评论

0赞 CBroe 11/17/2023
“图像容器的最大宽度为 1920px” - 您知道其中的媒体条件与视口相关,而不是任何容器,对吧?sizes
0赞 mandy8055 11/17/2023
似乎是正确的。另外,建议您也可以尝试使用<picture>

答: 暂无答案