调整图像大小 - 浏览器 vs Photoshop

Question

我有一个客户坚持要在他的网页上使用“清晰”的图片。其中一张图片宽度为2592像素，但页面只有940像素宽。我用Photoshop调整了大小，但是质量明显下降，出现了很多锯齿状的边缘。当我将尺寸调整为原来的三分之一时，我预计会有损失，但我认为我可以做得更好。因此，我采用原始图像，并让浏览器（Chrome）将其调整为940像素宽。是的，我知道这是最糟糕的选择，但我只是在试验。结果证明，浏览器比Photoshop更擅长调整大小——我没有看到锯齿状的边缘，图片的质量看起来与原始图片相当接近。

那么问题来了，为什么Photoshop不能像Chrome（IE8和Firefox也能做得很好）一样好地调整大小呢？我尝试过调整Photoshop的重采样选项，但没有看到真正的区别。

- azrob68

---

在Photoshop的“图像大小”弹出窗口中，底部有一个下拉菜单，其中包含选项（最近邻、双三次等）...你尝试过不同的选项吗？ - Ben

当你在Photoshop中缩小图片时（如果你做得正确），不应该出现质量损失。你可能会在保存时失去质量。在保存图片时，Photoshop会给你选择保存图片的质量选项。确保选择最高的选项。 - InspiredBy

Answer 1

在 Photoshop 中缩放图像时需要考虑一些不同的因素：

---

1.) 文件类型+压缩

如果您使用有损压缩的文件类型（例如JPEG），您需要确保将质量设置为>8，否则您会看到明显的质量下降。

2.) 重采样方法

Photoshop提供了几种不同的重采样方法，这些方法影响缩小时像素的组合方式。以下是一些图片链接，说明了在缩放时可以修改的位置。

图像->图像大小...

http://cl.ly/3W3M0b3W3H0G1Y452L15

这个窗口底部有一个下拉菜单：

http://cl.ly/0o463J2J0e2L1u0C1U26

很可能你所遇到的问题是你的图像正在使用“最近邻”或双线性插值进行重采样。

---

试一试。

- flagoworld

---

我尝试了PS提供的每种重采样选项。即使在Photoshop内部，结果看起来仍然有锯齿状。这是在保存为JPG/GIF/PNG之前的情况。 - azrob68

顺便提一下，我知道浏览器在缩放方面有优势，因为它具有可以调整大小的原始图像，而PS图像是静态的，并且随着你的缩放会变得模糊。 - azrob68

那么，客户使用的是新的Retina显示器Macbook Pro吗？因为真的没什么区别。如果客户对这张几乎完美且比互联网上99%的图片都更好的画面挑剔不满，那么可能是其他问题。或者他/她只是在搞事情。我只是说一下。你没有做错任何事情，而且在我的Apple Cinema显示器上看起来很棒。 - flagoworld

当我在PS中重新制作示例时，由于某种原因，它似乎变得更好了一些。之前我能看到差异，现在不太明显了...或者可能是我的眼睛累了。不过你关于浏览器缩放级别的想法应该是正确的。这可能是为什么全分辨率版本看起来比调整大小后的版本更清晰，因为浏览器可以重新采样以适应缩放级别而不会失去质量。 - azrob68

我也有类似的问题。每当我使用编辑器（如Adobe Lightroom或其他编辑器）调整图像大小时，它看起来比我在查看器中缩小原始图像以获得与编辑器调整大小后相同屏幕尺寸时要不清晰。而且无论我使用什么查看器或图像编辑器 - 缩小的原始图像始终比调整大小后的图像更清晰。在编辑器中将jpg质量设置为100％也没有帮助。 - Arshak

Answer 2

你可以尝试使用基于浏览器的脚本，例如TimThumb：http://code.google.com/p/timthumb/ 请确实需要调整图像大小，而不是缩小巨大图像以显示。该脚本将在不同大小上创建您的图像副本，如果我记得正确，它甚至支持某种缓存。

我已经使用它将非常大的图像调整为非常小的缩略图，并且它始终看起来很清晰。

- MultiDev

---

不是一个坏的解决方案，但对我来说效果与Photoshop相当。 - azrob68

Answer 3

Photoshop和网络浏览器处理大小调整的方式不同。我不使用Photoshop，所以无法帮助你解决这个问题。

然而，如果你想让图片看起来像是被网页浏览器调整过大小一样，那么就用网页浏览器调整它！截取屏幕截图并裁剪调整后的图片，创建另一张可以在网站上真正使用的图片。

- Adonais

---

我实际上尝试过这种方法。它运行得相当不错，但我希望在Photoshop中有一种更简单的方法。 - azrob68