在不同尺寸下展示图片

Question

我有一张100x100像素的图片，我需要在HTML中以3种不同的尺寸显示它，分别是50x50、60x60和70x70。所以我的疑问是，是将图片保存为3个尺寸，然后不使用CSS或HTML的宽度和高度属性，还是使用相同尺寸的图片，并使用CSS规则来设置尺寸？哪种解决方案渲染速度更快？

- memento

---

让我在家庭服务器上运行基准测试。我猜这取决于浏览器。为了简单起见，我会在CSS中调整大小。 - Bailey Parker

如果所有的图片将在同一页中同时显示，请不要调整大小，而是使用CSS。 - Ivan Nikolchov

当您在浏览器中缩小或拉伸图像时，图像的质量会降低 - 这取决于图像本身有多糟糕。请尝试两种方法，并在几个浏览器中比较结果，以确定哪种方法效果最佳。 - Majid Fouladpour

嗯...如果维度不是正方形的话，我同意 :)，我的尺寸是100x100，我需要在60x60、50x50、70x70中展示，所有维度都是从原始尺寸缩小且为正方形。 ;) - memento

Answer 1

这要看情况。

如果您正在使用相同的图像，则浏览器只需要1次图像缓存。因此，如果在同一页中显示多种类型的图像，则不要选择多个图像。否则，请选择多个图像。

但是，说实话，如果您有100x100大小的图片，加载不应该成为问题。仅在慢速连接（＜128kbps）下才会出现问题。否则，我认为没有明显的差异。

- footy

---

谢谢，那么使用CSS规则还是HTML标签更好呢？ :) - memento

很难回答。如果是样式盒子，或者你可能会经常重复使用（CSS类），则使用CSS。如果您将其放在div标记中，或者希望它成为实际照片，则使用图像。但是，如果没有上下文的情况下，对我来说仍然相当困难。 - footy

Answer 2

关于渲染速度，我认为你不必太担心，主要的区别在于图像质量。一些浏览器（如Chrome）执行非常高质量的图像插值，而其他浏览器（如IE、Firefox）则选择更快的算法，但结果不够好。因此，通过为每个尺寸创建三个单独的图像文件，您可以获得最佳、最一致的图像质量。

话虽如此，由于您只需要将100x100缩放到最小尺寸50x50，因此您可能不需要太担心插值伪影。所以我建议您只需实现最方便的方法即可。

就纯渲染速度而言，使用单独的图像将更快，因为在这种情况下不需要插值步骤。然而，在初始页面加载速度方面，使用单个图像将更快，因为只需下载1个文件而不是3个（或4个）。至于使用CSS或HTML标记属性设置宽度和高度，速度几乎没有区别。昂贵的操作是图像本身的插值，无论您是通过CSS还是通过标记属性指定插值，都不会有太大的区别。

- aroth