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

74

如果我知道要通过图像标签显示的图像的高度和宽度，我应该包括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;" />

html css image

— 乔什·吉布森（Josh Gibson）
source

图像宽度/高度是否

— Mike Cluck 2015年

85

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

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

我建议这样做

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

编辑：有人在评论中建议不添加任何属性会更快。根据Google的说法（并非所有浏览器知识的终结）：

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

鉴于此，您可以在CSS中进行img标注，但要进行验证，必须在CSS文件中进行，而不是内联。

顺便说一句，Google Page Speed是一系列旨在更快地呈现页面的技巧。

— 泰勒·卡特
source

1

该页面将呈现更快，没有任何属性。

— Elzo Valugi 09年

1

@Elzo据谷歌表示会。阅读：code.google.com/speed/page-speed/docs/…–

— 泰勒·卡特

6

如果图像不应该以实际大小显示怎么办？我应该仍然定义其宽度和高度，还是应该定义其显示的宽度和高度？IE浏览器，如果有一个图像是500 * 500像素，但它应该显示为45 * 45？

— lindhe 2012年

1

@TylerCarter我知道这要花很长时间了，但是我发誓W3C曾经在您未指定高度和宽度时抛出错误/警告。他们不再抛出警告/错误..对此有更新吗？

— Govind Rai

1

相关：“是的。[width属性]不是必不可少的，但是它将帮助浏览器更快，更清晰地呈现页面，尤其是当与height元素结合使用时……。这样做可以避免在重新加载页面时发生的烦人的跳转图片突然占据了文档中的空间，并将所有内容向下推，导致用户失去了在页面上的位置，是的，请使用width（和height）属性....标识图片的固有高度文件，而不是指定所需的布局大小。 ”，html.com/attributes/img-width

26

如果仅是为了帮助浏览器甚至在下载图像之前也要布置页面，则应始终指定图像的height和width。

请参阅HTML 4.01规范中的13.7图像，对象和小程序的直观表示：

height和width属性使用户代理可以了解图像或对象的大小，以便他们可以为其保留空间并在等待图像数据时继续呈现文档。

他们建议，并没有要求，但你真的，真的应该指定它们;-)

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

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

— 思南·努尔
source

经过测试，Chrome和Safari会在加载之前保留空间。Firefox却没有。

— lulalala 2015年

5

是的，您应该指定尺寸，以便用户代理可以在图像完全加载之前预先知道尺寸，因此，如果布局依赖于加载的图像的尺寸，则布局看起来可能不会损坏。另外，如果您依靠IE6的filter属性插入png，则需要这些尺寸。

— 默德·奥穆拉利耶夫
source

2

他在询问是否应该添加图像尺寸的哪种方法。

— MitMaro

我必须忘记添加这一点-与本机属性一起使用是首选。.几乎从来没有理由依赖内联CSS。

— meder omuraliev 09年

1

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

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

我建议在CSS解决方案上使用该属性，因为它与较旧的浏览器和禁用样式的人更兼容。

— 米特罗
source

3

？这被否决了（为什么没有评论）。至少我将其恢复为零。这就是为什么，这个问题没有涉及，但是是的-仅指定维属性之一是有价值的。它与缩放图像以适合特定容器有关，并且需要缩放（保持比例）高度和宽度。可以依靠浏览器来做到这一点。就是说，我看到了同时提供这两者的“正确性”，但是在某些情况下仅提供一个维度（允许浏览器按比例计算另一个维度）。

— 克里斯·阿德拉尼亚

1

我认为@MitMaro只是在谈论使用样式或宽度，高度属性。不只指定宽度或高度之一。不赞成投票的原因是，当今所有常用的浏览器都支持使用CSS调整图像大小，而那些样式已关闭的浏览器无论如何也不能期望获得良好的用户体验（即使盲人的屏幕阅读器也使用CSS）。

— 愤怒的丹

现在是2016年，由于图像加载，我仍然可以在整个地方跳转布局。如果图像具有width和height属性，那就不会那么令人讨厌。

— Flimm '15

1

@MitMaro请尽力即兴或编辑您的有效答案。它是正确的; 但是，它仍然缺乏证明您的观点实际需要的内容

— 再也没有，2017年

0

实际上，您不必指定它们。根据w3c规范，您仅使用它们来覆盖嵌入在图像文件中并由浏览器读取的默认值。使用时，会将原始图像缩放到给定大小，因此放置它们会给浏览器造成额外的麻烦。

height和width属性使用户代理可以了解图像或对象的大小，以便他们可以为其保留空间并在等待图像数据时继续呈现文档。

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

— 埃尔佐·瓦鲁吉（Elzo Valugi）
source

好吧，我读过，即使您不需要加载它们，这也有助于缩短加载时间（无论加载多少，无论如何）。

— PositiveGuy