V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Recommended Services
Amazon Web Services
LeanCloud
New Relic
ClearDB
lambdaq
V2EX  ›  云计算

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

  •  
  •   lambdaq · 2013-03-28 12:42:45 +08:00 · 10793 次点击
    这是一个创建于 4258 天前的主题,其中的信息可能已经有所发展或是发生改变。
    今天研究 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翻页,而无需下载整张彩色图片。
    33 条回复    1970-01-01 08:00:00 +08:00
    est
        1
    est  
       2013-03-28 13:31:32 +08:00
    呃,看了下,貌似不仅按照通道顺序载入,而且依然融合了渐进方式。最先是模糊的黑白图片。神奇了。
    AustinLee
        2
    AustinLee  
       2013-03-28 13:34:49 +08:00
    确实神奇 找下资料顺便学习一下
    kennedy32
        3
    kennedy32  
       2013-03-28 13:44:25 +08:00 via Android
    @est 这网速
    est
        4
    est  
       2013-03-28 13:45:48 +08:00
    @kennedy32 呃。。。Fiddler可以模拟限速的。
    Sunya
        5
    Sunya  
       2013-03-28 14:39:55 +08:00
    秒杀进入, 真的很快.. 看来有必要入一个..
    isayr
        6
    isayr  
       2013-03-28 15:35:37 +08:00
    而且感觉是2次渐进。第一次渐进清晰度不高,第二次就完全清晰了
    GordianZ
        8
    GordianZ  
    MOD
       2013-03-28 21:25:27 +08:00 via iPhone
    @lookhi 这是@est 发的……
    lookhi
        9
    lookhi  
       2013-03-28 21:26:11 +08:00
    对的,后面有那个提示1,2不知道是不是有用啊
    bhuztez
        10
    bhuztez  
       2013-03-28 21:35:28 +08:00
    我觉得就是JPEG格式和DCT变换允许你调整他们在文件中的前后顺序
    lookhi
        11
    lookhi  
       2013-03-28 21:50:03 +08:00
    est
        12
    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
        13
    sobigfish  
       2013-03-28 22:07:22 +08:00
    @est 是图片还是server的原因,本地测试下就知道了,但怎么在非ie下限速啊调试啊
    cassyfar
        14
    cassyfar  
       2013-03-28 22:15:38 +08:00   ❤️ 2
    @bhuztez 正解 应该是Hierarchical JPEG compression,先传过来low frequency的图像,再传high frequency的,因为人眼对high frequency的不敏感。

    另外人眼对灰度的敏感也高于色彩,所以用YUV color model,更多的bit用来表示灰度
    lambdaq
        15
    lambdaq  
    OP
       2013-03-28 22:28:17 +08:00
    大家快来膜拜牛人 @cassyfar
    ytzong
        16
    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
        17
    iZr  
       2013-03-28 22:28:42 +08:00
    mark
    est
        18
    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
        19
    chinshou  
       2013-03-28 22:39:44 +08:00
    估计大多数的jpeg encoder也编不出全部四种模式的jpeg。这个也没什么神奇的,视频聊天里面早就有类似的分层编码的技术,带宽不好的时候自动切换到低码率的视频上。
    est
        20
    est  
       2013-03-28 22:58:43 +08:00
    @chinshou 全部完整实现 https://github.com/thorfdbg/libjpeg 包括了 hierarchical 模式。

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

    视频聊天那个客户端服务器端都是可以控制可以升级的,没啥技术含量。Google这个应该算hack吧。我测试了IE8是支持的。不知道IE6如何。
    lookhi
        22
    lookhi  
       2013-03-28 23:47:24 +08:00
    此帖及内容链接都已收藏,应该不久就可以用到了。感谢大家的讨论,嚓。这不是我发的贴啊啊啊
    clowwindy
        23
    clowwindy  
       2013-03-29 00:20:43 +08:00
    其实没有人吐槽这样载入的时候颜色变来变去看起来很囧吗……
    cassyfar
        24
    cassyfar  
       2013-03-29 00:42:21 +08:00
    @est 我觉得progressive encoding是在调戏双眼... 而且在retina上应用应该会不好吧 毕竟retina对于图像细节要求很高 网速可以的情况下还是应该避免使用
    kaktos
        25
    kaktos  
       2013-03-29 07:47:40 +08:00 via iPhone
    mark
    qiuai
        26
    qiuai  
       2013-03-29 09:10:09 +08:00 via iPad
    iPad上的safari不支持,下载完才显示。
    cloudream
        27
    cloudream  
       2013-03-29 18:12:24 +08:00
    IE10一样支持的.
    iambeginner
        28
    iambeginner  
       2013-03-30 19:50:57 +08:00
    @est IE6实测不支持 iOS上的safari 也不行 都是长时间下载完整图片后才显示
    ijophy
        29
    ijophy  
       2013-03-31 15:42:39 +08:00   ❤️ 1
    是图片的原因。我放我站上 还是一样的效果
    http://www.ijophy.com/google-data-center.jpg
    @sobigfish
    Kaiyuan
        30
    Kaiyuan  
       2013-03-31 16:07:11 +08:00
    都需要服务器安装啊,用虚拟空间的没法做到了,只有找服务商解决了。
    sobigfish
        31
    sobigfish  
       2013-04-01 01:35:45 +08:00
    @ijophy 你网站速度不错啊,那个*。cc 网站的服务器靠谱不?
    isayr
        32
    isayr  
       2013-04-01 03:59:15 +08:00
    @ijophy 是图片经过服务器重写过生成的新图片都有这样的效果还是作图的时候就实现了这样的效果呢。我更倾向于前者。
    lightening
        33
    lightening  
       2013-04-01 05:59:42 +08:00
    加载太快了,完全没看清楚啊。请问mac下怎么限速?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2875 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 06:54 · PVG 14:54 · LAX 22:54 · JFK 01:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.