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.5千字节 (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 文件，它们使用 < a href="http://code.google.com/p/jpeglib/source/browse/" rel="noreferrer">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< /code> 有损压缩 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 中优化的霍夫曼表等。Photoshop

在为 Web 保存图像时并没有真正努力做到这一点，因此任何工具都可以击败它，这并不奇怪。

请参阅

• ImageOptim（无损）和
• ImageAlpha（有损），适用于较小的 PNG 文件（高级描述其工作原理）以及
• JPEGmini/MozJPEG< /a>（有损）以获得更好的 JPEG 压缩器。

Answer 5

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

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

jpegtran -optimize source_filename.jpg output_filename.jpg

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

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

我能够按照 Pumbaa80 的建议来访问 PageSpeed 的优化文件。希望此处的屏幕截图能够进一步阐明 FireFox 环境。 （但我无法在 Chrome 中访问这些优化文件的本地版本。）

并使用 Adob​​e Bridge 和 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”）。您还可以将上述配置保存为预设，例如“Clean PageSpeed jpg Images”，以便您将来可以快速清理文件名。

配置屏幕截图/故障排除

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

如何使用 Adob​​e Bridge 的批量重命名工具清理有杂乱的优化 PageSpeed 图像文件名

Answer 6

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

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

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

瞧！ :-)
此外，您还会发现一个非常简单的界面来手动执行此操作。

Answer 7

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

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

一行！

Answer 8

如果您正在寻找批处理，请记住如果您没有 Xserver 可用，则会出现修剪抱怨。在这种情况下，只需编写 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我发现这个是为了我的乐趣，显然这个 GIU 中包含了 3 个不同的工具。只需拖放即可为您完成。

https://pnggauntlet.com/

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

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

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