-1

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

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

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

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

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

4

3 回答 3

1

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

于 2019-08-22T12:57:56.007 回答
1

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

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

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

于 2019-08-22T13:44:44.493 回答
0

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

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

如果我们有以下代码：

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

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

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

希望这可以帮助。

于 2019-08-22T13:23:12.830 回答