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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Recommended Services

› Amazon Web Services

› LeanCloud

› New Relic

› ClearDB

这是一个创建于 2821 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

WebP

压缩

PNG

图片

66 条回复 • 2017-03-21 14:02:03 +08:00

langmoe

2017-03-08 13:15:29 +08:00

SourceMan

2017-03-08 13:15:51 +08:00

1 楼终结此贴

erxuan2016

2017-03-08 13:16:57 +08:00

WebP 普及度有在慢慢上去，看好它的未来，要是能解决浏览器兼容问题，相信会有一波大的影响。

designer

2017-03-08 13:19:36 +08:00 via iPhone

webP 是 google 私有的格式吧。目前淘宝商品貌似在用。其他地方我作为设计师还真没见过。

ixiaozhi

2017-03-08 13:23:58 +08:00

App 里可以用 WebP ，浏览器走判断

upygad

2017-03-08 13:24:55 +08:00

@designer 其实在用的已经比较泛了，国外的有 Google 、 Facebook 、 ebay 等，国内的有淘宝、腾讯和美团等。

upygad

2017-03-08 13:26:27 +08:00

@ixiaozhi 腾讯新闻客户端应用了 WebP 后，流量峰值带宽降低了 9GB ，平均图片延时和数据下载延时降低了 100ms

hjc4869

2017-03-08 13:31:05 +08:00

好东西没人用也没用。主要是对比 web 端主流的 JPEG 没什么特别明显的优势。 PNG 毕竟不是全部。

d7101120120

2017-03-08 13:34:22 +08:00 via Android

昨天下网易漫画的时候看了下，用的似乎就是 webP 。

tabris17

2017-03-08 13:35:15 +08:00

优先使用 WebP ，图片载入出错时再使用其他格式

herozhang

2017-03-08 13:41:00 +08:00

@upygad 原来腾讯新闻客户端流量是多少？降低比例大约是？

allenhu

2017-03-08 13:53:45 +08:00

upyun 门槛太高，高攀不起，我还是老实七牛

est

2017-03-08 13:55:12 +08:00

记得有一种利用 H.265 压缩技术做的图片格式，比 webp 还小。

lhbc

2017-03-08 14:10:18 +08:00 via iPhone

现在 webp 的环境挺成熟的了。
webp 的授权是 BSD ，有 c 语言的库 libwepb ，移动平台也有各种库。
唯一麻烦的是兼容其他平台，需要弄两份并且在客户端做判断。

zhaohai

2017-03-08 14:10:47 +08:00

不错的

RobertYang

2017-03-08 14:12:21 +08:00 via Android

已经用 upyun 搞了个自动转 webp 的了，不支持的浏览器还是用 jpg

zpf124

2017-03-08 14:17:20 +08:00

jpg2000,webP,APNG,BPG 新格式一直都有人出，压缩率一个比一个高，颜色一个比一个丰富。

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

只是 chrome 用户量大而且还有 google 撑着所以相对推广度还高一些，但期待 ie 火狐 safari 支持 webp ，还是基本没希望。

emric

2017-03-08 14:31:41 +08:00

我厂已经在客户端大用 BPG 了， GIF 压缩效果炸好~

Antidictator

2017-03-08 14:37:35 +08:00

@RobertYang 上个星期还想过造个轮子的呢，没想到你这么快。

qiayue

2017-03-08 14:39:36 +08:00

上传 .jpg 格式，提示必须是 jpeg/png/gif 等

iamfredng

2017-03-08 14:49:44 +08:00

还有一个 JXR 格式，虽然是微软的但是各大浏览器都支持，虽然压缩比没 webp 高

RobertYang

2017-03-08 14:56:41 +08:00 via Android

@Antidictator 用 php 实现的

zpf124

2017-03-08 14:59:21 +08:00

@est 你说的那个就是 bpg

ryan93

2017-03-08 15:01:06 +08:00

我觉得煎蛋无聊图有必要加入这种格式。。。

wangjie

2017-03-08 15:02:47 +08:00

为什么我觉得 webp 已经很普及了。经常保存个图片就是 webp

zpf124

2017-03-08 15:05:53 +08:00

@emric 请教一下，听说 bpg ，编解码速度都比其他几种长不少，尤其是 js 版本的，而且目前只有 C 的一个类库和一个 js 的解码库。
那实际使用的使用的时候客户端真人是否可以感觉到加载慢？另外你们是客户端集成他的类库，还是 Hybrid App 通过浏览器调用 js 解码？

upygad

2017-03-08 15:39:31 +08:00

@RobertYang 棒~

upygad

2017-03-08 15:41:20 +08:00

@qiayue 试了下，没有出现上传 jpg 出现提示的问题，你再试试。

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

2017-03-08 16:02:53 +08:00

其实留意一下微信的文章页面，只要是手机端或者 webkit 的浏览器都是会显示 webp 了

tankb52

2017-03-08 16:08:34 +08:00 via Android

动画有没有哪个新格式能替代 GIF 的？
APNG ？
我上次想截个签名图，发现随随便便就好几兆，一压缩又失真。

