freejishu
喵!
Hello,WebP!
Hello,WebP!

事情的主要起因是皮皮突发奇想要写MPQ的新首页。学校实验室的网络有限速,大概只有500KB/s,而且还不止我一个人用。

为了给予足够的视觉冲击,皮皮用了一张大图作为整个主页的背景。唔,应该说是非常常见的设计,很多网站都在用。不过这个加载速度可是真的恼火到我了。

似乎皮皮头一次脱离了MDL,感觉啥都不顺手了。

 

整体的设计思路很简单:一个大图,中间用大字打出文案(很不习惯用这种“官方词”,不过实在想不起来其他词语了),下面下载,边栏是其他信息。文案有多个,联动到背景图就要做轮播。

第一波找到的图片整体的效果还是可以的,但是放到服务器上就出问题了:加载速度实在太慢,慢到我个人都无法接受。

这些背景图片大概都在1MB左右,这样大概需要3s左右。初始设定的轮播周期是5s。额滴神啊,一张图完美的看2秒就biu的飞走了,实在是不友好。更何况如果某些亲使用移动网络且信号恰好不那么好呢?

先不考虑改变5秒轮播这种设定,试着能不能直接根除。根除那就是减少传输数据流。

经过N轮PS的“专业”压缩(这块不是黑,是真的不知道是否专业),符合我的电脑屏幕分辨率(1920*1080)的jpg还是占到了600kb左右,令人十分不爽。粗略计算,600kb*5张=3MB,对于流量党来讲应该是十分不友好的。

要么放弃图片质量,要么就这样吧。

 


(原来分割线是hr,我今天才知道hhhhh)

 

Hello,WebP!

又拍云对于“图片压缩”做过一期专门的宣传,里面提到过一种新的图片格式的相关内容。之前也从哪看到过这个词。

没错,他叫WebP,一个由谷歌开发,旨在压缩图片体积大小的一种新“图片格式”。

我们来做一组测试。

https://www.freejishu.com/wp-content/uploads/2017/05/TIM截图20170509144954.png

https://www.freejishu.com/wp-content/uploads/2017/05/TIM截图20170509150032.png

依照我目前对于图片的理解,这个体积大小已经有点颠覆对于图片的理解了。这一组测试将帮助我们了解WebP的原理。

看WebP之前,我们先来看看JPG。这个原理相信很多人都非常清楚,主要是正反余弦转换压缩,配上区块量化(DCT运算)、N(一般为8)像素格栅、色彩优化等小伎俩,把bmp之类的文件损失不大的进行一次压缩,但是属于有损。

WebP同样也是有损。他“损图”的程度和JPG是不相上下,所以质量上和JPG一样可以接受。

但是这有点极端的体积是怎么弄出来的?

 


 

黑科技一:心灵感应

怎么说,我并不是创造者,因此我们还是要参考一下相关文档才能直到WebP对图片动了什么手脚。

首先明白一个东西:视觉上,大多数图片中的大多数几何概型的某些部分(甚至全部)是可以使用某些几何概形“大概”的描绘出来的。

所有意思压缩到一个句子里显得句子有点长,但是道理很容易明白,你身边周围的东西都是有“形状”的,日常生活中的很多形状我们是可以形容出来的:比如杯子是圆的,我是方的

WebP也就利用了这一点认知,引进新模型,“预测(感知)”*。

图片内可以识别为“线条”的,我感知你的“大概” **;可以识别为“几何概型”的,我感知你的“坐标” ***;可以识别为标准图像的,我感知你的“心灵” ****。

当我吃透了你的心,我就能很简单的描述出你这个人了。

原图像素块里,每个4×4的子块均包含有一个预测后产生的模型,这个模型是预测模型。(又可以叫做过滤)。PNG大量的使用了“过滤”,对象是行;WebP则是成块的过滤。

在一个块周围定义两组像素:在它上面的一行叫“A”,在它左边的一行叫“L”。

以“A”和“L”为基础,编码器将它们放在4×4的像素块中并填满,然后确定哪一块生成的值最接近原始块的值。以此类推,并预测每一块。

 

*:原文大概描述的意思是预测,不过这里我译作“感知”,目的是更好的理解。如果和Ufldl有概念上的冲突,那上面看看就好。

**:感知“大概”,这里的算法仅仅需要很简单的识别就“压缩”很多东西。

***:感知“坐标”:目前还没实现或者普通计算机转换的时候还做不到。

****:实在没其他可以一起说的特征了,夸张一下。


 

只有这些?

按照前面的说法,如果一张图片内所有的像素都无法预测,那么WebP压缩是不是就报废了?

再来看一组测试。我们生成了一张图片,为了保证“不可预测”,任意一个像素和其周围7*7方格内的颜色值相差在218727以上。(颜色值算法:R+G*256+B*256*256)

然后我们发现。。不论怎么生成,从直观的视觉上看就是这样啊。好了,开始测试。

https://www.freejishu.com/wp-content/uploads/2017/05/TIM截图20170509160729.png

