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,一个由谷歌开发,旨在压缩图片体积大小的一种新“图片格式”。

我们来做一组测试。

依照我目前对于图片的理解,这个体积大小已经有点颠覆对于图片的理解了。这一组测试将帮助我们了解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)

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

将图片放大500%:

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

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

首先说明一点,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

  1. 三五说道:

    真是学无止境!

  2. 正逍遥0716说道:

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

    1. freejishu说道:

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

      1. 正逍遥0716说道:

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

        1. freejishu说道:

          那个域名是我在管...并没有停止服务。
          MPQ只是暂时没有新功能加了,就一直在平滑优化

          1. 正逍遥0716说道:

            啊咧,是这样吗?我这里访问不了啊
            GET https://fimg.mypcqq.cc/ net::ERR_CONNECTION_RESET
            GET https://fonts.geekzu.org/ 404 ()

          2. freejishu说道:

            容我14号放假了看看吧qaq需要的话会联系你

          3. freejishu说道:

            GET https://fimg.mypcqq.cc/ net::ERR_CONNECTION_RESET 如果长时间出现这个问题还请继续留言跟踪调查,看了一下,又拍云的CDN没问题。
            GET https://fonts.geekzu.org/ 404 () 已经替换镜像

            驳回 | 回复 | 快速编辑 | 编辑 | 历史 | 垃圾评论

          4. 正逍遥0716说道:

            ok&3ks,没问题了。然后有一个建议,你那个图床服务很不错,但那个api返还信息有点少,能不能添加些诸如图片描述、原作者ID之类的?还有https访问的话有隐私错误,证书没弄好?

          5. 正逍遥0716说道:

            擦又不行了, jQuery 又获取不到了。mypcqq到底什么情况
            $ is not defined
            jq is not a function

            GET https://fimg.mypcqq.cc/ net::ERR_CONNECTION_RESET

          6. freejishu说道:

            http://pubstatic.b0.upaiyun.com/cdn-health.html
            下次再坏的时候做一下又拍云的检测,结果可以发我邮箱或者任意的联系方式。我去怼客服。(这可能需要一阵x

  3. 说道:

    抱着学习的态度来看看

  4. 远哥制造说道:

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

    1. freejishu说道:

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

  5. Seth说道:

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

    1. Seth说道:

      说错说错 比webp还大
      为什么评论不能编辑 (:з っ )っ

      1. freejishu说道:

        因为我还没审核通过

    2. freejishu说道:

      有空去了解一下相关的23333

      1. freejishu说道:

        TPG不是游戏的那啥么

          1. freejishu说道:

            噗 瓦特系列
            总觉得网上爆出来的编码原理不科学
            看起来邮件系统还能用,暑假把邮件模板重新写写顺道从某些地方抄点css过来

发表评论

电子邮件地址不会被公开。 必填项已用*标注