upygad

2017-03-08 16:15:54 +08:00

@tankb52 动态 WebP 呀， APNG 比较小众。

dozer47528

2017-03-08 16:23:58 +08:00

好尴尬，图变大了

qiayue

2017-03-08 16:30:46 +08:00

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

我上传到 jpg 1.5M

upygad

2017-03-08 16:31:18 +08:00

@dozer47528 哈哈，这么罕见的情况竟然被你发现了，也是略略的敬佩。在动态 GIF 本身很优的情况下，会出现这种情况，例如 GIF 8 位颜色数展示， WebP 是 24 颜色数，所以出现你的这种情况。但这个是极其少数的。

upygad

2017-03-08 16:44:05 +08:00

@qiayue 这个应该是你上传的图片可能出现破损等问题，我们 Demo 页大小限制为 8Mb ，你换几张试试。

wangjiezheng

2017-03-08 17:23:10 +08:00

认真的， WebP 还是蛮好用的，等以后所有浏览器都支持后，必定一统天下。

zpf124

2017-03-08 21:15:57 +08:00

@upygad 我记得看一些资料里说，动态的 webp 也还是像 gif 一样每帧一张图，然后用 webp 的高压缩算法处理。
而 APNG 则是除第一帧外尽可能的只存储差异化的部分，这样的话按道理 apng 应该压缩效果更好啊，而且苹果和火狐都支持按道理不应该太小众啊....

DSKcpp

2017-03-08 21:40:03 +08:00

新浪微博移动端几乎全是 webp

maplerecall

2017-03-09 00:01:40 +08:00 via Android

现在我们的图片服务是支持压缩 webp 的，通过特性检测是否支持选择对应的格式没啥难度，而且效果显著，尤其是移动端页面

garipan

2017-03-09 00:03:44 +08:00

很好很需要这种工具，感谢 Po 主

另外，应该是体积越大的 Gif ，越能体现出 WebP 压缩的优势来

IgniteWhite

2017-03-09 01:22:43 +08:00

Pied Piper

RqPS6rhmP3Nyn3Tm

2017-03-09 02:40:02 +08:00

然而除了 Chromium 内核的基本没人支持
还有业界坑货 Safari

Explorare

2017-03-09 02:48:59 +08:00 via Android

@IgniteWhite 弟高值

doctorlai

2017-03-09 03:10:19 +08:00

时刻拥抱新技术 – 享用 CloudFlare – WebP 图片优化 https://justyy.com/archives/4186

madfishy

2017-03-09 06:26:15 +08:00

还是支持 BPG

mritd

2017-03-09 08:55:51 +08:00 via iPhone

@langmoe 完美一血

mritd

2017-03-09 08:56:10 +08:00 via iPhone

@SourceMan 完美助攻给力辅助

upygad

2017-03-09 09:13:29 +08:00

@DSKcpp 新浪微博这样的体量，使用 WebP 能节约大把的流量资源。

iyangyuan

2017-03-09 09:59:31 +08:00 via iPhone

看了半天原来是广告，而且这玩意早就有了，估计来这回复评价好的，都是托吧

upygad

2017-03-09 10:15:03 +08:00

@iyangyuan 这竟然被你说成广告，，，就是一个 WebP 的 demo 页。

erxuan

2017-03-09 11:05:16 +08:00

@iyangyuan 这个还好吧， 45 楼的那才叫广告。 WebP 出来是有段时间了，但普及度上还是差了点。这类的普及帖表示能接受。

happyzed

2017-03-09 11:05:19 +08:00

@designer 好多在用，我们现在在用，网易也在用

erxuan2016

2017-03-09 11:58:20 +08:00

平时多关注一下的话，能看到不少已经都用 webp 了，特别是移动端这块的

Bonaornot

2017-03-09 13:49:25 +08:00

已体验，感谢楼主，很棒。

Yourdaye

2017-03-09 14:57:59 +08:00

非常好，关键是只能在你们又拍云使用吗？

Yourdaye

2017-03-09 14:58:59 +08:00

我在七牛能不能用？

upygad

2017-03-09 16:34:45 +08:00

@Bonaornot 哈哈，谢谢支持~

upygad

2017-03-09 16:34:59 +08:00

@Yourdaye 你可以用我们又拍云啊

jacy

2017-03-09 17:10:44 +08:00

火狐路过

yvette233

2017-03-09 18:09:27 +08:00

这技术 6 ，支持下

upygad

2017-03-09 18:21:23 +08:00

@yvette233 WebP 是图片格式的未来趋势~

discrete

2017-03-10 08:47:54 +08:00 via iPad

@ryan93 快了

upygad

2017-03-10 13:38:09 +08:00

@discrete 这个可以有~

caola

2017-03-19 13:37:13 +08:00

chrome 59 以上版本将支持 APNG （体积很小的无损动态图片）有望会得到全面普及

AsisA

2017-03-21 14:02:03 +08:00

WebP 确实好，但是目前 Firefox 、 IE 、 Edge 、 Safari 都不支持