5

很久以前我第一次学习 HTML 时,有人告诉我,始终在 HTML 中设置图像的尺寸很重要,这样浏览器就可以在图像应该去的地方绘制一个空框,呈现你的页面,然后然后下载并渲染它们所属的图像。如果您没有为图像设置宽度和高度值,则浏览器必须先下载图像才能发现它们的尺寸,并且对于连接不佳的人来说,它会减慢页面加载速度。

在过去的几年里,我一直在使用 CSS,我总是在我的 HTML 的标签中放置一个widthandheight声明。img我的问题是,是否在样式表中设置宽度和高度,不再添加这些 HTML 属性,也一样好吗?如果没有它们,它肯定会让我的简陋 HTML 看起来更干净。

4

7 回答 7

5

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

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

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

于 2010-11-17T16:28:52.017 回答
1

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

但是,我不知道它会以任何方式影响页面呈现速度。它确实产生的一点影响是,依赖于图像的布局似乎会在页面上跳来跳去,直到图像被加载并分配它最终会分配的所有空间。

这不是我自己遵循的做法。

于 2010-11-17T16:28:18.257 回答
1

这里已经讨论并回答了一个类似的问题:

图像宽度/高度作为属性还是在 CSS 中?

它应该内联定义。如果您使用 img 标签,该图像应该对内容具有语义价值,这就是验证需要 alt 属性的原因。

如果图像要成为布局或模板的一部分,则应使用 img 标签以外的标签,并将图像作为 CSS 背景分配给元素。在这种情况下,图像没有语义,因此不需要 alt 属性。我相当肯定大多数屏幕阅读器甚至都不知道 CSS 图像的存在。

这也很有帮助:

如果它是您网站模板的一部分,我会将其放在 CSS 文件中。

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

于 2010-11-17T16:28:49.053 回答
1

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

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

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

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

要记住的一件事是,内联样式(包括高度和宽度声明)在特异性上总是胜过 CSS。如果您指定内联图像的高度和宽度,如果您想调整图像的大小,则可能必须返回存在图像的每个页面。

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

于 2010-11-17T16:33:46.850 回答
0

我认为唯一的区别是 css 可以(是的,有可能!)不被读取,因此<img>使用了属性。但我不确定,我要检查一下。

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

于 2010-11-17T16:25:47.777 回答
0

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

现代布局应由 div 和 CSS 控制,布局中的图像应仅以background-image:

于 2010-11-17T16:31:45.520 回答
0

过去总是将尺寸放入 HTML 代码的原因是由于加载时间——在 14.4K 调制解调器上,即使是相对较小的图像文件也会在主 HTML 文档加载后显着加载。

这些天来,这已经不是什么大问题了。如果这是一个问题,值得注意的是 CSS 文件将在主 HTML 文档之后加载,因此如果您只在那里指定尺寸,您可能会遇到同样的问题,但 CSS 文件通常很小,所以效果应该是最小化。

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

Modern page design approaches things very differently, putting minimal of any layout information into the HTML, and abstracting it all to the stylesheet. Therefore on a typical modern site, until the stylesheets have loaded, the site will just be a series of blocks, and be completely lacking in design. In fact, often the graphics themselves - not just their dimensions - are defined in the stylesheet.

So the answer is that to follow modern page design methods, you should put it in the stylesheet.

Obviously it's critical for most sites these days that the stylesheets load quickly, but it isn't just the size of the graphics that it'll affect.

于 2010-11-17T17:01:48.663 回答