在HTML中设置图像尺寸

Question

即使我已经将图像裁剪到正确的尺寸，并且其容器具有固定的尺寸和overflow:hidden，设置图像（在静态内容中）的尺寸是否是一个好习惯？

<img src="" title ="" alt="" width="100" height="100"/>

- theorise

---

有必要吗？如果图像已经是正确的尺寸了？ - theorise

Answer 1

一般情况下，您应该提供高度和宽度标签，这样浏览器就可以为图像保留所需的空间。否则，在页面加载过程中布局可能会发生变化。

由于您有一个固定大小的容器并且设置了overflow: hidden，因此这可能不会带来太多帮助。但即使没有帮助，也不会产生任何危害。因此，您应该始终添加高度和宽度属性。

请参见http://www.w3schools.com/tags/att_img_width.asp（在“定义和用法”下面查看提示）。

- Danilo Bargen

---

刚刚在尝试这个。如果你在HTML中设置了图片的尺寸，它似乎加载得更快。谢谢。 - theorise

@denix 如果设置了尺寸，图像加载速度并不会更快，但空间从一开始就被正确地保留，这在加载过程中看起来更好。 - Pekka

Answer 2

我没有确凿的数据支持，但我认为我曾经见过某些浏览器在加载实际图像之前显示一个矩形。要正确地显示这个矩形区域，浏览器需要宽度和高度的数据。

此外，当图片关闭或无法加载时，一些浏览器将显示一个矩形代替图像。为了正确调整矩形大小，也需要尺寸信息。

我认为设置它不会有任何伤害。

- Pekka