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

Question

当您在网站上运行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？我应该对此有点怀疑吗？

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

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

(注意: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,用于无损转换为最小格式.

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格式的优化霍夫曼表等.

在为网络保存图像时,Photoshop并没有真正努力做到这一点,因此任何工具都能击败它并不奇怪.

看到

• ImageOptim(无损)和
• ImageAlpha(有损)用于较小的PNG文件(高级描述它是如何工作的)和
• JPEGmini/MozJPEG(有损)用于更好的JPEG压缩器.

Answer 5

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

我能够使用Windows版本的jpegtran获得与PageSpeed完全相同的压缩结果,您可以访问www.jpegclub.org/jpegtran.我使用DOS提示符运行可执行文件(使用"开始">"CMD").为了获得与PageSpeed压缩完全相同的文件大小(直到字节),我按如下方式指定了霍夫曼优化:

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的重命名工具和正则表达式.您可以使用其他重命名命令/工具来接受正则表达式,但我怀疑大多数使用PageSpeed问题的人都可以使用Adobe Bridge!

1. 启动Adobe Bridge
2. 选择所有文件(使用Control A)
3. 选择工具>批量重命名(或控制Shift R)
4. 在Preset字段中,选择"String Substitution".新文件名字段现在应显示"字符串替换",后跟"原始文件名"
5. 启用名为"使用正则表达式"的复选框

6. 在"查找"字段中,输入正则表达式(将选择从最右侧的下划线分隔符开始的所有字符):

   _(？!.*_)(.*)\.JPG $

7. 在"替换为"字段中,输入:

   .JPG

8. (可选)单击"预览"按钮以查看建议的批量重命名结果,然后单击"关闭"

9. 单击"重命名"按钮

请注意,处理后,Bridge会取消选择未受影响的文件.如果要清除所有.png文件,则需要重新选择所有图像并修改上面的配置(对于"png"而不是"jpg").您还可以将上面的配置保存为预设,例如"清理PageSpeed jpg图像",以便将来快速清理文件名.

配置截图/故障排除

如果您遇到麻烦,某些浏览器可能无法正确显示上面的RegEx表达式(责怪我的转义字符),因此有关配置的屏幕截图(以及这些说明),请参阅:

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

Answer 6

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

如果使用命令行,实现非常简单.

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

瞧!:-)
此外,你会发现一个非常简单的界面,也可以手动完成.