谷歌的网页速度无损图像压缩是如何工作的？

当你在一个网站上运行 Google 的 Firebug/Firefox 的 PageSpeed 插件时，它会推荐一些可以无损压缩图片的情况，并提供一个链接来下载这个小图片。

例如:

这适用于 JPG 和 PNG 文件类型(我还没有测试过 GIF 或其他文件类型)

还要注意 Flickr 的缩略图(所有这些图像都是75x75像素)这可是一大笔存款。如果这真的如此伟大，为什么雅虎不将这个服务器端应用到他们的整个库中，减少他们的存储和带宽负载？

即使是 stackoverflow.com 也意味着一些微不足道的节省:

我已经看到 PageSpeed 建议相当不错的节省 PNG 文件，我创建使用 Photoshop 的’保存为网络’功能。

所以我的问题是，他们对图像做了什么改变来减少这么多？我猜对于不同的文件类型有不同的答案。这对于 JPG 来说真的是无损的吗？他们怎么能打败 Photoshop 呢？我应该对此有点怀疑吗？

83748 次浏览
小开

看一下 http://code.google.com/speed/page-speed/docs/payload.html#CompressImages，它描述了一些技术/工具。

小开

这是一个交易编码器的 CPU 时间压缩效率的问题。压缩就是搜索更短的表示，如果你搜索得更仔细，你就会找到更短的表示。

还有一个问题就是要充分利用图像格式的能力，例如用 PNG8 + a 代替 PNG24 + a，用 JPEG 优化 Huffman 表等等。

Photoshop 在为网络保存图片时并没有真正努力这么做，所以任何工具都能打败它也就不足为奇了。

你看

小开
最佳答案

如果您真的对技术细节感兴趣，请查看源代码:

对于 PNG 文件，他们使用 OptiPNG 和一些试错方法

// we use these four combinations because different images seem to benefit from
// different parameters and this combination of 4 seems to work best for a large
// set of PNGs from the web.
const PngCompressParams kPngCompressionParams[] = {
PngCompressParams(PNG_ALL_FILTERS, Z_DEFAULT_STRATEGY),
PngCompressParams(PNG_ALL_FILTERS, Z_FILTERED),
PngCompressParams(PNG_FILTER_NONE, Z_DEFAULT_STRATEGY),
PngCompressParams(PNG_FILTER_NONE, Z_FILTERED)
};

当所有四个组合都应用时，最小的结果保持不变。就这么简单。

(注意: 如果通过 -o 7提供 -o 2，optipng命令行工具也可以做到这一点)

对于 JPEG 文件，它们使用带有以下选项的 Jpeglib:

 JpegCompressionOptions()
: progressive(false), retain_color_profile(false),
retain_exif_data(false), lossy(false) {}

类似地，WEBP 通过以下选项使用 Libwebp进行压缩:

  WebpConfiguration()
: lossless(true), quality(100), method(3), target_size(0),
alpha_compression(0), alpha_filtering(1), alpha_quality(100) {}

还有 图像转换器，它是用来无损转换为最小的格式。

小开

在 Windows 中复制 PageSpeed 的 JPG 压缩结果:

我能够得到完全相同的压缩结果作为 PageSpeed 使用的 Windows 版本的 jpegtran，你可以在 Www.jpegclub.org/jpegtran。我使用 DOS 提示符运行可执行文件(使用 Start > CMD)。为了得到与 PageSpeed 压缩完全相同的文件大小(精确到字节) ，我指定了 Huffman 优化如下:

jpegtran -optimize source_filename.jpg output_filename.jpg

有关压缩选项的更多帮助，请在命令提示符下键入: jpegtran

或者使用 Firebug 中 PageSpeed 选项卡中的自动生成图像:

我能够按照 Pumbaa80的建议访问 PageSpeed 的优化文件。希望这个屏幕快照 给你能够为 FireFox 环境提供进一步的清晰性。(但我无法在 Chrome 中访问这些优化过的文件的本地版本。)

使用 Adobe Bridge 和正则表达式清理凌乱的页面速度文件名:

尽管 FireFox 中的 PageSpeed 能够为我生成优化的图像文件，但它也改变了它们的名称，变成了如下简单的名称:

nice_picture.jpg

进入

nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

