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

Question

当您在网站上运行适用于 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 像素。）它们是相当大的节省。如果这真的很棒，为什么雅虎不将这个服务器端应用到他们的整个库中并减少他们的存储和带宽负载？

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

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

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

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

Answer 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，用于无损转换为最小格式。

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

Answer 3

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

Answer 4

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

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

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

见

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

Answer 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 问题的人来说很容易使用！

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

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

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

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

   .jpg

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

9. 点击重命名按钮

请注意，处理后，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

Answer 6

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

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

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

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

Answer 7

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

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

一行！

Answer 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 {} \;");
?>

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

Answer 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，所以绝对值得！