可以跟TinyPNG媲美的免费图片优化压缩工具
最近使用付费的腾讯云CDN,发现图片消耗了大量的流量,心痛钱,于是想优化压缩一下服务器上的图片。一个webp图片,其它大概是400K,使用图片优化网站https://tinypng.com/,竟然压缩到了60k,看不出图片质量有什么损失。这让我大感神奇,琢磨着将服务器上的所有图片都使用此方法优化压缩一下,可TinyPNG有限制,更多的使用要收费。我在网上搜索了一些免费的或开源的图片优化工具,发现了一篇讨论帖子,里面有不少有用的信息。于是整理了一些,贴在下面:
TinyPNG使用这个库:https://pngquant.org/
在Windows、Linux和Mac上可用。
Google PageSpeed Insights推荐了两种:OPTIPNG和PNGOUT。 你可以在同一张图片上使用它们(一个接一个),通常会得到更好的效果。
他们使用的是量化器。 可能
https://pngnq.sourceforge.net/ .
要比较自己:
wget https://tinypng.org/images/example-orig-c549c73a.png
wget https://tinypng.org/images/example-shrunk-ec364794.png
pngnq example-orig-c549c73a.png
cmp -b example-orig-c549c73a-nq8.png example-shrunk-ec364794.png
我在 pngnq 生成的内容和他们的示例缩小版本之间有一个字节的差异。
顺便说一句,在丢失某些信息的情况下,我一直在使用 pngnq。 这是一个很棒的工具。
我并不是说这是对这个特定网站的开发人员的挖掘,因为我的烦恼更多的是累积的事情,而不是一般的这个网站,但 IMO 这是另一个做一件简单事情的网站,它应该是一个库(或至少是一个记录在案的 Web API)而不是一个网站。
2012年的网站,我很失望。
什么?将使用它来转换 PNG 的设计人员对如何访问 API 一无所知。作为一名程序员,我也不想编写代码来做到这一点。我认为为此创建一个网站
真是太棒了。
如果他们也创建一个 API 和一个库,那就太酷了(但是对于什么语言?这么多兼容性问题……),但说这应该“不是一个网站”完全是倒退的。网站是最人性化和最易于访问的平台,成为第一步非常有意义。
我必须同意这里的 OP。 把它做成一个网页是愚蠢的。
如果它是一个库,那么创建PNG的程序首先可以将其保存为这种压缩形式。
选择语言也不是问题。 显而易见的选择是 C,因为这是用常规 libpng 编写的。 现存的每种语言都提供了一种与 C 语言交互的方法。
“什么?将使用它来转换 PNG 的设计师将根本不知道如何访问 API。
对于设计师来说,它应该是一个Photoshop插件(建立在理论库之上),或者只是一个可以批量转换整个目录的桌面应用程序。
虽然一次处理 20 张图像肯定比一次处理一张图像要好,但像这样的拖放式网站 UI 在设计方面绝对是工作流程杀手。
当然,Photoshop 插件会很棒。还有一个桌面应用程序。还有一个GIMP插件。还有一个Finder扩展。还有很多其他的东西。
我的观点是,网站界面是最容易访问的一种方式,这样 100% 的人都可以使用它,无论平台或编程专业知识如何。
这是显而易见的第一选择。也就是说,我当然希望所有其他选择都能尽快出现……
问题在于,网站是为
人类提供界面的最容易访问的方式。但是没有其他人可以用这项技术做任何事情,而且你只能使用创作者想到的一个工作流程。
如果这是一个库或像 pngcrush 这样的命令行应用程序,那么 Web 服务可以在几天内轻松生成。或桌面应用。或编辑器插件。但在当前格式中,它是不可扩展的。
(免责声明:这并不总是正确的,但在这种情况下是正确的)
GIMP已经有一个减少颜色深度的接口,但它不支持透明度。(也许 2.8 确实如此,还没有尝试过。
所以这不应该是 gimp 的插件,而应该是一个错误修复。
如果 gimp 可以打开具有索引透明度的图像,那就太好了。
你是对的,适当的透明度支持是第一步——但这并不是说 GIMP 不能在该技术
之上 拥有某种自动有损压缩工具(类似于这个)。
编辑:我想这个软件相当于gimp在将图像转换为索引时的“自动选择调色板”选项。也许该选项可以替换为可供选择的算法列表,例如“大小”对话框允许您选择自己的缩放算法。
是的,没错。这个工具只是因为“自动选择调色板”不支持透明度。如果是这样,就没有必要这样做了。
我不确定你是否真的需要多种算法,据我所知,算法本身并没有什么特别之处——它只是支持透明度。
通过选择所有透明和部分透明部分并保存选择,可以获得一些类似的结果。然后拼合图像(即将透明度混合到背景色中),减小颜色深度,然后仅在选区(而不是整个图像)上使用颜色到 alpha 选项来减去颜色并恢复透明度。
然后数一数你有多少种颜色,如果颜色太多,撤消所有操作,选择一个较低的颜色深度数字,然后重试。它有助于选择图像中不存在的颜色作为背景混合颜色。
> 网站是最人性化和最易于访问的平台
一个网站需要一个浏览器、一个人和一堆点击。 每次你想这样做。
API/库需要编写脚本并将其添加到生产管道中。一次。然后在没有人为干预的情况下运行。
最人性化的界面是将人类从无聊、乏味、可自动化的任务中拯救出来的界面。
我相信这个网站使用 pngquant 来执行优化。您可以从
https://pngquant.org 获得该工具(它是开源的,也很容易用作库)。
你是对的,它也被列在 pngquant 的网站上作为 GUI 之一。
我猜他们会随着时间的推移采取免费增值的方式——提供 API 等作为人们可以付费的付费模式。
感谢大家的反馈!我们仍在努力使 TinyPNG 更易于使用并消除一些问题。请继续发表评论!
我们创建这项服务是因为我们(我们的网络代理)正在构建几个使用非常大的透明图像的网站。不幸的是,文件大小也很大,所以我们开始寻找传统的无损优化工具之外的压缩机制,这些工具根本无法充分减少我们的文件。我们围绕几个现有的开源量化和压缩工具构建了 TinyPNG。
最初它是一个内部工具,但我们对结果始终如一的高质量感到非常惊讶。因此,我们决定将其作为在线服务共享,以便每个人都可以尽可能轻松地减小文件大小。API 即将推出!
使用有损压缩总是一个好主意吗?不,当然不是。有一些边缘情况表现不佳。但我们认为结果令人印象深刻。用你自己的判断!:-)
我们实际上在非常流行的网站(Facebook、Google、Github、Duckduckgo 等)上寻找 PNG 文件,几乎所有文件都可以从 TinyPNG 的文件大小减小中受益,而不会造成明显的质量损失。
哪些 现有的开源工具?
主要是 pngquant(新版本)、optipng 和 advpng。我们仍在根据我们的基准测试和测试套件调整参数并换入和换出工具。
哇,它把我的 png 从 659 字节增加到 681 字节,让我下载 681 字节的。:(
所以我从维基百科中获取了一个 PNG:
221.0kb(实际上是 215 KB 或略高于 220,000 字节)到声称的 47.8 KB(实际上是 46.7 KB)。好!
运行 PNGGauntlet,一个无损压缩应用程序,相同的文件没有压缩任何内容。聪明的维基人一定已经这样做了。
但是 tinypng 的结果看起来
很糟糕。在这里,您可以在原始和压缩之间切换:
https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_trans……
我不会说它们看起来很糟糕,图像的背景部分有所不同,但主要焦点几乎没有变化。
这是一个权衡,但我想,如果有数千个文件,它可以大大节省带宽,并且您可以始终保留原始文件以供下载,但不能显示 puroses。
在黄色骰子和绿色骰子的高光中都有非常清晰的海报化。
这并不奇怪——高色深图像需要超过 256 种颜色才能保真地表示其图像。
这是 pngnq 的结果,它的作用与此工具完全相同。它创建了一个 46K 的文件大小,(然后我能够使用 pngout 后跟 advpng 将其减少到 41K)。
https://pngnq.sourceforge.net/
256 种颜色对于此图像可能根本不够。
(顺便说一句,我能够使用 pngout 将您的图像稍微缩小到 46K。
Riot[1] (windows) 与 pnggauntlet 一样好或更好,可以让你预览内容。支持我认为相同的后端(pngout、optipng、advpng 等)和一些额外的抖动选项……也许值得一看,我从 pnggauntlet 切换过来。:)
散焦的绿色芯片上有轻微的伪影。 在典型的维基百科文章显示尺寸(在本例中为400×300)下,这是可以接受的。在 Win Firefox 13.01、Windows gamma 中查看。 我会在大文件上使用 tinypng,然后再缩小以供 Web 使用。
在缩小规模后使用,而不是之前使用。
如果你有一个好的缩小工具,当你缩小时,它会创建更多的中间颜色,你实际上会得到一个更大的图像!
好点子。
> Internet Explorer 6 通常会忽略 PNG 透明度并显示纯色背景色。
> 使用 TinyPNG 时,背景再次变得透明。没有解决方法!
嗯,有谁知道这是怎么回事?IE6 是否原生支持某种 png 透明度?
编辑:啊,像那样:
https://calendar.perfplanet.com/2010/png-that-works/#8bit+alp……
哇!现在是 2012 年,
直到现在 我才发现存在 PNG 文件,其中透明度在 IE6 中起作用???
管他呢?
我的意思是,这实际上
对我非常有用…… 就像五年前一样。
PNG8(IE6 支持)长期以来一直支持 alpha 透明度,但只有 Fireworks 能够创建这些文件。我猜这些家伙在制造 PNG8?我自己还没有测试过这个网站。
Fireworks 并不是唯一可以创建这些文件的程序。我什至从未听说过烟花,我一直在创建具有透明度的索引 png。
Fireworks 是一个 Macromedia(现在是 Adobe)图像编辑器,专注于图形创建和 Web。
谁还在关心IE6是做什么的?!
任何为医疗保健、政府等发展的人。
哎呀,我坐在 XP 上,
专门 为 IE6 开发,仅此而已。
我希望你的费率至少翻了一番。
尽管 IE6 有它的问题,但它实际上只是针对一个浏览器
的一个 版本进行简单的开发。一旦你习惯了这些怪癖,它们就是常数。
(注:我不是说我喜欢它,只是它已经变得“正常”了)
我希望你讨厌你的工作有点:)
我想他只是好奇IE6是如何被骗来支持它的。
我觉得支持的浏览器图标应该是彩色的。对我来说,背面和白色代表“不支持”。
我也是,这很令人困惑。它甚至不会在悬停时饱和。
我很想知道他们是否计划发布此源代码。在构建步骤中使用它会更有用,而不是拖放到浏览器窗口中。
我认为
https://pngquant.org/ 做同样的技术。
另请参阅
https://pngnq.sourceforge.net/index.html
OS X 工具中还集成了其他几个图像优化工具
https://imageoptim.com/
你不明白。
它必须是具有免费增值模式的初创公司。很快,他们将在Flash甚至桌面客户端中提供专业的批量上传器的月度订阅选项。拭目以待。
那会有什么问题?
这是一个白日梦,但除此之外没关系。
同上。我希望看到一些与 PNGOUT、PNGCrush、OptiPNG 和 AdvPNG 的并排比较。我在 Mac 上使用 ImageOptim 来自动优化我的 PNG – 它可以获得一些令人印象深刻的收益。
在 Mac 上,我使用 ImageAlpha 将颜色减少到 256(它有一个预览窗口,因此您可以查看它是否正常),然后在保存文件时,我选择将其发送到 ImageOptim 的选项。
在 Linux 上,你可以通过使用 pngquant 然后使用 trimage 来获得相同的结果。AFAIK 没有 pngquant 的 GUI 前端,所以我猜有多少种颜色是可以的,并在运行 trimage 之前进行检查。
我使用 2 个工具的原因是 ImageAlpha/pngquant 是有损的,而 ImageOptim/trimage 是无损的。
您提到的工具使用无损压缩。对于 24 位 PNG 文件,这意味着它们可能不会接近 TinyPNG 使用的那种有损压缩。
比较将是主观的。一个将保留完整的细节(24 位颜色),另一个不会。正如我所说,“更好”将是主观的。
我希望 Photoshop 提供保存带有完整 alpha 通道的 8 位 PNG 的选项——这似乎就是这样做的。
我认为 ImageOptim 使用 pngcrush 库。
这个网站看起来很整洁,但似乎可以成为我的自动化工作流程一部分的 CLI 通常更有用。
你不能用ImageMagick获得同样的结果吗? 例如,“mogrify -format png8 *.png”将当前目录中的所有 png 图像转换为索引版本。
此外,ImageMagick 本身推荐了各种更高级的无损和有损 png 压缩实用程序:
https://www.imagemagick.org/Usage/formats/#png_non-im
然后我用 GIMP 打开原始的熊猫 PNG,点击图像 -> 模式 -> 索引 -> 优化淡化 -> 255 种颜色,得到的文件大小更小。
这有什么特别之处?
您可以使用 ImageMagick、Fireworks、pngnq 和 pngquant 生成相同的图像格式(最后一个似乎为网站提供动力)。
区别在于量化的质量。算法越差,得到的条带伪影或抖动噪声就越多。
通常,不太理想的量化也会产生较差的质量/文件大小比率(因为调色板条目“花费”在图像不太明显的区域)。
您可以使用 ImageMagick、Fireworks、pngnq 和 pngquant 生成相同的图像格式(最后一个似乎正在为网站提供动力)
确切地说:我看不出tinyPNG有什么
特别 之处。
看起来它只是让外行人可以访问该过程。
大多数外行人甚至不知道PNG是什么……
nQuant 是一个类似的(C#、Apache 2.0 许可)再压缩器;它是由 Matt Wrock 创建的,作为对 Xiaolin Wu 算法的调整,以使用 alpha 通道。
Matt 在这里深入了解了这个过程是如何运作的:
https://www.mattwrock.com/post/2011/09/05/Convert-32-bit-PNGs……
我通常只是在 Photoshop 中应用海报化调整图层,并且仍然保存为 24 位。通常情况下,我可以获得相当好的压缩,并且我有能力遮盖海报的不同区域,以交互方式实现不同级别的压缩。不过,制作这个网站的荣誉似乎是快速压缩图像的好方法,而不必考虑太多。
如果您使用的是 Mac,ImageAlpha 提供了一个很好的 GUI,可让您预览不同的质量设置:
此外,ImageOptim 还提供了一个执行无损 PNG 压缩的 GUI:
它与PNGNQ相比如何?
https://pngnq.sourceforge.net
https://pngnq.sourceforge.net/pngnqsamples.html
对我来说效果非常好,将 238k png 降低到 106k。我没有看到任何伪影。
那只压缩的熊猫身上的阴影有明显的伪影。
是的,这几乎看起来像一个预乘问题,但 PNG 应该是非预乘的,所以……
此外,原版在RGB通道中具有没有alpha的像素的值,这些像素不可见(由于alpha),但需要压缩,因此这不是一个公平的测试(尽管两者都在某种程度上确实如此 – 熊周围的绿松石区域),因此新的可以进一步压缩。
pngquant 支持此服务,适用于预乘的 RGBA 色彩空间(但每把枪具有 32 位浮点数)。
然而,失真只是将图像减少到 256 色(从 15k 色)的副作用。
为什么它是一种服务,而不是作为软件库?
设计师。
到目前为止,我只尝试了一张图片,但我尝试的那张显示出令人印象深刻的结果。我一直使用
https://punypng.com,它一直做得很好,但我刚刚在 PunyPNG 中运行了一个压缩到 131kb 的文件,而 TinyPNG 将其压缩到 42kb!
对于那些寻找具有更多选项的桌面应用程序(至少适用于 Mac)的人,请查看 Image Alpha:
https://pngmini.com/
(来自同样令人敬畏的 ImageOptim 的创建者:
https://imageoptim.com/)
好的申请网站。对于那些要求桌面版本 – AlphaImage –
https://pngmini.com/ 的人。
AlphaImage 甚至会为您提供与 IE6 兼容的“可选”透明 PNG。
PNG很好地压缩了“精确”的渐变。我对一种工具感兴趣,它不仅可以减少颜色(这个工具正在做什么),还可以平滑图像的渐变状片段以更好地组合。
是的,我很好奇通过将所有内容保持为 24 位,但稍微调整颜色值以使结果更易于压缩来提高压缩率。 (PNG 将五个预测变量中的一个应用于每条线,从预测中取差值,然后对结果进行缩减。
例如,作为一种贪婪的算法:找到一条线的最佳预测变量,然后调整该线以减少字母表(将与预测值的差异四舍五入)或获得更长的通货紧缩匹配(如果它们接近并且与之前的运行匹配,则替换值)。
PNG 不再是唯一广泛支持的 Alpha 通道格式。 您可以使用 WebP(具有 javascript 或 flash polyfill。 对于那些禁用了 javascript 的用户,您可以回退到普通 PNG。
那个标志来自(或模仿)什么?ESET具有非常相似的徽标,但我认为有一个具有这些颜色的徽标。
图像优化没有单一的终极解决方案。 这看起来对某些图像很有效。
如果能在 rails 资产管道中加入它,那就太好了。你打算开源你的压缩代码吗?
我们计划发布一个 API。压缩代码是几个开源工具的组合,具有一些仔细的调整和启发式方法,以获得最佳结果。
它建立在现有的开源工具之上。寻找 OptiPNG、PNGcrush 等。有很多,这只是一个漂亮的 Web 前端。
你知道你已经与IE合作了太久了,当这个产品给你带来微笑时。
没有更多的GIF适合我了!
8 位 png…你不能在Photoshop中做到这一点吗?这个网站的意义何在?
嗯,不是为 8 位 png 收取数百美元吗?
不可以,Photoshop 不支持 8 位 png。
$ pngquant -iebug 图像.png
它实际上增加了某些文件的大小。
10,842 字节 -> 15,863 字节(增长 46%)。
这很愚蠢,在这种情况下,最好返回原始文件。