Google 的 Page Speed 无损图像压缩是如何工作的？

Posted

技术标签:

【中文标题】Google 的 Page Speed 无损图像压缩是如何工作的？【英文标题】：How does Google's Page Speed lossless image compression work? 【发布时间】：2011-07-24 00:32:33 【问题描述】：

当您在网站上运行适用于 Firebug/Firefox 的 Google PageSpeed 插件时，它会建议可以无损压缩图像的情况，并提供下载此较小图像的链接。

例如：

无损压缩 http://farm3.static.flickr.com/2667/4096993475_80359a672b_s.jpg 可以节省 33.5KiB（减少 85%）。 无损压缩 http://farm2.static.flickr.com/1149/5137875594_28d0e287fb_s.jpg 可以节省 18.5KiB（减少 77%）。 无损压缩 http://cdn.uservoice.com/images/widgets/en/feedback_tab_white.png 可以节省 262B（减少 11%）。 无损压缩 http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/images/ui-bg_flat_75_ffffff_40x100.png 可以节省 91B（减少 51%）。 无损压缩 http://www.gravatar.com/avatar/0b1bccebcd4c3c38cb5be805df5e4d42?s=45&d=mm 可以节省 61B（减少 5%）。

这适用于 JPG 和 PNG 文件类型（我没有测试过 GIF 或其他文件类型。）

还要注意 Flickr 缩略图（所有这些图像都是 75x75 像素。）它们是相当大的节省。如果这真的很棒，为什么雅虎不将这个服务器端应用到他们的整个库中并减少他们的存储和带宽负载？

甚至 ***.com 也代表着一些非常小的节省：

无损压缩 http://sstatic.net/***/img/sprites.png?v=3 可以节省 1.7KiB（减少 10%）。 无损压缩 http://sstatic.net/***/img/tag-chrome.png 可以节省 11B（减少 1%）。

我看到 PageSpeed 建议我使用 Photoshop 的“保存为 Web”功能创建的 PNG 文件可以节省相当多的费用。

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

【问题讨论】：

看起来 Pagespeed 现在要求有损压缩。结果之前说：“无损压缩xxx.jpg可以节省xx kb（xx%减少）”。现在它说“压缩 xxx.jpg 可以节省 xx kb（减少 xx%）” 重要的是，Google 似乎要求仅对较小的图像（缩略图等）进行有损压缩。谁能弄清楚 Google 使用了哪些有损压缩工具和参数？ 【参考方案1】：

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

png_optimizer.cc jpeg_optimizer.cc webp_optimizer.cc

对于 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 2 到 -o 7，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)

还有image_converter.cc，用于无损转换为最小格式。

【讨论】：

特别是 JPEG 的 retain_color_profile(false) 可能是个坏主意。随着扩展色域显示器变得越来越普遍，明确定义的色彩再现指令变得模棱两可。如果原始图像是 sRGB 编码的，这仍然可以在某些浏览器（Safari、带有 about:config 修改的 Firefox）中工作，而在其他浏览器中，只有实际标记的图像可能是颜色管理的（默认 Firefox）。当然，没有任何颜色管理功能的浏览器不会在意…… 我一直在运行optipng file.png -o7，但我没有得到接近 Google 显示的任何地方。也许他们会尽可能转换为 SVG？ @Nateowami 我遇到了同样的问题……对于某些 PNG，Google 比 optipng -o7 做得更好。对于这些，您可以从 pagespeed 网站本身下载优化的图像。【参考方案2】：

我使用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。请注意，更高的优化级别意味着更长的处理时间。

【讨论】：

【参考方案3】：

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

【讨论】：

感谢您的链接。我想我真的很想了解更多关于图像文件中有哪些类型的冗余，如果文件大小是您的主要关注点，这些冗余可以被剥离。我知道网络上有信息，我只是想找一个好地方在 SO 上整理它。 我使用了一个自定义构建工具，它使用 optipng 和 pngcrush 压缩图像，然后选择较小的文件。尽管如此，Page Speed 仍然抱怨图像质量不佳。那么他们真正使用的是哪种工具呢？ @Pumbaa80 你也可以试试advsys.net/ken/util/pngout.htm（它特别说明它有时可以得到比 optipng 和 pngcrush 更小的尺寸）。 我刚刚发现 Page Speed 确实使用 optipng，custom wrapper 决定了最佳配置选项。 @Amber 不是一个选项，我没有使用 Windows ;)【参考方案4】：

这是一个用编码器的 CPU 时间换取压缩效率的问题。压缩是搜索更短的表示，如果你更努力地搜索，你会找到更短的。

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

在为网络保存图像时，Photoshop 并没有真正努力做到这一点，因此任何工具都能胜过它也就不足为奇了。

见

