Google Chrome 与 GIMP 中的图像插值答案

【问题标题】：Image interpolation in Google Chrome vs GIMPGoogle Chrome 与 GIMP 中的图像插值
【发布时间】：2013-03-29 17:25:27
【问题描述】：

我有一个很大的 png 图像 (950x500px)，我使用 CSS 将其缩小到 500px 宽（和 263 高）。在将此网页上线之前，我决定使用 GIMP 缩放图像，因为使用 CSS 缩放图像是不好的做法。但是，当我在 Google Chrome 中使用 GIMP 而不是 CSS 缩放图像时，即使两个图像都是 png 并且具有相同的尺寸，图像质量也会显着降低。我已经尝试使用 GIMP 提供的所有四种压缩方法（None、Linear、Cubic 和 Sinc (Lanczos3)），但没有一种与 Google Chrome 提供的图像质量相匹配。

谷歌浏览器使用什么压缩方法来提供如此高质量的图像缩放，我如何离线实现这一点？

【问题讨论】：

遗憾的是，这在 2021 年仍然是一个有效的问题......我让一个朋友使用 Photoshop 缩放我的图像，并且差异非常显着。我正在将 PNG 徽标的大小从 89x127 调整为 69x101，无论我选择哪种插值，在 Gimp 中调整大小后文本都变得模糊。

标签： css image google-chrome image-resizing

【解决方案1】：

您可以在此处获得问题的答案：How web browsers resize images

Chrome 似乎使用了几种算法，具体取决于缩放因子：

Chrome 使用了相同的缩小比例（557 到 555 像素）放大时的线性插值。（事实上，这张图是 disconnected 是 ResampleScope 工作方式的产物，并且具有与 Chrome 无关。）

但是看看如果我们再缩小一点到 543 像素会发生什么： […] 我们得到一个完全不同的结果：显然是一个 3 裂的 Lanczos 筛选。 Chrome 的策略可能是在缩小图像时使用 Lanczos 超过 2.5%。

如果你必须自己做（为了更好地控制结果），Cubic 通常是放大的最佳选择，Sinc (Lanczos3) 是缩小的最佳选择。
如果您自己缩放图像，您就会知道它在所有浏览器上的外观。

注意： 越来越多的计算机配备了高分辨率显示器（大约是经典显示器像素密度的 4 倍）。您可能想检查图像在这些计算机上的外观。它们很有可能被浏览器放大。

【讨论】：

我无法让 GIMP 调整文件的好版本。使用convert -resize 为我提供了更好的结果

【解决方案2】：

这是一个非常古老的问题，但我昨天在 Gimp 中调整图像大小时遇到了困难。当我将在 Gimp 中调整大小的图像与在 Chrome（和 Safari）中自动调整大小的图像进行比较时，存在明显的差异。

我正在将 PNG 徽标的大小从 89x127 调整为 69x101，无论我选择哪种插值，在 Gimp 中调整大小后文本都变得模糊。

感谢上面的评论说ImageMagick在调整图像大小时给出了更好的结果，我找到了这篇文章：Efficient Image Resizing With ImageMagick

文章中的命令尽管声称与 Photoshop 无法区分，但并未产生与 Chrome 匹配的结果，但是其中一位评论者添加了一个命令，该命令确实创建了产生最接近结果的图像（除非我的 resize朋友在 Photoshop 中做的）：

convert SOURCE_IMAGE -resize OUTPUT_WIDTH -quality 90 -unsharp 0x0.55+0.55+0.008 OUTPUT_IMAGE

我认为诀窍主要在于锐化。我尝试了不同的设置，但无法完全匹配 Chrome，但这非常接近。

为了完整起见，这里是文章中的命令。请阅读文章以了解其工作原理的完整说明：

mogrify -path OUTPUT_PATH -filter Triangle -define filter:support=2 -thumbnail OUTPUT_WIDTH -unsharp 0.25x0.25+8+0.065 -dither None -posterize 136 -quality 82 -define jpeg:fancy-upsampling=off -define png:compression-filter=5 -define png:compression-level=9 -define png:compression-strategy=1 -define png:exclude-chunk=all -interlace none -colorspace sRGB -strip INPUT_PATH

【讨论】：