我应该为HTML中的IMG指定高度和宽度属性吗？

如果我知道要用图像标签显示的图像的高度和宽度，我应该包含高度和宽度属性，还是仅将信息放入CSS中？或两者？

防爆。

<img src="profilepic.jpg" height="64" width="64" />

要么

 <img src="profilepic.jpg" height="64" width="64" style="height: 64px; width: 64px;" />

要么

 <img src="profilepic.jpg" style="height: 64px; width: 64px;" />

根据Google Page Speed ，您应该始终在图片标签中定义宽度和高度。但是，要validation您不能使用样式标签。

另外，您应该始终指定与实际图像相同的高度和宽度，以便浏览器不必像resize一样对其进行任何修改。

我build议这样做

 <img src="..." height="20" width="50">

编辑：有人在评论中build议，不添加任何属性会更快。根据谷歌（而不是他们是浏览器的知识）：

如果在包含文档中没有指定尺寸，或者如果指定的尺寸与实际图像的尺寸不匹配，则一旦下载图像，浏览器将需要回stream并重新绘制。要防止重排，请在HTML标记或CSS中指定所有图像的宽度和高度。 – 阅读更多

鉴于此，你可以在CSS中做img尺寸，但要validation你将不得不在CSS文件中，而不是内联。

顺便说一下，Google Page Speed是一系列专注于渲染页面的技巧。

您应该始终指定图像的height和width ，以便在下载图像之前帮助浏览器放置页面。

请参阅13.7在HTML 4.01规范中对图像，对象和小程序的可视化表示：

高度和宽度属性为用户代理提供了图像或对象大小的概念，以便他们可以为其保留空间并在等待图像数据的同时继续渲染文档。

他们是build议 ， 不要求，但你真的，真的应该指定他们;-)

此外，请确保您指定的尺寸实际上符合图像的尺寸。

没有什么比等待页面下载更糟的了，因为这些400x300 （！）图片实际上更像是4000x3000的95％的质量。

是的，你应该指定尺寸，所以用户代理预先知道图像完全加载之前的大小，所以如果布局依赖于加载的图像的尺寸，它不可能看起来破碎。另外，如果你依靠IE6的过滤属性来插入PNG，你将需要这些尺寸。

这个答案现在已经过时了，我不会像2009年那样用现代浏览器做出同样的build议。

使用哪一个并不重要，但是我build议只使用一个。

我会build议通过css解决scheme的属性，因为它是更旧的浏览器和禁用样式的人兼容。

其实你不必指定它们。根据W3C的规定，你只能使用它们来覆盖embedded在图像文件中并被浏览器读取的默认值。使用时将原始图像缩放到给定的大小，所以把它们放在浏览器中做一个额外的微积分。

高度和宽度属性为用户代理提供了图像或对象大小的概念，以便他们可以为其保留空间并在等待图像数据的同时继续渲染文档。

 <img src="profilepic.jpg" alt="image" />