ImageOptim（无损）和 ImageAlpha（有损）用于较小的 PNG 文件 (high-level description how it works) 和 JPEGmini/MozJPEG（有损）以获得更好的 JPEG 压缩器。

【讨论】：

试图回答 O/P 实际提出的实际问题的唯一答案，而不是不同的问题“我怎样才能最大限度地压缩我的图像”？大声笑【参考方案5】：

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

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

jpegtran -optimize source_filename.jpg output_filename.jpg

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

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

我能够按照 Pumbaa80 的建议访问 PageSpeed 的优化文件。希望屏幕截图here 为 FireFox 环境提供了进一步的清晰度。 （但我无法在 Chrome 中访问这些优化文件的本地版本。）

并使用 Adob​​e Bridge 和正则表达式清理凌乱的 PageSpeed 文件名：

虽然 FireFox 中的 PageSpeed 能够为我生成优化的图像文件，但它也将它们的名称更改为简单的名称，例如：

nice_picture.jpg

进入

nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

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

    启动 Adob​​e Bridge 选择所有文件（使用 Control A） 选择工具 > 批量重命名（或 Control Shift R） 在预设字段中选择“字符串替换”。新文件名字段现在应该显示“字符串替换”，然后是“原始文件名” 启用名为“使用正则表达式”的复选框

    在“查找”字段中，输入正则表达式（它将选择从最右边的下划线分隔符开始的所有字符）：

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

    在“替换为”字段中，输入：

    .jpg

    （可选）单击预览按钮查看建议的批量重命名结果，然后关闭

    点击重命名按钮

请注意，处理后，Bridge 会取消选择未受影响的文件。如果要清理所有 .png 文件，则需要重新选择所有图像并修改上面的配置（使用“png”而不是“jpg”）。您还可以将上述配置保存为“清理 PageSpeed jpg 图像”等预设，以便日后快速清理文件名。

配置屏幕截图/故障排除

如果您遇到问题，可能是某些浏览器可能无法正确显示上面的 RegEx 表达式（怪我的转义字符），因此有关配置的屏幕截图（以及这些说明），请参阅：

How to Use Adobe Bridge's Batch Rename tool to Clean up Optimized PageSpeed Images that have Messy Filenames

【讨论】：

感谢分享！ 如果您使用 IIS，PageSpeed 最近被移植到 Windows 并自动执行这些相同的优化。 iispeed.com 为了最好的减少，虽然没有任何损失，我一直在使用 JPEGmini jpegmini.com 批量转换整个 JPEG 目录 好像没有适用于 Firebug 的 PageSpeed 扩展了。【参考方案6】：

在我看来，有效处理大多数图像格式的最佳选择是trimage。 它基于图像格式有效利用 optipng、pngcrush、ad***g 和 jpegoptim，并提供近乎完美的无损压缩。

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

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

瞧！ :-) 此外，您还会发现一个非常简单的界面可以手动完成。

【讨论】：

Windows 有什么替代品吗？【参考方案7】：

有一个非常方便的批处理脚本，可以使用 OptiPNG 递归优化文件夹下的图像（来自 this blog）：

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

一行！

【讨论】：

FOR /F "tokens=*" %G IN ('dir /s /b *.png') DO optipng -nc -nb -o7 -full "%G" 如果文件名中有空格【参考方案8】：

如果您正在寻找批处理，请记住如果您没有 Xserver 可用，则会出现 triage 抱怨。在这种情况下，只需编写一个 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  \;");
?>

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

【讨论】：

【参考方案9】：

对于 Windows，有几个拖放界面便于访问。

https://sourceforge.net/projects/nikkhokkho/files/FileOptimizer/

对于 PNG 文件，我发现这个是为了享受，显然 3 个不同的工具包含在这个 GIU 中。只需拖放，它就会为您完成。

https://pnggauntlet.com/

虽然这需要时间，但请尝试压缩一个 1MB 的 png 文件 - 我很惊讶在这个压缩比较中投入了多少 CPU，这一定是这里发生的事情。似乎图像被压缩了 100 种方式，最好的一种获胜：D

关于 JPG 压缩，我觉得去除颜色配置文件和所有额外信息是有风险的 - 但是 - 如果每个人都这样做 - 它是商业标准，所以我只是自己做了：D

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

【讨论】：

以上是关于Google 的 Page Speed 无损图像压缩是如何工作的？的主要内容，如果未能解决你的问题，请参考以下文章

如何解决 Google Page Speed：“未指定过期时间”

AddThis 和 Google Page Speed

使用Page Speed Online改善网站速度

HTML系列：编辑图像

设置 HTTP 缓存过期，由 Google PageSpeed 推荐

Laravel blade 模板压缩加速扩展 renatomarinho/Laravel-page-speed 介绍