使用CSS将图像尺寸设置为“好”，因为在HTML中设置它们？

Question

当我很久以前第一次学习HTML时，我被告知要始终在HTML中设置图像的尺寸非常重要，这样浏览器就可以绘制一个空白框，图像应该放在那里，渲染你的页面，然后下载并呈现它们所属的图像。如果您没有为图像设置宽度和高度值，浏览器必须首先下载图像以发现它们的尺寸，并且对于有蹩脚连接的人来说，这会降低页面加载速度。

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

Answer 1

您提到的图像未立即下载的问题也适用于您的CSS。

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

所以我个人认为把尺寸放在CSS中很好。

Answer 2

是的，在CSS中设置这些属性也可以。

然而，我不知道它会以任何方式影响页面呈现速度。它所具有的微不足道的效果是，依赖于图像的布局似乎会在页面上跳转，直到加载图像并分配最终将占用的所有空间。

这不是我遵循的做法。

Answer 3

此处已经讨论并回答了类似的问题：

Image width/height as an attribute or in CSS?

  

应该内联定义。如果你   正在使用img标签，即该图像   应该具有语义价值   内容，这就是为什么alt   验证需要属性。

     

如果图像是其中的一部分   布局或模板，你应该使用   标签以外的标签和分配   图像作为CSS背景   元件。在这种情况下，图像具有   没有语义意义因此   不需要alt属性。我   相当肯定大多数屏幕   读者甚至不知道CSS   图像存在。

这也很有用：

  

如果它是您网站模板的一部分，   我把它放在CSS文件中。

     

如果只是在一个页面上，它应该是   内联（或在一个块中定义）   页面特定的CSS在顶部。）

Answer 4

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

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

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

在页面加载之前解析CSS，因此指定高度＆amp; CSS中的宽度与内联指定它的效果一样。

要记住的一件事是内联样式（包括高度和宽度声明）总是特定于CSS的特征。如果您指定内嵌图像的高度和宽度，如果要调整图像的大小，则可能必须返回存在图像的每个页面。

我个人建议使用CSS，因为它会将你的所有风格保存在同一个地方。

Answer 5

我认为唯一的区别是css可以（是的，它可能！）不被阅读，因此使用<img>属性。 但我不确定，我要检查一下。

编辑：http://www.mezzoblue.com/archives/2005/05/10/image_attrib/

Answer 6

虽然您可以使用CSS来清理布局，但如果您的布局因无法加载单个图像而混乱，那么您应该先修复它。

现代版面应由div和CSS控制，布局中的图像只能以background-image:

的形式提供

Answer 7

当天总是将维度放入HTML代码的原因是由于加载时间 - 在14.4K调制解调器上，即使相对较小的图像文件在主HTML文档加载后也会显着加载。

现在这不是一个问题。如果这是一个问题，值得注意的是CSS文件将在主HTML文档之后加载，因此如果您只指定维度，那么您可能会遇到同样的问题，但CSS文件通常相当小，所以效果应该是最小化。

另一点是老式HTML设计非常注重布局，图像大小通常是其中的关键部分 - 如果图像尺寸错误，整个页面的布局通常是完全错误的。

现代页面设计以非常不同的方式处理事物，将最少的任何布局信息放入HTML中，并将其全部抽象到样式表中。因此，在典型的现代网站上，在样式表加载之前，该站点将只是一系列块，并且完全缺乏设计。实际上，通常图形本身 - 而不仅仅是它们的尺寸 - 在样式表中定义。

所以答案是要遵循现代页面设计方法，你应该把它放在样式表中。

显然，对于大多数网站而言，样式表加载速度非常快，但不仅仅是影响它的图形大小。