在 Photoshop 中将图像缩小到 150px 然后在 HTML 中使用该图像有什么区别：
<img src="blah.png" />
相对
使用 500px 图像，然后在 HTML 中使用它：
<img src="blah.png" width="150px"/>?
品质有差异吗？
答案1
有趣的是，现在你几乎看不出区别1。它在 Chrome/IE 中看起来不错，但 Firefox 的扩展性并不好。无论如何，要补充的是Mike 关于带宽的观点：
- 大图像会严重影响页面加载时间。在 T3 上加载一张图像没什么大不了，但在低带宽智能手机上加载电子商务网站就很麻烦了。
- 您浪费了服务器带宽，这会让您损失金钱（如果您从不提供更大的图片）。
- 你浪费了用户带宽，这会给他们带来金钱损失。
（1）左侧为 500x500 强制改为 150x150，右侧为 150 原生尺寸
答案2
Photoshop 允许您选择缩放方法，例如“双三次锐化”，它通常比标准“双三次”调整大小更适合缩小图像尺寸。
如果您进行浏览器缩放，不同浏览器之间的质量将会有所不同，并且您无法控制这一点。
此外，如果您始终对图像进行浏览器缩放但从不以其全分辨率显示它，那么您就是在浪费带宽。
答案3
是的。大多数浏览器没有像 Photoshop 那样出色的图像重采样器。在 HTML 中缩小的图像看起来会略显块状，需要更多带宽、内存和 CPU 使用率。
最佳做法是使用 Photoshop 重采样的图像以原始分辨率显示。