Imagemagick 通过编程调整图像大小，以获得与浏览器相同的结果

在我的web应用程序中，我需要调整图片大小，以避免在仅显示头像或预览时加载真正大的文件

我使用imagemagick调整大小，但结果总是模糊的。我尝试了很多命令选项（缩放/调整大小/缩略图、添加过滤器、更改颜色空间、更改质量/密度/清晰度等），但从来没有得到好的结果

但当我尝试在浏览器中显示大文件并让浏览器调整大小时，图片显示正确，没有任何模糊

下面是我做的一个小测试：

我下载了这张图片，将其重命名为

st_michel.jpg

，并使用

convert st_michel.jpg-resize 200x resize_st_michel.jpg

之后，我创建了一个html文件来显示：

结果如下：

正如我们所见，正确的版本（由imagemagick调整大小的版本）比浏览器调整大小的版本更模糊（我的web应用程序用户上传的任何图片都有相同的结果）

---

所以我的问题是：我可以拥有一张与使用imagemagick浏览器调整大小的图片质量相同的图片吗？

保存为png更好一些，我想知道这是否是由于jpg压缩。浏览器只是调整图像的大小，但Imagemagick正在调整图像的大小并进行保存，所以引入了一些压缩

我还添加了一些锐化：

magick "E:\Pictures\8118-Mont-Saint-Michel-couleur-dautomne-©-DaLiu-Shutterstock.com-©-DaLiu-Shutterstock.com_.jpg" -resize 200x -unsharp 1.5x1+0.7+0.02  "E:\Pictures\resize_st_michel.png"

---

在我的网站上，我总是使用png大小的图像。

缩小尺寸总是会使东西模糊一些，所以你可以通过锐化恢复一些，但文本不太喜欢它

中间解决方案是缩小到400px，这已经产生了一个小得多的文件，并将最终的缩放留给浏览器：

（从左到右：全尺寸（280K）、400px（32K）、200px+锐化（16K））

这也会让你有更大的东西可以在高清显示器上显示，其中200px可能有点小

编辑：为了进一步挖掘这个问题，我再次尝试抓取你的图片，但你的网站似乎已经关闭，所以我尝试了我的图片，令人惊讶的是，模糊没有发生，我甚至会说，预缩小的图片比Firefox从全尺寸图片生成的图片要好（请参见机翼边缘和机翼/机身连接处的瑕疵）：

在所有行中，左边是调整为200px的原始图像（1200x800），右边是通过以下方式获得的图像：

convert $image.jpg -filter $f -resize 200x -quality 80 $image-200-$f-Q80.jpg

没有过滤器（

Plain

）通常与

Lanczos

相同。预计会出现二次和三次模糊

顺便说一句，不要缩小太多的另一个原因是，如果有人放大页面，图像将从较大的大小重新缩放（因此仍然缩小），而如果您以100%显示的精确大小传输图像，放大将使其放大并变得模糊

Edit2:最终检索到图像。我没有看到在应用中等锐化的情况下，200像素时IM比例和FF比例之间有多大差异（

-gripe 0x1.0

）：

但是，如果你仔细观察（在这里放大屏幕截图，因此FF不会重新缩放东西），Firefox的重新缩放会产生一些奇怪的工件：

Edit3：我冒昧地访问了你的网站，缩略图的模糊可能与IM无关。看起来你的缩略图的大小调整到了稍大一点的大小：

• 左上角是缩略图的屏幕截图，如页面所示，它似乎比预期的要大（224x153）
• 右上角和下角是Firefox中显示的实际图像，其原始大小为220x150

---

这种有害的分钟重缩放总是会产生很多模糊。

使用-sample代替-resize。这样更好吗？如果是这样，浏览器会在缩小时跳过像素进行大幅度缩小。另存为PNG以避免压缩问题，正如@bonzo在下面所说。

-sample

将删除所有行和列（如果我理解正确的话）对于将大图片调整为小图片来说，这并不好。至于png，我也有同样的问题：DTY-缩放，但我怀疑这会更模糊。在

-调整大小
之后，尝试添加
-取消锐化0x1
一些无法计算的内容。上面的屏幕截图的宽度大于HTML中指定的200px。因此，它们已经被删除放大。执行此操作时，FF必须放大缩略图（因为它比显示的尺寸小），这会使其模糊很多，而它仍然会缩小全比例图像（仅使其模糊一点）。因此，您无法通过在导航器中放大来真正比较图片。感谢您的反馈。遗憾的是，我在png上也有同样的问题。我最大的困难是当我的图像包含文本（例如屏幕截图）时：使用IM resize（或者您所说的压缩）时，文本变得不可读。我尝试了
-quality 100
以避免压缩，但没有取得很大成功。这也取决于显示器。现在大多数显示器都是非常高清晰度的，因此一个小区域可能包含的像素比你想象的要多。非常感谢你花了这么多时间在这方面！澄清一下，图像不是来自我的网站。我最终选择了
convert img.png-resize 300x-quality 80-filter Sinc-锐化0x1.0
，按照您的建议，将大小调整得比预期的大一点。但浏览器比我尝试的任何IM命令都做得更好，这仍然让人感到奇怪。比如@NguyễnTrườngChung说，也许这与显示器的定义有关，浏览器知道这一点，但IM不知道。