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。

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

Answer 3

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

CSS像素是浏览器使用的抽象单位。 CSS像素是与设备无关的像素。他们将自身调整为渲染屏幕的像素密度。

如果我们具有以下代码：

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

在标准显示器中，上述组件的尺寸为250px x 400px，而在Retina显示器中，尺寸为500px x 800px。

在这种情况下，您有两种选择 1.您始终可以使用2倍大小的图像，并使用CSS样式或设置img宽度和高度将其显示为50％ 2. 更好的方法：假设您要在服务器中显示一个250px x 400px的图像，在服务器中有一个大小为500px x 800px的替代图像，并在将网页投放到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;
  }
}

希望这会有所帮助。

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

3 个答案: