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

[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翻页，而无需下载整张彩色图片。

[csx162]

工具：
http://css-ig.net/scriptjpg
https://github.com/kud/jpegrescan

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

[lookhi]

此帖及内容链接都已收藏，应该不久就可以用到了。感谢大家的讨论，嚓。这不是我发的贴啊啊啊

[clowwindy]

其实没有人吐槽这样载入的时候颜色变来变去看起来很囧吗……

[cassyfar]

@est 我觉得progressive encoding是在调戏双眼... 而且在retina上应用应该会不好吧 毕竟retina对于图像细节要求很高 网速可以的情况下还是应该避免使用

[kaktos]

mark

[qiuai]

iPad上的safari不支持，下载完才显示。

[cloudream]

IE10一样支持的.

[iambeginner]

@est IE6实测不支持 iOS上的safari 也不行 都是长时间下载完整图片后才显示

[ijophy]

是图片的原因。我放我站上 还是一样的效果
http://www.ijophy.com/google-data-center.jpg
@sobigfish

[Kaiyuan]

都需要服务器安装啊，用虚拟空间的没法做到了，只有找服务商解决了。

[sobigfish]

@ijophy 你网站速度不错啊，那个＊。cc 网站的服务器靠谱不？

[isayr]

@ijophy 是图片经过服务器重写过生成的新图片都有这样的效果还是作图的时候就实现了这样的效果呢。我更倾向于前者。

[lightening]

加载太快了，完全没看清楚啊。请问mac下怎么限速？