4

我刚读完YSlow 建议始终定义图像尺寸（高度/宽度）以提高 HTML 渲染性能。

但是，我也不知道我要链接的图像尺寸。

我所知道的是height永远不会大于 200px，width永远不会大于 300px

如果我定义（CSS），我会受益吗：

img {max-height: 200px; max-width: 300px}

对于 HTML 性能渲染？

4

5 回答 5

9

No, setting the max-width and max-height doesn't improve the performance.

The reason for specifying the width and height of images is that the browser will know exactly how much space the image will take up. If you leave the image size unspecified, the browser has to reflow the layout when the image loads.

You can see this nasty effect on some pages, where the page is first loaded with no placeholders for images, and then the contents jumps around making place for the images as they load.

If you can't specify the size of some images, don't worry too much about it. Just make sure that the layout behaves nicely when the images load, and don't jump around too much.

于 2009-12-15T17:51:51.750 回答
0

在这种情况下，我绝对不会设置图像的高度和宽度，因为你不知道它会是什么。如果您知道大小将是多少，那么设置是好的，因为它将减少浏览器在渲染页面时必须执行的重绘和重排量。

它要做的越少，客户端的性能就越好，因为你不会让浏览器工作太辛苦。

Stoyan Stefanov 在最近的一篇博文中解释得非常好

于 2009-12-18T14:24:31.840 回答
0

我认为您宁愿将其包装<img>成<span>or<div>设置了 max-height 和 max-width 的元素。此外，它（ span 或 div ）应该设置 overflow:hidden ，这样图像就不会超出 div 的范围。

绝对不建议将这些设置直接设置为图像，因为您将在不同的浏览器中获得不同且较慢的渲染。

于 2009-12-18T14:29:30.740 回答
0

不同比例的图像看起来不太好，因为它们会被缩放。我不会推荐这个。

于 2009-12-15T16:56:53.577 回答
0

在 css 中设置图像的最大高度和宽度将使 img 标签根据约束调整 img 的大小，但如果您使用像 asp.net 或 php 这样的后端脚本语言，您可以使用他们的 img 库来缩放图像服务器端要么保存到硬盘驱动器以供以后使用，要么即时调整大小。

你可以签出http://shiftingpixel.com/2008/03/03/smart-image-resizer/用于 php 作为入门

或者，如果您使用的是 .NET，您可以查看此链接http://weblogs.asp.net/gunnarpeipman/archive/2009/04/02/resizing-images-without-loss-of-quality.aspx

于 2009-12-15T17:01:53.180 回答