我发现这似乎是一种常见的抱怨。因为我不想手工重命名所有的图片，所以我使用了 Adobe Bridge 的 Rename 工具和正则表达式。您可以使用其他接受正则表达式的重命名命令/工具，但是我怀疑 Adobe Bridge 对于我们大多数处理 PageSpeed 问题的人来说是可用的！

  1. 启动 Adobe Bridge
  2. 选择所有文件(使用 Control A)
  3. 选择 Tools > Batch Rename (或 Control Shift R)
  4. 在 Preset 字段中选择“ String 替换”。新文件名字段现在应该显示“ String 替换”，后跟“原始文件名”
  5. 启用名为“使用正则表达式”的复选框

  6. 在“ Find”字段中，输入正则表达式(它将选择从最右边下划线分隔符开始的所有字符) :

    _ (? ! . * _)(. *) . jpg $

  7. 在“ Replace with”字段中，输入:

    . jpg

  8. 或者，单击 Preview 按钮以查看建议的批处理重命名结果，然后关闭

  9. 单击“重命名”按钮

注意，处理后，Bridge 取消选择不受影响的文件。如果你想清理你所有的。Png 文件，您需要重新选择所有图像并修改上面的配置(对于“ png”而不是“ jpg”)。您还可以将上面的配置保存为“ Clean PageSpeed jpg Images”等预设置，以便将来可以快速清除文件名。

配置屏幕截图/故障排除

如果遇到问题，可能有些浏览器没有正确地显示上面的 RegEx 表达式(要怪就怪我的转义字符) ，所以有关配置的截图(以及这些说明) ，请参阅:

如何使用 AdobeBridge 的批处理重命名工具来清理优化过的页面速度图像中混乱的文件名

小开

我使用 jpegoptim优化 JPG 文件，使用 optipng优化 PNG 文件。

如果使用的是 bash，那么无损优化目录中所有 JPG (递归)的命令是:

find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim --strip-all {} \;

你可以将 -m[%]添加到 jpegoptim以有损压缩 JPG 图像，例如:

 find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim -m70 --strip-all {} \;

优化目录中的所有 PNG:

find /path/to/pngs/ -type f -name "*.png" -exec optipng -o2 {} \;

-o2是默认的优化级别，您可以将其从 o2更改为 o7。注意，更高的优化级别意味着更长的处理时间。

小开

在我看来，能够有效处理大多数图像格式的最佳选择是 三轮车。 它有效地利用了基于图像格式的 < em > optipng、 pngrush、 Advpng 及 jpegoptim ，并提供了近乎完美的无损数据压缩。

如果使用命令行，实现非常简单。

sudo apt-get install trimage
trimage -d images/*

瞧
此外，您还可以找到一个非常简单的手动界面。

小开

如果您正在寻找批处理，请记住，如果您没有使用 Xserver，trimage 会抱怨。在这种情况下，只需编写一个 bash 或 php 脚本来执行以下操作

<?php
echo "Processing jpegs<br />";
exec("find /home/example/public_html/images/ -type f -name '*.jpg' -exec jpegoptim --strip-all {} \;");
echo "Processing pngs<br />";
exec("find /home/example/public_html/images/ -type f -name '*.png' -exec optipng -o7 {} \;");
?>

更改选项以满足您的需求。

小开

有一个非常方便的批处理脚本，可以使用 OptiPNG (来自 这个博客)递归优化文件夹下的图像:

FOR /F "tokens=*" %G IN ('dir /s /b *.png') DO optipng -nc -nb -o7 -full %G

一句台词！

小开

对于窗口，有几个拖放界面，方便访问。

Https://sourceforge.net/projects/nikkhokkho/files/fileoptimizer/

对于 PNG 文件，我发现这一个为我的乐趣，显然3个不同的工具包装在这个 GIU。只要拖放，它就会为你做到。

Https://pnggauntlet.com/

尽管这需要时间，尝试压缩一个1MB 的 png 文件-我很惊讶有多少 CPU 进入了这个压缩比较，这是什么在这里发生。似乎图像被压缩了100种方式，最好的赢得: D

关于 JPG 压缩，我觉得它的风险剥离彩色配置文件和所有额外的信息-然而，如果每个人都这样做-它的业务标准，所以我只是做了自己: D

今天我在 WP 安装中保存了5500个文件中的113 MB，所以绝对值得！


提交答案