渲染HTML时使用图像的真实高度和宽度有什么好处？那就是如果我有一个100x100像素的图像，但我想要显示95x95像素的图像，我应该调整服务器上的图像大小，还是让浏览器处理这个？我真的在寻找一般规则和原因。感谢。
<img src="image.jpg" style="width: 95px; height: 95px;" alt="an image" />
答案 0 :(得分：3)
如果你总是使用相同的高度，那么事先调整它一次是有意义的 - 以尽可能好的方式 - 而不是每个人的浏览器来做到这一点。毕竟，您可以验证结果，进行所需的任何调整，使用您可以找到的最佳软件，而不用担心执行调整大小等所需的时间等。
另一方面，我不希望结果在视觉上非常不同，除非你在谈论真正慢的计算机（或许多它可能不会占用那么多的客户端CPU时间。您可能希望检查慢速移动电话上的渲染时间，特别是如果您的目标是移动用户。
答案 1 :(得分：3)
当浏览器调整图像大小时，浏览器会对位图图像的重新采样/插值进行不同的处理，这些图像可能会或可能无法通过CSS控制。这在this post on Flickr's dev blog中详细阐述。如果您在图像编辑器中或使用服务器技术调整图像大小，则可以在浏览器中获得一致的结果。
在你的情况下，周围5个像素以下的差异可能不会太大（除非你担心像素完美！），但如果你试图将尺寸或二进制大图像挤压成小矩形，那么最好事先调整它们的大小。缩小的图像尺寸和文件大小有助于节省带宽。
答案 2 :(得分：3)
如果尺寸明显不同，那么你应该有一个大的版本和一个小版本：
就像在你的例子中一样，100px和95px不应该是一个大问题，但是假设你有大图像并且你想要显示缩略图，那么创建多个版本的图像会更好。
优势将是： 1 - 当您只想显示缩略图时，下载时间更快。 2 - 不同浏览器的更多一致性 3 - 我相信人们可以在这里添加至少另外100个优势
答案 3 :(得分：2)
重新调整图片大小。否则，将加载完整的100X100图像（重量超过95x95 - 尺寸差异越大，您尝试使用html进行缩放的次数越多）。因此，加载一个不会以完整尺寸显示的图像需要花费不必要的长时间。如果你使用html将它们缩小很多，并且页面上有很多图像 - 这会浪费大量的流量并降低速度。
当连接非常慢并且每个人都使用古老的调制解调器的电话线时使用整个宽度/高度的东西 - 这样你可以在加载所有图像之前看到页面的正确布局（并且花了一段时间才看到所有看到包含所有文字的页面后的图片。）
答案 4 :(得分：2)
您应该在有意义的时候调整服务器上的图像大小。我怀疑将100x100px图像大小调整为95x95px会为您节省超过几KB的时间，所以在这种情况下你可能没问题。
如果差异（尺寸方面）很重要，例如在主页面上显示100x100px缩略图，在详细信息页面上显示640x480px图像，然后最好创建两个版本的图像。这将使您的缩略图页面加载速度更快，并且您只会提供最少量的数据。
另一方面，如果差异（尺寸方面）不显着，那么提供两张图像实际上会使传输的数据量翻倍。
以下是Google的PageSpeed所说的内容：Serve scaled images