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

2013-03-28 12:42:45 +08:00
 lambdaq
今天研究 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翻页,而无需下载整张彩色图片。
10829 次点击
所在节点    云计算
33 条回复
est
2013-03-28 13:31:32 +08:00
呃,看了下,貌似不仅按照通道顺序载入,而且依然融合了渐进方式。最先是模糊的黑白图片。神奇了。
AustinLee
2013-03-28 13:34:49 +08:00
确实神奇 找下资料顺便学习一下
kennedy32
2013-03-28 13:44:25 +08:00
@est 这网速
est
2013-03-28 13:45:48 +08:00
@kennedy32 呃。。。Fiddler可以模拟限速的。
Sunya
2013-03-28 14:39:55 +08:00
秒杀进入, 真的很快.. 看来有必要入一个..
isayr
2013-03-28 15:35:37 +08:00
而且感觉是2次渐进。第一次渐进清晰度不高,第二次就完全清晰了
lookhi
2013-03-28 21:05:03 +08:00
GordianZ
2013-03-28 21:25:27 +08:00
@lookhi 这是@est 发的……
lookhi
2013-03-28 21:26:11 +08:00
对的,后面有那个提示1,2不知道是不是有用啊
bhuztez
2013-03-28 21:35:28 +08:00
我觉得就是JPEG格式和DCT变换允许你调整他们在文件中的前后顺序
lookhi
2013-03-28 21:50:03 +08:00
est
2013-03-28 22:06:21 +08:00
@lookhi 看了下,准确的说代码是这个

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

但是跑出来结果不对。依然是传统的渐进式。pagespeed的chrome插件和proxy也是一样结果。没有LZ图片那么神奇。
sobigfish
2013-03-28 22:07:22 +08:00
@est 是图片还是server的原因,本地测试下就知道了,但怎么在非ie下限速啊调试啊
cassyfar
2013-03-28 22:15:38 +08:00
@bhuztez 正解 应该是Hierarchical JPEG compression,先传过来low frequency的图像,再传high frequency的,因为人眼对high frequency的不敏感。

另外人眼对灰度的敏感也高于色彩,所以用YUV color model,更多的bit用来表示灰度
lambdaq
2013-03-28 22:28:17 +08:00
大家快来膜拜牛人 @cassyfar
ytzong
2013-03-28 22:28:36 +08:00
查了下百毒百科,JPEG的压缩模式:
顺序式编码(Sequential Encoding)
递增式编码(Progressive Encoding)
无失真编码(Lossless Encoding)
阶梯式编码(Hierarchical Encoding)
http://baike.baidu.com/view/48269.htm
线索应该在后面两个中
iZr
2013-03-28 22:28:42 +08:00
mark
est
2013-03-28 22:32:24 +08:00
@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
2013-03-28 22:39:44 +08:00
估计大多数的jpeg encoder也编不出全部四种模式的jpeg。这个也没什么神奇的,视频聊天里面早就有类似的分层编码的技术,带宽不好的时候自动切换到低码率的视频上。
est
2013-03-28 22:58:43 +08:00
@chinshou 全部完整实现 https://github.com/thorfdbg/libjpeg 包括了 hierarchical 模式。

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

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

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/64294

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX