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

【问题标题】：How to shrink large image and retain quality?如何缩小大图像并保持质量？
【发布时间】：2019-12-27 19:00:25
【问题描述】：

我需要调整一堆大图像的大小并将它们缩小。原件大约是 2500x3800，我需要将它们调整到大约 400x650（我保持精确的纵横比，这些只是一些粗略的示例数字）。

我目前正在使用 PHP、imagecopyresampled()、imagejpeg() 和 imagepng()。当我以这种方式缩小它们时，客户对最终的图像质量不满意——它们有点模糊。我对imagejpeg() 和imagepng() 都使用了最高质量的选项（即分别为100 和0）。

那么，如何缩小这些图像的大小并获得比上述图像更好的质量？ PHP中有更好的选择吗？我应该使用不同的工具/语言吗？

一个 SO 问题建议多次调整大小（例如，先调整为中等大小，然后再调整为小版本）。这种方法有什么优点吗？

有趣的是，我在不同的网页上以更小的尺寸显示相同的调整大小的图像。我正在使用 HTML/CSS 将它们缩小 10-20%。当我这样做时，客户对质量感到满意。因此，如果您在浏览器中使用 HTML/CSS 稍微减小图像尺寸，似乎有一种方法可以提高图像质量。我应该使用这种方法吗？这听起来不是个好主意。

【问题讨论】：

PNG 没有质量设置。它是无损压缩，其压缩设置的所有值在读出时都会产生完全相同的图像。参数平衡压缩时间与文件大小。
请不要重新发明轮子。有很多很酷的库可以为您完成这些任务。你必须使用它们。
看看这个很酷的库，github.com/gumlet/php-image-resize，它完全按照你想要的方式工作

标签： php html css image-processing image-quality

【解决方案1】：

您没有显示您的代码，因此没有人可以帮助您太多。但只是一个提示。可能是因为显示器是视网膜造成的。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

迄今为止的最佳答案。使用可以使用 Lanczos 作为过滤器的方法，即通过 Imagick：php.net/manual/de/imagick.resizeimage.php#94493

【解决方案3】：

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

CSS 像素是浏览器使用的抽象单位。 CSS 像素是与设备无关的像素。它们会根据渲染屏幕的像素密度重新调整自己。

如果我们有以下代码：

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

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

在这种情况下，您有两种选择 1.您始终可以使用 2x 大小的图像并使用 css 样式或设置 img 宽度和高度显示为 50% 2. 更好的方法：假设您要显示 250 像素 x 400 像素的图像，在服务器中有一个 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;
  }
}

希望这会有所帮助。

【讨论】：