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

V2EX = way to explore

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

现在注册

已注册用户请登录

Recommended Services

Amazon Web Services

LeanCloud

New Relic

ClearDB

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

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

PRO

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

PRO

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 压缩的优势来

FurN1

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 都不支持