html - 我应该在 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">

---

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

If no dimensions are specified in the containing document, or if the dimensions specified don't match those of the actual images, the browser will require a reflow and repaint once the images are downloaded. To prevent reflows, specify the width and height of all images, either in the HTML tag, or in CSS. - Read More

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

顺便说一句，Google Page Speed 是一系列专注于更快呈现页面的技巧。