响应式图片 vs Lighthouse 性能审计
Responsive images vs Lighthouse performance audit
我正在使用响应式设计，Lighthouse 一直告诉我“图像元素没有明确的宽度和高度”。我得出的结论是 在 html 中，因为我的图像在 css 中设置了不同断点的尺寸。
这里是否有保持响应速度但让 Lighthouse 开心的最佳实践？这可能是显而易见的，但作为一名学生，我在这里摸不着头脑。
你说得对，这实际上是最佳做法，也是推荐用于 Web Vitals 以提高性能的做法。
如果设置了高度和宽度，则在加载页面时保留图像所需的space。但是，如果没有这些属性，浏览器就不知道图片的大小，也就无法为它预留合适的space。
一般情况下添加 img 时，您应该添加 html 宽度和高度，我更喜欢添加我在 CSS 中添加的值，或者有时当我没有值时 CSS 我正在检查元素并让浏览器告诉我宽度和高度，然后我返回 html 并写入它们。
如果您对此主题（性能）感兴趣，请搜索 Web Vitals (Cumulative Layout Shift)，您会发现有趣的主题
我正在使用响应式设计，Lighthouse 一直告诉我“图像元素没有明确的宽度和高度”。我得出的结论是 在 html 中，因为我的图像在 css 中设置了不同断点的尺寸。
这里是否有保持响应速度但让 Lighthouse 开心的最佳实践？这可能是显而易见的，但作为一名学生，我在这里摸不着头脑。
你说得对，这实际上是最佳做法，也是推荐用于 Web Vitals 以提高性能的做法。
如果设置了高度和宽度，则在加载页面时保留图像所需的space。但是，如果没有这些属性，浏览器就不知道图片的大小，也就无法为它预留合适的space。
一般情况下添加 img 时，您应该添加 html 宽度和高度，我更喜欢添加我在 CSS 中添加的值，或者有时当我没有值时 CSS 我正在检查元素并让浏览器告诉我宽度和高度，然后我返回 html 并写入它们。
如果您对此主题（性能）感兴趣，请搜索 Web Vitals (Cumulative Layout Shift)，您会发现有趣的主题