html - 在 HTML 和 CSS 中为页面加载指定图像尺寸

Question

很久以前我从某个地方了解到为 <img> 指定宽度和高度HTML 文档中的元素可加快并改善页面加载体验，并且通常遵循以下做法:

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

我现在面临这样一种情况，我在单个页面上有大量图像，我更愿意通过 CSS 设置尺寸，以便于控制和减少重复的 HTML 代码:

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

虽然这不是一个非常严重的问题，但我想知道在 CSS 中声明尺寸是否与在 HTML 中声明尺寸具有相同的好处，还是应该直接在 HTML 中完成？

欢迎任何见解。

谢谢

Answer 1

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

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.