将图片放大500%:

https://www.freejishu.com/wp-content/uploads/2017/05/TIM截图20170509161222.png https://www.freejishu.com/wp-content/uploads/2017/05/TIM截图20170509161214.png

(第一张为压缩前,第二张为压缩后)

结果出人意料。明明“无法预测”,这喵高的压缩率从哪来的??

首先说明一点,1.3M是生成后完全没有压缩。经过一轮JPG压缩后大概在700KB左右*****,生成的WebP图片大小和这个是一样的。图片质量上,WebP表现的似乎有点烂。******

看起来黑科技不止“感知”!

 

*****:软件之间输出的图片质量或者大小差异比较大,这里取的是看着最均衡的一张。

******:获取500%时应该经过了某些视觉插值处理,表现仅供参考。但这个并不是拒绝使用WebP的理由,因为大多数人不会500%看图,而WebP在100%下表现并不逊色。

 


 

黑科技二:JPGify it

WebP编码的最后编码似乎有点像JPG:

  • 对于块里剩余的值进行DCT过滤
  • 量化
  • 重新排序,然后送到一个静态压缩器里

不同的事情:

1、在DCT阶段并不是原始数据块进行数据输入,而是预测后的数据。
2、WebP所使用的静态压缩器是算术压缩器,效果JPG用的霍夫曼编码器类似,但这里针对WebP的预测做了超级规模的优化。这个超级规模的优化器也便是核心。总的来讲,有点像图片的二次压缩。

 


 

WebP目前只能在Chrome或者其内核和Edge上使用(苹果的浏览器暂时还不行),所以从平台上讲普及率还没有想象中的那么高。App则可以通过以开发包的形式实现。

通过WebP,这个新首页有了更快的加载速度,以及更好的体验。

 

资料引用

https://developers.google.com/speed/webp/

http://isux.tencent.com/introduction-of-webp.html

赞赏

此处可能有用于缓解服务器资金压力的广告,请注意不要误点不需要的广告

发表评论

textsms
account_circle
email

  • https://secure.gravatar.com/avatar/305772106b200d6fde4f9190015cea47?s=80&d=mm&r=g
    三五

    真是学无止境!

    1年前回复
  • https://secure.gravatar.com/avatar/cce401cd496f57b30287d1d2256739ca?s=80&d=mm&r=g

    博主,你的博客无法访问了!首页打开没内容,一直是一个加载的心跳球动画,好像是jquery等几个资源引用失败导致的
    这两个地址: https://fimg.mypcqq.cc/ https://fonts.geekzu.org/ 已经404了
    现在这个页面是我废好大功夫手动找到直接访问的,样式乱七八糟但起码还能用,于是在这里给你回复了
    希望你能看到

    1年前回复
    • https://secure.gravatar.com/avatar/998a4820101c5491c986a7faf10457c8?s=80&d=mm&r=g
      freejishu博主

      @正逍遥0716: 很抱歉博主今天刚刚考完试。预计还需要1-2天才能有电脑(高中狗)。回头我会查看一下。

      1年前回复
      • https://secure.gravatar.com/avatar/cce401cd496f57b30287d1d2256739ca?s=80&d=mm&r=g

        @freejishu: 高中啊,好厉害,我都大学了。其实也没什么可查的,mypcqq已经停止服务了,换成bootsdn(国内)或jsdelivr吧。fonts.geekzu.org的话,换成 fonts.lug.ustc.edu.cn ,中科大的谷歌字库镜像

        1年前回复
  • https://secure.gravatar.com/avatar/305772106b200d6fde4f9190015cea47?s=80&d=mm&r=g

    抱着学习的态度来看看

    1年前回复
  • https://secure.gravatar.com/avatar/c67ee1f33c3b645e890caff731b84cba?s=80&d=mm&r=g

    腾讯的 TPG 不知道开不开源(是谁说不开源来着的)……
    不过看完这篇文章我也想改用 webp 了……

    1年前回复
    • https://secure.gravatar.com/avatar/998a4820101c5491c986a7faf10457c8?s=80&d=mm&r=g
      freejishu博主

      @远哥制造: 理论上腾讯家这种东西开源是会被喷的23333
      突然发现忘了点击批准了
      webp理论上讲就是个趋势,就是当前浏览器支持还差点事情。目前看最大的对手还是苹果吧。

      1年前回复
  • https://secure.gravatar.com/avatar/d5e9a2faeb74f580edf78a4493623690?s=80&d=mm&r=g

    腾讯前几天刚出了一个JPG,
    压缩率比JPEG还大 _(:з」∠)_

    2年前回复

freejishu的美丽世界

Hello,WebP!
事情的主要起因是皮皮突发奇想要写MPQ的新首页。学校实验室的网络有限速,大概只有500KB/s,而且还不止我一个人用。 为了给予足够的视觉冲击,皮皮用了一张大图作为整个主页的背景。唔…
扫描二维码继续阅读
2017-05-09