最近，我使用Google Developer Tools在我的网站上进行了审核。我的图像都是相同的大小（500水平乘300垂直像素），所以我认为最好不使用图像大小属性，因为当图像大小已经正确时就不需要计算图像大小了。
在“网络利用率”下，指定“图像尺寸”，我看到以下内容
A width and height should be specified for all images in order to speed up
page display. The following image(s) are missing a width and/or height:
现在，我很困惑。即使它们已经是正确的尺寸，我是否应该为图像真正添加width和height属性？似乎多余。
Answers:
浏览器并行下载数据，并尝试尽快开始呈现页面。
如果未指定大小，则在完全完成图像下载之前，浏览器将不知道图像的大小。
这种延迟会迫使浏览器重新绘制或重排布局，从而延迟页面加载时间。
出现此问题的图像越多-页面加载速度越慢。
如果您以HTML或CSS指定图像大小，则浏览器可以避免重绘和内容重排。
因此，您应始终指定图像尺寸。Google对此有一些提示。
https://developers.google.com/speed/docs/best-practices/rendering#SpecifyImageDimensions
有关浏览器渲染过程的更多信息，请参见：http : //taligarsiel.com/Projects/howbrowserswork1.htm
不确定这是什么最新信息，但可以深入了解浏览器的工作方式以及为什么您可能想做一些事情，例如不使用内联CSS覆盖样式表。
自适应设计通常不使用任何宽度或高度属性
Google开发工具是一种指南，您无需强制执行在其网站上阅读的所有内容，实际上其中有些内容已经过时了。大多数响应式网站不使用width或height因为它们希望图像适应屏幕尺寸，并使用固定的宽度和高度来降低<img>用户体验，因此Google宣布这是最重要的因素之一。
CSS解决方法
您可以选择使用具有宽度和高度的块级元素，就我个人而言，我不会使用，但是这就是Google所说的块级。
确保在图像元素或块级父级上指定尺寸。确保在元素本身或块级父级上设置尺寸。如果父级不是块级的，则尺寸将被忽略。不要在不是直接父级的祖先上设置尺寸。
我想这看起来像：
静态设计 .ic {width:500px;height:500px;}
响应式设计：
@media only screen and (max-width: 40em){.ic{width:1px;height:1px;}} Mobiles
@media only screen and (min-width: 40.063em){.ic{width:1px;height:1px;}} Tablets
@media only screen and (min-width: 40.063em) and (max-width: 64em){.ic{width:1px;height:1px;}} Small Screens
@media only screen and (min-width: 64.063em){.ic{width:1px;height:1px;}} Large Screens
然后，您将需要使用JavaScript或其他解决方案来检测视点并提供4种不同版本的图像，这再次不实用。因此，如果您使用的是响应式设计，那么我会放心地进行操作，而不必费心增加宽度和高度，这样无论您在哪个屏幕上查看它，您的网站都是流畅的。
max-width:100%;使用响应式设计时，通常在CSS中使用。使用高度和宽度将禁用流体的按比例放大和按比例缩小
我刚刚在Wordpress Stack Exchange上回答了类似的问题。在此处重新发布（管理员/主持人：如果不允许这样做，请告诉我正确的帮助方法）。
并不是说您需要在html中指定宽度和高度。这意味着您必须保留适当的空间，并且在加载图像时，浏览器不必重排和重新绘制页面。
此外，如果您对尺寸进行硬编码，则会破坏响应行为。如果您的布局没有响应能力，那没关系，但是如果您想保持一些响应能力，则只能使用CSS来获得结果。
大多数时候，同时使用width和
max-width:100都可以完成工作，但是Smashing Magazine的这篇帖子中有一种有趣的技术：您可以使用The Padding-Bottom Hack来代替max-width：100％：“通过这项技术，我们将高度定义为相对于宽度的度量。填充和边距具有这种固有属性，我们可以使用它们为其中不包含任何内容的元素创建长宽比。因为填充具有此功能，我们可以将padding-bottom设置为相对于元素的宽度。如果我们还将height设置为0，我们将得到想要的。[...]
下一步是将图像放置在容器中，并确保将其填满。为此，我们需要将图像完全定位在容器内，如下所示：“
.img-container {
padding-bottom: 56.25%; /* 16:9 ratio */
height: 0;
background-color: black;
}
.img-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}