在哪里为最快的渲染指定图像尺寸：在 HTML 中还是在 CSS 中？

Posted 2023-02-22

【中文标题】在哪里为最快的渲染指定图像尺寸：在 HTML 中还是在 CSS 中？

【英文标题】：Where to specify image dimensions for fastest rendering: in HTML or in CSS?

【发布时间】：2010-12-29 03:46:39

【问题描述】：

我了解到，明确指定图像尺寸是一种最佳做法。然后，浏览器可以在自己下载图像的同时已经布局页面，从而改善（感知的）页面呈现时间。

这是真的吗？如果是这样，在 html 或 CSS 中指定尺寸是否有区别？

HTML：<img src="" width="200" height="100"> 内联 CSS：<img src="" style="width: 200px; height: 100px"> 外部 CSS：#myImage width: 200px; height: 200px;

【参考方案1】：

根据Google Page Speed，如果您通过 CSS 或 HTML 指定尺寸并不重要，只要您的 CSS 以 IMG 标记本身而不是父元素为目标：

当浏览器布置页面时，它需要能够围绕可替换元素（例如图像）流动。它甚至可以在下载图像之前开始渲染页面，前提是它知道包裹不可替换元素的尺寸。如果包含文档中未指定尺寸，或者指定的尺寸与实际图像的尺寸不匹配，则浏览器将在下载图像后要求重排和重绘。要防止重排，请在 HTML 标记或 CSS 中指定所有图像的宽度和高度。

但是，请注意，他们建议不要使用这些尺寸调整图像大小，即始终使用真实尺寸：

不要使用宽度和高度规格来动态缩放图像。如果图像文件实际上是 60 x 60 像素，请不要在 HTML 或 CSS 中将尺寸设置为 30 x 30。如果图像需要更小，请在图像编辑器中对其进行缩放并设置其尺寸以匹配（有关详细信息，请参阅优化图像。）

【讨论】：

这是我一直在寻找的答案。但是，来自 Google，这是否仅适用于 Chrome 或其他浏览器？

Google 不区分浏览器。从不。

我不能代表他们说话，但我认为他们不会区分浏览器。 Google Page Speed 旨在加速整个互联网，并为所有用户，因此针对他们的浏览器（市场份额非常低）提供建议不会很有用......

如果我将高度和宽度放在内联元素中它可以工作，但是如果我将它放在 css 类中，即使使用 id 选择器，谷歌页面速度也会将该元素标记为它没有指定大小，我不知道发生了什么。

【参考方案2】：

我倾向于在 CSS 中进行。当有多个具有相同尺寸的图像时，这无疑是一种胜利（因此您可以执行.comment img.usergroup width: 16px; height: 16px; 之类的操作），并且相同的图像可以在不同的样式表中进行缩放，例如用户可选择的主题。

当您有完全独立的图像并且只在网站上使用一次时，将它们的大小抽象为 CSS 是没有意义的，因此 HTML 版本可能会更合适。

【讨论】：

“在不同的样式表中有相同的图像可以缩放”——实际上是相同的图像文件？你不觉得它们在 IE 中看起来有点垃圾吗？

从编码/维护的角度来看这是有道理的，但在这种情况下，我对渲染性能特别感兴趣：哪种方法导致页面渲染速度最快？

@Paul：不一定；一些图像，如简单的块色 GIF，可能专门设计为可缩放。另外，在 IE7+ 中，您可以获得可选的双三次插值，因此其他材料不会看起来很糟糕。 @Daan：不会有可衡量的差异。在不同的浏览器中，理论上 HTML 或 CSS 可能有更直接的渲染器路径（在 Firefox 中，它是 CSS），但差异会非常小。

啊，原来如此。 “在 IE7+ 中，您可以获得可选的双三次插值”——可选？如何开启？

-ms-interpolation-mode: bicubic。 msdn.microsoft.com/en-us/library/ms530822%28VS.85%29.aspx（另见developer.mozilla.org/En/CSS/image-rendering）

【参考方案3】：

我认为 CSS 为您提供了更大的灵活性：您可以专门设置宽度或高度，同时将其他尺寸设置为 auto。但是在设置两个维度时，我认为没有区别。

【讨论】：

实际上你也可以用 HTML 做到这一点，只需省略一个属性！但是 CSS 确实为您提供了更大的灵活性，因为您还可以使用 min-width、max-height 等。

在大多数浏览器中，如果您只设置一个维度，则默认情况下另一个是自动的。

【参考方案4】：

这并不能直接回答您的问题，但我不会依赖您的图像尺寸来进行页面布局。而是将图像包含在块级元素中。这使 HTML 和 CSS 都不必保存它确实不应该保存的信息，因为图像可能会不时更改。

【参考方案5】：

如果您将大图像放入没有尺寸的 HTML 页面中，您肯定会注意到页面布局会随着图像的下载而发生变化（通过 Internet 连接，如果不是在本地）。

根据其他答案，无论您是在 HTML 还是 CSS 中执行此操作都没有太大区别。

【讨论】：

许多浏览器在解析 CSS 之前不会呈现任何内容。当然，CSS 会在图像之前下降。 （有关何时不会发生这种情况的讨论，请参阅“无样式内容的闪现”。）