响应式图像与灯塔性能审核
我正在使用响应式设计，灯塔不断告诉我“ 图像元素没有明确的宽度和高度”。我得出的结论是，在HTML 中的意思是，因为我的图像已经在CSS中设置了具有不同断点的CSS尺寸。
这里是否有最好的做法来保持响应迅速，但要让灯塔开心？这可能很明显，但是作为一名学生，我在这里挠头。
I'm working with a responsive design and Lighthouse keeps telling me "Image elements do not have explicit width and height". I concluded that it means in the html, because my images have set dimensions in my css with different breakpoints.
Is there a best practice here to keep being responsive but make Lighthouse happy? It might be obvious, but as a student, I'm scratching my head here.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您是对的，这实际上是最佳实践，建议Web Vitals提高性能。
如果设置高度和宽度，则加载页面时将保留图像所需的空间。但是，如果没有这些属性，浏览器就不知道图像的大小，也不能保留适当的空间。
当您添加IMG时，您应该添加HTML宽度和高度，我更喜欢添加我在CSS中添加的值，或者有时在CSS中没有值时，我会在元素上进行检查，并使浏览器告诉我的宽度和高度，然后回到HTML并写下它们。
如果您对此主题感兴趣（表演）搜索有关Web Vitals的搜索（
you are right that's actually the best practice and that is recommended for Web Vitals to enhance performance.
If you set height and width, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it.
when you add img in general you should add in html width and height and I prefer to add values that I am adding in CSS or sometimes when I don't have values in CSS I'm doing inspect on the element and make the browser tell me width and height then I back to html and write them.
if you are interested in this topic (Performance) search about Web Vitals (Cumulative Layout Shift) you will find interesting topics