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

Question

如果我知道要展示的图片的高度和宽度，我应该在 image 标签中包含 height 和 width 属性，还是只在 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;" />

- Josh Gibson

---

可能是图像宽度/高度作为属性还是在CSS中？的重复问题。 - Mike Cluck

Answer 1

根据Google Page Speed的说法，您应该在图片标签中始终定义宽度和高度。但是，为了验证，您不能使用样式标签。

此外，您应该始终指定与实际图像相同的高度和宽度，这样浏览器就不必对其进行任何修改，如调整大小。

我建议这样做。

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

---

编辑： 评论中有人建议快速的方法是不要添加任何属性。根据谷歌（虽然他们并非浏览器知识的终极权威）的说法：

如果在包含图像的文档中未指定尺寸，或者指定的尺寸与实际图像不匹配，则浏览器在下载图像后需要重新流式处理和重绘。为了防止重新流式处理，请在HTML标记或CSS中指定所有图像的宽度和高度。 - 了解更多

因此，您可以使用CSS设置img的尺寸，但为了验证，您必须在CSS文件中进行设置，而不能使用内联样式。

顺便提一下，Google Page Speed是一个专注于使页面呈现更快的提示系列。

- Tyler Carter

---

页面不带任何属性将会更快地渲染。 - Elzo Valugi

@Elzo Valugi - 我打赌谷歌建议这样做是为了提供更好的用户体验，而不是追求性能。 - karim79

@Elzo 根据谷歌的说法，它会这样做。请阅读此链接：http://code.google.com/speed/page-speed/docs/rendering.html#SpecifyImageDimensions - Tyler Carter

如果图片不应该按实际大小显示，我是否仍需定义它们的宽度和高度，或者应该定义它们展示时的宽度和高度？例如，如果有一张500500像素的图片，但应该显示为4545像素。 - lindhe

@TylerCarter 我知道这已经拖了很久，但我发誓 W3C 曾在您未指定高度和宽度时抛出错误/警告。现在他们不再抛出警告/错误了.. 这是有更新吗？ - Govind Rai

相关：是的。[width属性]并非必要，但它可以帮助浏览器更快、更干净地呈现您的页面，特别是与高度元素结合使用时......这样做将防止刚加载的图像突然占据文档空间并将所有内容推下，导致用户在页面上失去位置的烦人跳动。因此，是的，使用宽度（和高度）属性...来识别图像文件的固有高度，而不是指定所需的布局大小。"，http://html.com/attributes/img-width/ - user216084

Answer 2

如果只是为了帮助浏览器在图片下载前更好地布局页面，您应该始终指定图像的height和width。

请参阅HTML 4.01规范中的13.7 图像、对象和小程序的视觉呈现：

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

它们建议使用，但并非必需，但您真的，真的应该指定它们；-）

此外，请确保您指定的尺寸实际上与图像的尺寸匹配。

没有什么比因为那些看似400x300(!)的图像实际上更像4000x3000且质量为95%而等待页面下载更糟糕的了。

- Sinan Ünür

---

经过测试，Chrome和Safari在加载前会保留空间。然而，Firefox则不会这样做。 - lulalala

Answer 3

是的，您应该指定图像的尺寸，这样用户代理就可以在图像完全加载之前事先知道尺寸，因此如果布局依赖于已加载图像的尺寸而无法显示，则不会出现外观上的破损。此外，如果您依赖于IE6的滤镜属性来插入PNG，则必须指定这些尺寸。

- meder omuraliev

---

他在询问应该使用哪种添加图像尺寸的方法，而不是询问是否应该这样做。 - MitMaro

我一定忘记添加了 - 最好使用本地属性.. 几乎从来没有依赖于内联CSS的理由。 - meder omuraliev

Answer 4

这篇答案已经有些过时了，如果使用现代浏览器的话，我不会再做出与2009年时相同的建议。

---

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

我建议使用属性而不是 CSS 解决方案，因为它更兼容旧版浏览器和禁用样式的用户。

- MitMaro

---

这篇帖子被负投票了（没有任何评论说明原因）。我把它的投票数提升回到了零。以下是为什么，虽然问题不涉及此，但是只指定一个维度属性确实有价值。这与将图像缩放以适应特定容器的比例以及需要同时缩放（保留比例）高度和宽度有关。可以依赖浏览器来完成此操作。话虽如此，我认为提供两个维度的“正确性”，但在某些情况下，只需一个维度（允许浏览器按比例计算另一个维度）即可。 - Chris Adragna

我认为@MitMaro所说的是只使用样式或宽度、高度属性，而不是仅指定其中一个。这个被踩的原因是今天所有常用的浏览器都支持使用CSS调整图像大小，而那些关闭样式的用户也不能期望获得良好的用户体验（即使是盲人屏幕阅读器也使用CSS）。 - Angry Dan

现在已经是2016年了，但我仍然会遇到因为图片加载而导致页面布局跳动的情况。如果这些图片有width和height属性，那么这种情况就不会那么突兀了。 - Flimm

@MitMaro 请努力改进或编辑您的有效答案。它是正确的，但仍然缺少实际需要来证明您的观点的内容。 - Nevermore

Answer 5

实际上，您不必指定它们。根据w3c specification，您只使用它们来覆盖嵌入在图像文件中并由浏览器读取的默认值。当使用时，将原始图像缩放到给定大小，因此将它们放置在其中会为浏览器进行额外的计算。

高度和宽度属性为用户代理提供了有关图像或对象的大小的信息，以便它们可以为其保留空间并在等待图像数据时继续呈现文档。

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

- Elzo Valugi

---

我已经阅读过相关内容，如果您即使不需要也将它们放置在其中，这可以帮助改善加载时间（无论那会是多少）。 - PositiveGuy