使用CSS将图像尺寸设置为"好",因为在HTML中设置它们？

Question

很久以前,当我第一次学习HTML时,我被告知必须始终在HTML中设置图像的尺寸,以便浏览器可以绘制一个空白框,图像应该放在哪里,渲染页面,以及然后下载并渲染它们所属的图像.如果您没有为图像设置宽度和高度值,则浏览器必须首先下载图像以发现它们的尺寸,并且对于具有糟糕连接的人来说,它会减慢页面加载速度.

在过去的几年里,我一直在使用CSS,我总是在我的HTML中的标签中width加上height声明img.我的问题是,在样式表中设置宽度和高度,不再添加这些HTML属性,同样好吗？如果没有它们,它确实使我的斯巴达HTML看起来更清晰.

Answer 1

您提到的图像没有立即下载的问题也适用于您的CSS.

不同之处在于,没有CSS的其余部分,整个布局可能没有意义.换句话说,如果CSS的其余部分没有加载,那么图像尺寸也缺失的事实并不会那么明显.

所以我个人认为将尺寸放在CSS中是很好的.

Answer 2

这是一个很好的问题，但它有点主观，可能会导致比通常建议的更多讨论。

早在 90 年代，浏览器速度很慢，互联网也是如此。56k 需要一段时间才能传输中等大小的图像。在此期间，布局将调整大小以适合图像。

快进十年，互联网速度更快，渲染时间也更快。人们习惯于在页面加载的前半秒内稍微改变的布局。只要您了解页面布局在加载过程中可能会发生变化，不指定图像大小也不错。

CSS 在页面加载之前被解析，因此在 CSS 中指定高度和宽度与内联指定它一样有效。

要记住的一件事是，内联样式（包括高度和宽度声明）在特异性方面始终胜过 CSS。如果您指定内联图像的高度和宽度，并且想要调整图像的大小，则可能必须返回到存在图像的每个页面。

就我个人而言，我建议使用 CSS，因为它将所有样式保留在同一个位置。