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

试玩:一键压缩 70%的图片处理技术

  •  1
     
  •   upygad · 2017-03-08 13:14:18 +08:00 · 9748 次点击
    这是一个创建于 2852 天前的主题,其中的信息可能已经有所发展或是发生改变。

    WebP ,是一种同时提供了有损压缩与无损压缩的图片文件格式。根据 Google 较早的测试, WebP 的无损压缩比网络上找到的 PNG 档少了 45 %的文件大小,即使这些 PNG 档在使用 PNGCRUSH 和 PNGOUT 处理过, WebP 还是可以减少 28 %的文件大小。

    WebP 可以让图片大小平均减少 70%,是未来图片格式的发展趋势。

    WebP 压缩效果体验: https://www.upyun.com/webp.html

    66 条回复    2017-03-21 14:02:03 +08:00
    langmoe
        1
    langmoe  
       2017-03-08 13:15:29 +08:00   ❤️ 5
    SourceMan
        2
    SourceMan  
       2017-03-08 13:15:51 +08:00
    1 楼终结此贴
    erxuan2016
        3
    erxuan2016  
       2017-03-08 13:16:57 +08:00
    WebP 普及度有在慢慢上去,看好它的未来,要是能解决浏览器兼容问题,相信会有一波大的影响。
    designer
        4
    designer  
       2017-03-08 13:19:36 +08:00 via iPhone
    webP 是 google 私有的格式吧。目前淘宝商品貌似在用。其他地方我作为设计师 还真没见过。
    ixiaozhi
        5
    ixiaozhi  
       2017-03-08 13:23:58 +08:00
    App 里可以用 WebP ,浏览器走判断
    upygad
        6
    upygad  
    OP
       2017-03-08 13:24:55 +08:00
    @designer 其实在用的已经比较泛了,国外的有 Google 、 Facebook 、 ebay 等,国内的有淘宝、腾讯和美团等。
    upygad
        7
    upygad  
    OP
       2017-03-08 13:26:27 +08:00   ❤️ 2
    @ixiaozhi 腾讯新闻客户端应用了 WebP 后,流量峰值带宽降低了 9GB ,平均图片延时和数据下载延时降低了 100ms
    hjc4869
        8
    hjc4869  
       2017-03-08 13:31:05 +08:00

    好东西没人用也没用。主要是对比 web 端主流的 JPEG 没什么特别明显的优势。 PNG 毕竟不是全部。
    d7101120120
        9
    d7101120120  
       2017-03-08 13:34:22 +08:00 via Android
    昨天下网易漫画的时候看了下,用的似乎就是 webP 。
    tabris17
        10
    tabris17  
       2017-03-08 13:35:15 +08:00   ❤️ 1
    优先使用 WebP ,图片载入出错时再使用其他格式
    herozhang
        11
    herozhang  
       2017-03-08 13:41:00 +08:00
    @upygad 原来腾讯新闻客户端流量是多少?降低比例大约是?
    allenhu
        12
    allenhu  
       2017-03-08 13:53:45 +08:00
    upyun 门槛太高,高攀不起,我还是老实七牛
    est
        13
    est  
       2017-03-08 13:55:12 +08:00
    记得有一种利用 H.265 压缩技术做的图片格式,比 webp 还小。
    lhbc
        14
    lhbc  
       2017-03-08 14:10:18 +08:00 via iPhone
    现在 webp 的环境挺成熟的了。
    webp 的授权是 BSD ,有 c 语言的库 libwepb ,移动平台也有各种库。
    唯一麻烦的是兼容其他平台,需要弄两份并且在客户端做判断。
    zhaohai
        15
    zhaohai  
       2017-03-08 14:10:47 +08:00
    不错的
    RobertYang
        16
    RobertYang  
       2017-03-08 14:12:21 +08:00 via Android
    已经用 upyun 搞了个自动转 webp 的了,不支持的浏览器还是用 jpg
    zpf124
        17
    zpf124  
       2017-03-08 14:17:20 +08:00
    jpg2000,webP,APNG,BPG 新格式一直都有人出,压缩率一个比一个高,颜色一个比一个丰富。

    然并卵网上大多数图片还是 jpg , png , gif ,各个浏览器都有自己的打算都不支持别家推广的格式。

    只是 chrome 用户量大而且还有 google 撑着 所以相对推广度还高一些,但期待 ie 火狐 safari 支持 webp ,还是基本没希望。
    emric
        18
    emric  
       2017-03-08 14:31:41 +08:00
    我厂已经在客户端大用 BPG 了, GIF 压缩效果炸好~
    Antidictator
        19
    Antidictator  
       2017-03-08 14:37:35 +08:00
    @RobertYang 上个星期还想过造个轮子的呢,没想到你这么快。
    qiayue
        20
    qiayue  
       2017-03-08 14:39:36 +08:00
    上传 .jpg 格式,提示必须是 jpeg/png/gif 等
    iamfredng
        21
    iamfredng  
       2017-03-08 14:49:44 +08:00
    还有一个 JXR 格式,虽然是微软的但是各大浏览器都支持,虽然压缩比没 webp 高
    RobertYang
        22
    RobertYang  
       2017-03-08 14:56:41 +08:00 via Android
    @Antidictator 用 php 实现的
    zpf124
        23
    zpf124  
       2017-03-08 14:59:21 +08:00
    @est 你说的那个就是 bpg
    ryan93
        24
    ryan93  
       2017-03-08 15:01:06 +08:00
    我觉得煎蛋无聊图有必要加入这种格式。。。
    wangjie
        25
    wangjie  
       2017-03-08 15:02:47 +08:00
    为什么我觉得 webp 已经很普及了。经常保存个图片就是 webp
    zpf124
        26
    zpf124  
       2017-03-08 15:05:53 +08:00
    @emric 请教一下,听说 bpg ,编解码速度都比其他几种长不少,尤其是 js 版本的,而且目前只有 C 的一个类库 和一个 js 的解码库。
    那实际使用的使用的时候客户端真人是否可以感觉到加载慢? 另外你们是客户端集成他的类库,还是 Hybrid App 通过浏览器调用 js 解码?
    upygad
        27
    upygad  
    OP
       2017-03-08 15:39:31 +08:00
    upygad
        28
    upygad  
    OP
       2017-03-08 15:41:20 +08:00
    @qiayue 试了下,没有出现上传 jpg 出现提示的问题,你再试试。
    RE
        29
    RE  
       2017-03-08 15:54:46 +08:00
    @upygad
    不知道你们这个 demo 页面的参数怎么调的,压缩涂抹太严重了
    原图: https://p.upyun.com/demo/tmp/pv1yhXBQ.jpg
    webp : https://p.upyun.com/demo/tmp/pv1yhXBQ.webp
    作为一个又拍粉都看不下了
    demen
        30
    demen  
       2017-03-08 16:02:53 +08:00
    其实留意一下微信的文章页面,只要是手机端或者 webkit 的浏览器都是会显示 webp 了
    tankb52
        31
    tankb52  
       2017-03-08 16:08:34 +08:00 via Android
    动画有没有哪个新格式能替代 GIF 的?
    APNG ?
    我上次想截个签名图,发现随随便便就好几兆,一压缩又失真。
    upygad
        32
    upygad  
    OP
       2017-03-08 16:15:54 +08:00
    @tankb52 动态 WebP 呀, APNG 比较小众。
    dozer47528
        33
    dozer47528  
       2017-03-08 16:23:58 +08:00   ❤️ 1

    好尴尬,图变大了
    qiayue
        34
    qiayue  
       2017-03-08 16:30:46 +08:00


    你们程序员太渣了,图片太大却报图片格式不正确的错误

    我上传到 jpg 1.5M
    upygad
        35
    upygad  
    OP
       2017-03-08 16:31:18 +08:00
    @dozer47528 哈哈,这么罕见的情况竟然被你发现了,也是略略的敬佩。在动态 GIF 本身很优的情况下,会出现这种情况,例如 GIF 8 位颜色数展示, WebP 是 24 颜色数,所以出现你的这种情况。但这个是极其少数的。
    upygad
        36
    upygad  
    OP
       2017-03-08 16:44:05 +08:00
    @qiayue 这个应该是你上传的图片可能出现破损等问题,我们 Demo 页大小限制为 8Mb ,你换几张试试。
    wangjiezheng
        37
    wangjiezheng  
       2017-03-08 17:23:10 +08:00
    认真的, WebP 还是蛮好用的,等以后所有浏览器都支持后,必定一统天下。
    zpf124
        38
    zpf124  
       2017-03-08 21:15:57 +08:00
    @upygad 我记得看一些资料里说,动态的 webp 也还是像 gif 一样每帧一张图,然后用 webp 的高压缩算法处理。
    而 APNG 则是除第一帧外尽可能的只存储差异化的部分, 这样的话按道理 apng 应该压缩效果更好啊,而且苹果和火狐都支持按道理不应该太小众啊....
    DSKcpp
        39
    DSKcpp  
       2017-03-08 21:40:03 +08:00
    新浪微博移动端几乎全是 webp
    maplerecall
        40
    maplerecall  
       2017-03-09 00:01:40 +08:00 via Android
    现在我们的图片服务是支持压缩 webp 的,通过特性检测是否支持选择对应的格式没啥难度,而且效果显著,尤其是移动端页面
    garipan
        41
    garipan  
       2017-03-09 00:03:44 +08:00
    很好 很需要这种工具,感谢 Po 主


    另外,应该是体积越大的 Gif ,越能体现出 WebP 压缩的优势来
    IgniteWhite
        42
    IgniteWhite  
       2017-03-09 01:22:43 +08:00
    Pied Piper
    RqPS6rhmP3Nyn3Tm
        43
    RqPS6rhmP3Nyn3Tm  
       2017-03-09 02:40:02 +08:00
    然而除了 Chromium 内核的基本没人支持
    还有业界坑货 Safari
    Explorare
        44
    Explorare  
       2017-03-09 02:48:59 +08:00 via Android
    @IgniteWhite 弟高值
    doctorlai
        45
    doctorlai  
       2017-03-09 03:10:19 +08:00
    时刻拥抱新技术 – 享用 CloudFlare – WebP 图片优化 https://justyy.com/archives/4186
    madfishy
        46
    madfishy  
       2017-03-09 06:26:15 +08:00
    还是支持 BPG
    mritd
        47
    mritd  
       2017-03-09 08:55:51 +08:00 via iPhone
    @langmoe 完美一血
    mritd
        48
    mritd  
       2017-03-09 08:56:10 +08:00 via iPhone
    @SourceMan 完美助攻 给力辅助
    upygad
        49
    upygad  
    OP
       2017-03-09 09:13:29 +08:00
    @DSKcpp 新浪微博这样的体量,使用 WebP 能节约大把的流量资源。
    iyangyuan
        50
    iyangyuan  
       2017-03-09 09:59:31 +08:00 via iPhone
    看了半天原来是广告,而且这玩意早就有了,估计来这回复评价好的,都是托吧
    upygad
        51
    upygad  
    OP
       2017-03-09 10:15:03 +08:00
    @iyangyuan 这竟然被你说成广告,,,就是一个 WebP 的 demo 页。
    erxuan
        52
    erxuan  
       2017-03-09 11:05:16 +08:00
    @iyangyuan 这个还好吧, 45 楼的那才叫广告。 WebP 出来是有段时间了,但普及度上还是差了点。这类的普及帖表示能接受。
    happyzed
        53
    happyzed  
       2017-03-09 11:05:19 +08:00
    @designer 好多在用,我们现在在用,网易也在用
    erxuan2016
        54
    erxuan2016  
       2017-03-09 11:58:20 +08:00
    平时多关注一下的话,能看到不少已经都用 webp 了,特别是移动端这块的
    Bonaornot
        55
    Bonaornot  
       2017-03-09 13:49:25 +08:00
    已体验,感谢楼主,很棒。
    Yourdaye
        56
    Yourdaye  
       2017-03-09 14:57:59 +08:00
    非常好,关键是只能在你们又拍云使用吗?
    Yourdaye
        57
    Yourdaye  
       2017-03-09 14:58:59 +08:00
    我在七牛能不能用?
    upygad
        58
    upygad  
    OP
       2017-03-09 16:34:45 +08:00
    @Bonaornot 哈哈,谢谢支持~
    upygad
        59
    upygad  
    OP
       2017-03-09 16:34:59 +08:00
    @Yourdaye 你可以用我们又拍云啊
    jacy
        60
    jacy  
       2017-03-09 17:10:44 +08:00
    火狐路过
    yvette233
        61
    yvette233  
       2017-03-09 18:09:27 +08:00
    这技术 6 ,支持下
    upygad
        62
    upygad  
    OP
       2017-03-09 18:21:23 +08:00
    @yvette233 WebP 是图片格式的未来趋势~
    discrete
        63
    discrete  
       2017-03-10 08:47:54 +08:00 via iPad
    @ryan93 快了
    upygad
        64
    upygad  
    OP
       2017-03-10 13:38:09 +08:00
    @discrete 这个可以有~
    caola
        65
    caola  
       2017-03-19 13:37:13 +08:00
    chrome 59 以上版本将支持 APNG (体积很小的无损动态图片)有望会得到全面普及
    AsisA
        66
    AsisA  
       2017-03-21 14:02:03 +08:00
    WebP 确实好,但是目前 Firefox 、 IE 、 Edge 、 Safari 都不支持
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2680 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 15:10 · PVG 23:10 · LAX 07:10 · JFK 10:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.