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

Question

如果我知道我要用图像标签显示的图像的高度和宽度,我应该包括高度和宽度属性,还是只将信息放在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;" />

Answer 1

根据Google Page Speed,您应始终在图片代码中定义宽度和高度.但是,要验证您不能使用样式标记.

此外,您应始终指定与实际图像相同的高度和宽度,以便浏览器不必像调整大小那样对其进行任何修改.

我建议你这样做

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

编辑:有人在评论中建议,不添加任何属性会更快.根据谷歌(并不是说它们是所有浏览器知识的终结):

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

鉴于此,您可以在CSS中执行img维度,但要验证您必须在CSS文件中执行此操作,而不是内联.

顺便说一下,谷歌页面速度是一系列专注于更快地渲染页面的技巧.

如果图像不应以实际尺寸显示怎么办？我还应该定义它们的宽度和高度,还是应该定义它们显示的宽度和高度？IE如果有500*500像素的图像,但它应显示为45*45？ (6认同)
@Elzo 据谷歌称，它会。阅读：http://code.google.com/speed/page-speed/docs/rendering.html#SpecifyImageDimensions (2认同)
相关：“是的。[`width`属性]不是必需的，但它将帮助浏览器更快、更干净地渲染页面，特别是与 height 元素结合使用时......这样做将阻止在以下情况下发生的恼人的跳转：新加载的图像突然占用了文档中的空间并将所有内容向下推，导致用户失去了在页面上的位置。所以是的，**使用宽度（和高度）属性......来识别图像文件的固有高度，而不是指定所需的布局大小。**”，http://html.com/attributes/img-width/ (2认同)

Answer 2

如果只是为了帮助浏览器在下载图像之前将页面放置出来,您应该始终指定图像height和width图像.

高度和宽度属性使用户代理可以了解图像或对象的大小,以便他们可以为其预留空间并在等待图像数据时继续渲染文档.

他们是推荐的,不是必需的,但你真的,真的应该指定它们;-)

另外,请确保您指定的尺寸实际上与图像的尺寸相匹配.

没有比等待页面下载更糟糕的了,因为那些400x300(!)图像实际上更像4000x3000是95%的质量.

Answer 3

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