在HTML与CSS中指定图像尺寸以进行页面加载

很久以前我从某个地方学到了指定< img>的宽度和高度. HTML文档中的元素可以加快并改善页面加载体验,并且通常遵循以下惯例：

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

我现在面临的情况是,我在一个页面上有大量的图像,我更喜欢通过CSS设置维度,以便更容易控制和重复性更低的HTML代码：

.whatever img {width: 100px; height: 100px;}

虽然这不是一个非常严重的问题,但我想知道在CSS中声明维度是否具有与在HTML中声明维度相同的好处,或者它是否应该直接用HTML完成？

任何见解都会受到欢迎.

谢谢

解决方法

我想如果样式表立即可用,图像尺寸将立即应用于布局,这是练习的重点.

这个猜测得到了Google’s pagespeed rules的支持.他们似乎可以通过这种方式指定图像(强调我的)：

Specifying a width and height for all images allows for faster rendering by eliminating the need for unnecessary reflows and repaints.

When the browser lays out the page,it needs to be able to flow around replaceable elements such as images. It can begin to render a page even before images are downloaded,provided that it knows the dimensions to wrap non-replaceable elements around. 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 <img> tag,or in CSS.