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

当您在网站上运行适用于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/zh-CN/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像素。）它们可以节省很多。如果确实如此，那么Yahoo为什么不将服务器端应用于整个库并减少其存储和带宽负载呢？

甚至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？我应该对此有所怀疑吗？

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

• 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)
};

当应用所有四个组合时，将保留最小的结果。就那么简单。

（注意：optipng如果您-o 2通过提供，命令行工具也会这样做-o 7）

对于JPEG文件，它们将jpeglib与以下选项一起使用：

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

同样，使用以下选项，使用libwebp压缩WEBP：

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

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

我jpegoptim用来优化JPG文件和optipng优化PNG文件。

如果启用bash，那么（递归地）无损优化目录中所有JPG的命令是：

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

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

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

查看http://code.google.com/speed/page-speed/docs/payload.html#CompressImages，其中介绍了一些技术/工具。

权衡编码器的CPU时间以提高压缩效率。压缩是对较短表示形式的搜索，如果搜索难度较大，则会找到较短的表示形式。

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

当为网络保存图像时，Photoshop并没有真正尝试做到这一点，因此，任何工具都胜过它并不奇怪。

看到

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

在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中访问这些优化文件的本地版本。）

并使用Adobe Bridge和正则表达式清理混乱的PageSpeed文件名：

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

nice_picture.jpg

进入

nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

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

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

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

   _（？！。* _）（。*）\。jpg $

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

   .jpg

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

9. 单击重命名按钮

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

配置屏幕截图/故障排除

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

如何使用Adobe Bridge的“批量重命名”工具清理具有混乱文件名的优化PageSpeed图像

在我看来，最好的选择是有效地处理大部分图像格式的修整方法。它基于图像格式有效地利用了optipng，pngcrush，advpng和jpegoptim，并提供了近乎完美的无损压缩。

如果使用命令行，则实现非常容易。

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

和瞧！:-)
另外，您还将找到一个非常简单的界面来手动进行操作。

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

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

一条线！

如果您正在寻找批处理，请记住，如果您没有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 {} \;");
?>

更改选项以适应您的需求。

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

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

对于PNG文件，我发现我很喜欢它，显然，此GIU中包含3种不同的工具。只需拖放即可为您完成。

https://pnggauntlet.com/

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

关于JPG压缩，我觉得要冒去除彩色配置文件和所有其他信息的风险-但是-如果每个人都在做-这是业务标准，所以我自己动手做：D

今天，在WP安装中，我在5500个文件上节省了113MB，因此绝对值得！