Google Cloud Storage的牛逼JPEG优化技术？除了Baseline/progressive第三种按通道先后载入方式

Recommended Services

› ClearDB

This topic created in 4973 days ago, the information mentioned may be changed or developed.

今天研究 Google Cloud Storage 发现这样一个图片

http://storage.googleapis.com/marc-pres/boston-event-1012/images/google-data-center.jpg

大家知道JPEG格式在Photoshop里保存有两个选项：

- 标准 baseline

- 渐进 progressive

第一种在浏览器里就是从上而下逐行下载显示

第二种就是先马赛克然后逐渐清晰

第三种方式就是我贴的这个URL。大家在Chrome/Firefox （Safari和IE无效）里打开，可以看到，这张图片的牛逼之处在于先载入黑白通道图片，然后RGB通道逐渐载入

个人感觉这货碉堡了。

请问有没有知道这个技术是怎么做出来的？可否在Photoshop里做到这样的效果？

应用场景：比如要做一个电子杂志，黑白JPEG图片大概是整张图片的1/4大小，那么用户可以很快的preview翻页，而无需下载整张彩色图片。

JPEG

图片

载入

33 replies • 1970-01-01 08:00:00 +08:00

est

Mar 28, 2013

呃，看了下，貌似不仅按照通道顺序载入，而且依然融合了渐进方式。最先是模糊的黑白图片。神奇了。

AustinLee

Mar 28, 2013

确实神奇找下资料顺便学习一下

kennedy32

Mar 28, 2013 via Android

@est 这网速

est

Mar 28, 2013

@kennedy32 呃。。。Fiddler可以模拟限速的。

Sunya

Mar 28, 2013

秒杀进入, 真的很快.. 看来有必要入一个..

isayr

Mar 28, 2013

而且感觉是2次渐进。第一次渐进清晰度不高，第二次就完全清晰了

lookhi

Mar 28, 2013

@lambdaq http://stackoverflow.com/questions/15674880/besides-standard-progressive-the-3rd-kind-of-jpeg-compression-load-by-channel

GordianZ

Mar 28, 2013 via iPhone

@lookhi 这是@est 发的……

lookhi

Mar 28, 2013

对的，后面有那个提示1,2不知道是不是有用啊

bhuztez

Mar 28, 2013

我觉得就是JPEG格式和DCT变换允许你调整他们在文件中的前后顺序

lookhi

Mar 28, 2013

https://developers.google.com/speed/pagespeed/mod
http://www.modpagespeed.com/
有代码貌似

est

Mar 28, 2013

@lookhi 看了下，准确的说代码是这个

http://code.google.com/p/page-speed/source/browse/lib/trunk/src/pagespeed/image_compression/jpeg_optimizer.cc

但是跑出来结果不对。依然是传统的渐进式。pagespeed的chrome插件和proxy也是一样结果。没有LZ图片那么神奇。

run2

Mar 28, 2013

@est 是图片还是server的原因，本地测试下就知道了，但怎么在非ie下限速啊调试啊

cassyfar

Mar 28, 2013

@bhuztez 正解应该是Hierarchical JPEG compression，先传过来low frequency的图像，再传high frequency的，因为人眼对high frequency的不敏感。

另外人眼对灰度的敏感也高于色彩，所以用YUV color model，更多的bit用来表示灰度

tf2

Mar 28, 2013

大家快来膜拜牛人 @cassyfar

ytzong

Mar 28, 2013

查了下百毒百科，JPEG的压缩模式：
顺序式编码（Sequential Encoding）
递增式编码（Progressive Encoding）
无失真编码（Lossless Encoding）
阶梯式编码（Hierarchical Encoding）
http://baike.baidu.com/view/48269.htm
线索应该在后面两个中

iZr

Mar 28, 2013

mark

est

Mar 28, 2013

@cassyfar check this

http://calendar.perfplanet.com/2012/progressive-jpegs-a-new-best-practice/

> It’s not a well-known fact but browsers are only able to decode about one quarter of the original JPEG specifications (no arithmetic coding, no 12-bits per component, no hierarchical and no lossless).

jpeg大概4种模式Sequential/Lossless/Progressive/Hierarchical。。学习了。

chinshou

Mar 28, 2013

估计大多数的jpeg encoder也编不出全部四种模式的jpeg。这个也没什么神奇的，视频聊天里面早就有类似的分层编码的技术，带宽不好的时候自动切换到低码率的视频上。

est

Mar 28, 2013

@chinshou 全部完整实现 https://github.com/thorfdbg/libjpeg 包括了 hierarchical 模式。

这东西虽好，关键是看浏览器是否支持啊。

视频聊天那个客户端服务器端都是可以控制可以升级的，没啥技术含量。Google这个应该算hack吧。我测试了IE8是支持的。不知道IE6如何。