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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (43)

如果我知道要用图像标签显示的图像的高度和宽度,我应该包含高度和宽度属性,还是仅将信息放入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,应该始终在图片标签中定义宽度和高度。但是,要验证不能使用样式标签。

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

我建议这样做

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

是否不添加任何属性会更快。根据谷歌(而不是他们是最终的浏览器知识):

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

可以在CSS中做img尺寸,但要验证必须在CSS文件中进行,而不是内联。

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

用户回答回答于

应该始终指定图像heightwidth图像,只是为了帮助浏览器在图像下载完成之前放置图像。

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

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

他们是建议不要求,但你真的,真的应该指定他们

另外,请确保指定的尺寸实际上与图片的尺寸相匹配。

扫码关注云+社区

领取腾讯云代金券