Google的Page Speed无损图像压缩如何工作？ [英] How does Google's Page Speed lossless image compression work?

问题描述

当您在网站上运行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（

$ b

我看过PageSpeed在我使用Photoshop的Save for Web创建的PNG文件上建议相当不错的储蓄，特征。





所以我的问题是，他们对图像做了什么变化，以减少这么多？我猜对不同的文件类型有不同的答案。这是真的无损的JPGs吗？他们怎么能打败Photoshop？我应该对此有点怀疑吗？

解决方案

如果你真的对技术细节，请查看源代码：






• 
  
• google.com/p/page-speed/source/browse/lib/trunk/src/pagespeed/image_compression/jpeg_optimizer.cc\">jpeg_optimizer.cc


• webp_optimizer.cc






---





对于PNG文件，他们使用OptiPNG进行一些试验和错误的方法

  //我们使用这四种组合，因为不同的图像似乎受益于
 //不同的参数， 4似乎最适合一个大的
 //从网络的PNG集。 
 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 ），
 alpha_compression（0），alpha_filtering（1），alpha_quality（100）{} 
  

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




When you run Google's PageSpeed plugin for Firebug/Firefox on a website it will suggest cases where an image can be losslessly compressed, and provide a link to download this smaller image.

For example:

• Losslessly compressing http://farm3.static.flickr.com/2667/4096993475_80359a672b_s.jpg could save 33.5KiB (85% reduction).
• Losslessly compressing http://farm2.static.flickr.com/1149/5137875594_28d0e287fb_s.jpg could save 18.5KiB (77% reduction).
• Losslessly compressing http://cdn.uservoice.com/images/widgets/en/feedback_tab_white.png could save 262B (11% reduction).
• Losslessly compressing http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/images/ui-bg_flat_75_ffffff_40x100.png could save 91B (51% reduction).
• Losslessly compressing http://www.gravatar.com/avatar/0b1bccebcd4c3c38cb5be805df5e4d42?s=45&d=mm could save 61B (5% reduction).

This applies across both JPG and PNG filetypes (I haven't tested GIF or others.)

Note too the Flickr thumbnails (all those images are 75x75 pixels.) They're some pretty big savings. If this is really so great, why aren't Yahoo applying this server-side to their entire library and reducing their storage and bandwidth loads?

Even Stackoverflow.com stands for some very minor savings:

• Losslessly compressing http://sstatic.net/stackoverflow/img/sprites.png?v=3 could save 1.7KiB (10% reduction).
• Losslessly compressing http://sstatic.net/stackoverflow/img/tag-chrome.png could save 11B (1% reduction).

I've seen PageSpeed suggest pretty decent savings on PNG files that I created using Photoshop's 'Save for Web' feature.

So my question is, what changes are they making to the images to reduce them by so much? I'm guessing there are different answers for different filetypes. Is this really lossless for JPGs? And how can they beat Photoshop? Should I be a little suspicious of this?

解决方案

If you're really interested in the technical details, check out the source code:

• png_optimizer.cc
• jpeg_optimizer.cc
• webp_optimizer.cc

---

For PNG files, they use OptiPNG with some trial-and-error approach

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

When all four combinations are applied, the smallest result is kept. Simple as that.

(N.B.: The optipng command line tool does that too if you provide -o 2 through -o 7)

---

For JPEG files, they use jpeglib with the following options:

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

---

Similarly, WEBP is compressed using libwebp with these options:

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

---

There is also image_converter.cc which is used to losslessly convert to the smallest format.

这篇关于Google的Page Speed无损图像压缩如何工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！