如何调整图像坚持指定图像尺寸错误在谷歌Chrome审计与引导

Question

我正在修改我的HTML，以提供更好的网站性能。我使用bootstrap作为我的css样板。我从Google Chrome审计控制台收到的错误之一是:

"指定图像尺寸-宽度和高度应指定为所有图像，以加快页面显示。以下图片都缺少一个宽度和/或高度:与所有的图像的列表不要指定特定的高度或宽度。"

我的问题是，我使用bootstrap和大多数图像是使用img-responsive类。那么，当我希望图像具有响应性时，我该如何遵守这一规则呢?

Answer 1

我有这个在我的头很长一段时间，所以我的可选的解决方案是用JavaScript管理断点，并注入宽度和高度。问题是你应该在网站上使用一张非常好的照片，但是，就像我说的，这是暂时的。

var windowWidth = $(window).width();
if(windowWidth > 700){
   $(".image").attr('width', 232).attr('height', 350);
}

这可以帮助我避免chrome警告和页面加载。