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

时间:2011-03-27 19:05:06

标签: compression imaging pagespeed google-pagespeed

当您在网站上运行Google的Firebug / Firefox的PageSpeed插件时,它会建议可以无损压缩图像的情况,并提供下载此较小图像的链接。

例如:

这适用于JPG和PNG文件类型(我没有测试过GIF或其他文件。)

另请注意Flickr缩略图(所有这些图像都是75x75像素。)它们可以节省很多。如果这真的很棒,为什么雅虎不会将这个服务器端应用到整个库中并减少存储和带宽负载?

即使Stackoverflow.com代表一些非常小的节省:

我见过PageSpeed建议使用Photoshop的“Save for Web”功能创建的PNG文件相当不错。

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

9 个答案:

答案 0 :(得分:82)

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


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

答案 1 :(得分:46)

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

答案 2 :(得分:29)

答案 3 :(得分:15)

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

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

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

答案 4 :(得分:13)

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

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

jpegtran -optimize source_filename.jpg output_filename.jpg

有关压缩选项的更多帮助,请在命令提示符下键入:jpegtran

或使用Firebug中PageSpeed标签中自动生成的图片:

我能够按照Pumbaa80的建议访问PageSpeed的优化文件。希望屏幕截图here为FireFox环境提供进一步的清晰度。 (但我无法在Chrome中访问这些优化文件的本地版本。)

使用Adobe Bridge&amp ;;清理凌乱的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. 单击“重命名”按钮
  10. 请注意,处理完成后,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

答案 5 :(得分:10)

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

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

sudo apt-get install trimage    
trimage -d images/*
瞧,瞧! :-)
此外,您还可以找到一个非常简单的界面来手动完成。

答案 6 :(得分:2)

有一个非常方便的批处理脚本,使用OptiPNG(来自this blog)以递归方式优化文件夹下的图像:

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

ONE LINE!

答案 7 :(得分:0)

如果您正在寻找批处理,请记住,如果您没有Xserver可用,则会出现trimage抱怨。在这种情况下,只需编写一个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 {} \;");
?>

根据您的需求更改选项。

答案 8 :(得分:0)

对于Windows,有几个拖放接口可以轻松访问。

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

对于PNG文件,我发现这个是我的乐趣,显然有3个不同的工具包裹在这个GIU中。只需拖放即可为您完成。

https://pnggauntlet.com/

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

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

我今天在WP安装上的5500个文件上保存了113MB,所以它绝对值得!