为什么要使用 height 和 width 属性指定图片尺寸

您是否见过当文档加载时其内容会显示不规律的移动。之所以会这样，是因为浏览器为了能够显示每一个加载的图像，而不断地重新调整页面的布局。浏览器通过下载并解析出图像的宽度和高度来决定图像的大小，然后就会在显示窗口中留出一个相应的矩形空间。然后浏览器就会调整页面的显示布局，以便把图像插入到显示当中。这同时也告诉我们，图像是独立的文件，它与源文件都分别是独立加载的。

但是这不是一种最有效的显示文档的方法，因为浏览器在显示相邻的以及后面的文档内容之前，必须要检查每一个图像文件，并计算它们的屏幕空间。这可能会给文档的显示带来非常大的延迟，从而打断用户的阅读。

对于开发者来说，一种更为有效的方法是通过 标签的 height 和 width 属性来指定图像的尺寸。这样的话，浏览器在下载图像之前就为其预留出了位置，从而可以加速文档的显示，还可以避免文档内容的移动。这两个属性都要求是整数值，并以像素为单位来表示图像尺寸。这两个属性在 标签中出现的次序并不重要。

简单的说，为页面中所有图片指定宽度和高度可以消除不必要的reflows和重新绘制页面【repaints】，使页面渲染速度更快。

当浏览器勾画页面时，它需要能够流动的，如图片这样的可替换的元素。提供了图片尺寸，浏览器知道去环绕附近的不可替换元素，甚至可以在图片下载之前开始渲染页面。如果没有指定的图片尺寸，或者如果指定的尺寸不符合图片的实际尺寸，一旦图片下载，浏览器将需要reflows和重新绘制页面。为了防止reflows，在HTML的标签中或在CSS中为所有图片指定宽度和高度。

height 和 width 属性的问题

虽然 标签的 height 和 width 属性能够改善性能并让你实现一些小技巧，但在使用它们时还是有一些棘手的负面效果。即使用户已经关掉了自动下载图像的功能，浏览器还是要把为图像预留的空间以指定的尺寸显示出来。而这样留给读者的通常是一个空的框架，里面有一个毫无意义的图标，表示这是放置图像的位置。这时页面将看上去非常糟糕，就像根本没有完成一样，并且大部分内容都毫无用处。如果不用这些指定的尺寸，则浏览器将只是在文本中放置一个图像图标，这样显示中至少还有一些文字可以阅读。
对于这个问题我们还没有解决方案，只能强调一点，就是去使用 alt 属性和一些描述性文字，这样读者至少知道这里缺少的是什么东西。我们还是建议您使用这些尺寸属性，因为我们鼓励一切能够改善网络性能的行为。

建议指定与图片本身相一致的尺寸

不要使用非图片原始尺寸来缩放图片。如果一个图片文件实际上的大小是60×60像素，不要在HTML或CSS里设置尺寸为30×30像素。如果图片需要较小的尺寸，在图像编辑软件中，设置成相一致的尺寸(详见优化图像。)

关于这一点，几张图片或者缩放比例不大影响不大，如果是前些年流行的瀑布流排版，而且图片缩放比例比较大的话，chrome也是扛不住的。

建议一定要指定图片或它的块级父元素的尺寸

一定要设置元素本身，或它的块级父元素的尺寸。如果父元素不是块级元素，尺寸将被忽略。不要在一个非最近父元素的祖先元素上设置尺寸。

扩展阅读：

优化浏览器渲染:http://www.99css.com/archives/275#SpecifyImageDimensions

不同浏览器的图片缩放算法有哪些差异？http://www.zhihu.com/question/21684842

建议继续学习：

1. 图片动态局部毛玻璃模糊效果的实现    (阅读：13592)
2. 淘宝图片存储架构    (阅读：9837)
3. 解决IE6从Nginx服务器下载图片不Cache的Bug    (阅读：7098)
4. When we`re only No.2, we try harder之聊天表情设计小探讨    (阅读：6507)
5. 精于图片处理的10款jQuery插件    (阅读：6219)
6. phpThumb:强大的缩微图类    (阅读：5460)
7. 使用CSS3开启GPU硬件加速提升网站动画渲染性能    (阅读：5402)
8. js实现预加载图片让图片快速显示    (阅读：4962)
9. 利用开源的Gearman框架构建分布式图片处理平台[原创]    (阅读：4259)
10. 使用数据库存放图片    (阅读：4187)