如何缩小大图并保持质量？

Question

我需要调整一堆大图像的大小并使它们变小。原件大约为 2500x3800，我需要将它们缩小到大约 400x650（我保持确切的纵横比，这些只是一些粗略的示例数字）。我目前正在使用 PHP imagecopyresampled()、imagejpeg()和imagepng(). 当我以这种方式调整它们的大小时，客户对生成的图像质量不满意 - 它们有点模糊。我使用的两个最高质量的选项imagejpeg()和imagepng()（即100和0分别）。那么我怎样才能缩小这些图像的大小并获得比上面产生的更好的质量呢？PHP 中有更好的选择吗？我应该使用不同的工具/语言吗？一个 SO 问题建议多次调整大小（例如，首先将大小调整为中等大小，然后再将其调整为小版本）。这种方法有什么好处吗？有趣的是，我在不同的网页上以更小的尺寸显示相同的调整大小的图像。我使用 HTML/CSS 将它们缩小了大约 10-20%。当我这样做时，客户对质量感到满意。因此，如果您使用 HTML/CSS 稍微减小浏览器中的图像尺寸，似乎有一种方法可以提高图像质量。我应该使用这种方法吗？这听起来不是个好主意。

Answer 1

你不显示你的代码，所以没有人可以帮助你。但只是一个提示。可能是显示器是视网膜造成的。

Answer 2

为了适当的下采样，以减少混叠的方式，图像必须通过低通滤波（即模糊！）进行频带限制。

该函数imagecopyresampled似乎不会执行这种模糊（而是进行插值，仅适用于上采样）。您可以使用函数 实现模糊效果imageconvolution，所有系数都等于1，并应用两遍或三遍。只有这样你才能使用imagecopyresampled.

---

你会认为我疯了，因为据说图像太模糊了，但我敢打赌，你的客户所说的模糊实际上是别名。

Answer 3

这主要是由于视网膜显示器的高分辨率。

CSS 像素是浏览器使用的抽象单位。CSS 像素是独立于设备的像素。它们将自己重新调整为呈现它们的屏幕的像素密度。

如果我们有以下代码：

 <div style=”width:250px; height:400px”></div>

上面的组件在标准显示器中看起来是 250 像素 x 400 像素，而在 Retina 显示器中是 500 像素 x 800 像素。

在这种情况下，您有两种选择 1. 您始终可以使用 2x 大小的图像并使用 css 样式或设置 img 宽度和高度显示为 50% 2.更好的方法：假设您想显示 250px x 400px 的图像，有一个在服务器中大小为 500 像素 x 800 像素的备用图像，并在网页提供给 Retina 显示器时呈现它们。

例如第二个选项的代码

/* low resolution display */

.image {

  background-image: url(/pathTo/lowResImg.png);

  background-size: 250px 400px;

}

/* for retina display */

@media only screen and (min--moz-device-pixel-ratio: 2),

only screen and (-o-min-device-pixel-ratio: 2/1),

only screen and (-webkit-min-device-pixel-ratio: 2),

only screen and (min-device-pixel-ratio: 2) {

  .image {

    background: url(/pathTo/highResImage.png) no-repeat;

    background-size: 250px 400px;

  }

}

希望这可以帮助。