Google的Page Speed无损图像压缩如何工作？-Java 学习之路

136

当您在网站上运行Google的Firebug / Firefox的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的“Save for Web”功能创建的PNG文件相当不错 .

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

9 回答

0
在我看来，那里有效处理大多数图像格式的最佳选择是trimage . 它有效地利用了基于图像格式的 optipng, pngcrush, advpng and jpegoptim ，并提供近乎完美的无损压缩 .

如果使用命令行，实现非常简单 .
```
sudo apt-get install trimage    
trimage -d images/*
```
瞧！ :-)
此外，您还可以找到一个非常简单的界面来手动完成 .
回复于 2024-04-29T03:24:53+08:00
2
To Replicate PageSpeed's JPG Compression Results in Windows:

我能够使用Windows版本的jpegtran获得与PageSpeed完全相同的压缩结果，您可以在www.jpegclub.org/jpegtran获得 . 我使用DOS提示符运行可执行文件（使用“开始”>“CMD”） . 为了获得与PageSpeed压缩完全相同的文件大小（直到字节），我指定了Huffman优化，如下所示：
```
jpegtran -optimize source_filename.jpg output_filename.jpg
```
有关压缩选项的更多帮助，请在命令提示符下键入：jpegtran

Or to Use the Auto-generated Images from the PageSpeed tab in Firebug:

我能够关注Pumbaa80 's advice to get access to PageSpeed'的优化文件 . 希望屏幕截图here为FireFox环境提供了进一步的清晰度 . （但我无法在Chrome中访问这些优化文件的本地版本 . ）

And to Clean up the Messy PageSpeed Filenames using Adobe Bridge & Regular Expressions:

虽然FireFox中的PageSpeed能够为我生成优化的图像文件，但它也改变了名称，如下所示：
```
nice_picture.jpg
```
成
```
nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg
```
我发现这似乎是一种常见的抱怨 . 由于我不想手动重命名所有图片，因此我使用了Adobe Bridge的重命名工具和正则表达式 . 您可以使用其他重命名命令/工具来接受正则表达式，但我怀疑大多数使用PageSpeed问题的Adobe Bridge都可以使用！
- 启动Adobe Bridge
- 选择所有文件（使用Control A）
- 选择工具>批量重命名（或控制Shift R）
- 在Preset字段中选择"String Substitution" . 新文件名字段现在应显示“字符串替换”，然后显示"Original Filename"
- 启用名为“使用正则表达式”的复选框
- 在“查找”字段中，输入正则表达式（将选择从最右侧的下划线分隔符开始的所有字符）：
(?!.*)(.*).jpg$
- 在“替换为”字段中，输入：
.jpg
- （可选）单击“预览”按钮以查看建议的批量重命名结果，然后单击“关闭”
- 单击“重命名”按钮
请注意，处理后，Bridge会取消选择未受影响的文件 . 如果要清除所有.png文件，则需要重新选择所有图像并修改上面的配置（对于“png”而不是“jpg”） . 您还可以将上面的配置保存为预设，例如“清理PageSpeed jpg图像”，以便将来可以快速清理文件名 .

Configuration Screenshot / Troubleshooting

如果你有麻烦，有可能是一些浏览器可能无法正确显示上面的RegEx表达式（怪我的转义字符）所以对于配置的屏幕截图（以及这些说明），请参阅：

How to Use Adobe Bridge's Batch Rename tool to Clean up Optimized PageSpeed Images that have Messy Filenames
回复于 2024-04-29T03:24:53+08:00
15

对于Windows，有几个拖放接口，方便访问 .

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

对于PNG文件，我发现这个是我的享受，显然有3个不同的工具包裹在这个GIU中 . 只需拖放即可 .

https://pnggauntlet.com/

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

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

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

回复于 2024-04-29T03:24:53+08:00
13
有一个非常方便的批处理脚本，使用OptiPNG（来自this blog）以递归方式优化文件夹下的图像：
```
FOR /F "tokens=*" %G IN ('dir /s /b *.png') DO optipng -nc -nb -o7 -full %G
```
一条线！
回复于 2024-04-29T03:24:53+08:00
29
我使用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 . 请注意，更高的优化级别意味着更长的处
回复于 2024-04-29T03:24:53+08:00
10

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

回复于 2024-04-29T03:24:53+08:00

如果您正在寻找批处理，请记住trimage抱怨如果您没有Xserver可用 . 在这种情况下，只需编写一个bash或php脚本来做类似的事情

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

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

回复于 2024-04-29T03:24:53+08:00

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

对于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)
};

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

（N.B . ： optipng 命令行工具也可以通过 -o 7 提供 -o 2 ）

对于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用于无损转换为最小格式 .

回复于 2024-04-29T03:24:53+08:00

45
这是交换编码器的CPU时间以提高压缩效率的问题 . 压缩是搜索较短的表示，如果你搜索更难，你会发现更短的表示 .

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

在为网络保存图像时，Photoshop并没有真正努力地做到这一点，所以任何工具都胜过它并不奇怪 .

看到
- ImageOptim（无损）和
- ImageAlpha（有损）用于较小的PNG文件（high-level description how it works）和
- JPEGmini / MozJPEG（有损）用于更好的JPEG压缩器 .
回复于 2024-04-29T03:24:53+08:00

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

9 回答

相关问题