Photoshop/网站：Ps 缩放与 HTML 缩放？

Question

在 Photoshop 中将图像缩小到 150px 然后在 HTML 中使用该图像有什么区别：

<img src="blah.png" />

相对

使用 500px 图像，然后在 HTML 中使用它：

<img src="blah.png" width="150px"/>?

品质有差异吗？

Answer 1

有趣的是，现在你几乎看不出区别¹。它在 Chrome/IE 中看起来不错，但 Firefox 的扩展性并不好。无论如何，要补充的是Mike 关于带宽的观点：

• 大图像会严重影响页面加载时间。在 T3 上加载一张图像没什么大不了，但在低带宽智能手机上加载电子商务网站就很麻烦了。
• 您浪费了服务器带宽，这会让您损失金钱（如果您从不提供更大的图片）。
• 你浪费了用户带宽，这会给他们带来金钱损失。

^（1）左侧为 500x500 强制改为 150x150，右侧为 150 原生尺寸

Answer 2

Photoshop 允许您选择缩放方法，例如“双三次锐化”，它通常比标准“双三次”调整大小更适合缩小图像尺寸。

如果您进行浏览器缩放，不同浏览器之间的质量将会有所不同，并且您无法控制这一点。

此外，如果您始终对图像进行浏览器缩放但从不以其全分辨率显示它，那么您就是在浪费带宽。

Answer 3

是的。大多数浏览器没有像 Photoshop 那样出色的图像重采样器。在 HTML 中缩小的图像看起来会略显块状，需要更多带宽、内存和 CPU 使用率。

最佳做法是使用 Photoshop 重采样的图像以原始分辨率显示。