This topic created in 4782 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翻页，而无需下载整张彩色图片。
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翻页，而无需下载整张彩色图片。
 |
1
est Mar 28, 2013
呃，看了下，貌似不仅按照通道顺序载入，而且依然融合了渐进方式。最先是模糊的黑白图片。神奇了。
|
 |
2
AustinLee Mar 28, 2013
确实神奇 找下资料顺便学习一下
|
 |
5
Sunya Mar 28, 2013
秒杀进入, 真的很快.. 看来有必要入一个..
|
 |
6
isayr Mar 28, 2013
而且感觉是2次渐进。第一次渐进清晰度不高，第二次就完全清晰了
|
 |
7
lookhi Mar 28, 2013  1
|
|
9
lookhi Mar 28, 2013
对的，后面有那个提示1,2不知道是不是有用啊
|
 |
10
bhuztez Mar 28, 2013
我觉得就是JPEG格式和DCT变换允许你调整他们在文件中的前后顺序
|
|
11
lookhi Mar 28, 2013
|
|
12
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图片那么神奇。 |
 |
14
cassyfar Mar 28, 2013 2
@bhuztez 正解 应该是Hierarchical JPEG compression，先传过来low frequency的图像，再传high frequency的，因为人眼对high frequency的不敏感。
另外人眼对灰度的敏感也高于色彩，所以用YUV color model，更多的bit用来表示灰度 |
 |
16
ytzong Mar 28, 2013
查了下百毒百科，JPEG的压缩模式：
顺序式编码（Sequential Encoding） 递增式编码（Progressive Encoding） 无失真编码（Lossless Encoding） 阶梯式编码（Hierarchical Encoding） http://baike.baidu.com/view/48269.htm 线索应该在后面两个中 |
 |
17
iZr Mar 28, 2013
mark
|
|
18
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。。学习了。 |
 |
19
chinshou Mar 28, 2013
估计大多数的jpeg encoder也编不出全部四种模式的jpeg。这个也没什么神奇的，视频聊天里面早就有类似的分层编码的技术，带宽不好的时候自动切换到低码率的视频上。
|
|
20
est Mar 28, 2013
@chinshou 全部完整实现 https://github.com/thorfdbg/libjpeg 包括了 hierarchical 模式。
这东西虽好，关键是看浏览器是否支持啊。 视频聊天那个客户端服务器端都是可以控制可以升级的，没啥技术含量。Google这个应该算hack吧。我测试了IE8是支持的。不知道IE6如何。 |
 |
21
csx162 Mar 28, 2013
|
|
22
lookhi Mar 28, 2013
此帖及内容链接都已收藏，应该不久就可以用到了。感谢大家的讨论，嚓。这不是我发的贴啊啊啊
|
 |
23
clowwindy Mar 29, 2013
其实没有人吐槽这样载入的时候颜色变来变去看起来很囧吗……
|
|
24
cassyfar Mar 29, 2013
@est 我觉得progressive encoding是在调戏双眼... 而且在retina上应用应该会不好吧 毕竟retina对于图像细节要求很高 网速可以的情况下还是应该避免使用
|
 |
25
kaktos Mar 29, 2013 via iPhone
mark
|
 |
26
qiuai PRO iPad上的safari不支持，下载完才显示。
|
 |
27
cloudream Mar 29, 2013
IE10一样支持的.
|
 |
28
iambeginner Mar 30, 2013
@est IE6实测不支持 iOS上的safari 也不行 都是长时间下载完整图片后才显示
|
 |
29
ijophy Mar 31, 2013 1
|
 |
30
Kaiyuan Mar 31, 2013
都需要服务器安装啊，用虚拟空间的没法做到了，只有找服务商解决了。
|
 |
33
lightening Apr 1, 2013
加载太快了，完全没看清楚啊。请问mac下怎么限速？
|
Select Language