其中包括在空间装饰头图中应用WebP格式的图片,

时间:2020-05-03 13:28来源:澳门美高梅游戏
春节9天长假过去了,第一次在深圳过年,感觉不一样,没有老家的热闹气氛,在深圳过年,人丁稀少啊,还是想念家人,希望这是第一次也是最后一次在外过年。 『 序言 』前段时间

春节9天长假过去了,第一次在深圳过年,感觉不一样,没有老家的热闹气氛,在深圳过年,人丁稀少啊,还是想念家人,希望这是第一次也是最后一次在外过年。

序言』前段时间QQ空间的前端团队针对空间做了一番流量带宽优化,其中包括在空间装饰头图中应用WebP格式的图片。其实很早之前空间的相册就已经接入了WebP格式的图片,由于支持度还不是很高,所以其他产品线也一直没应用,这次实施也带动了其他产品的前端同学们重新对这一块领域进行优化。于是我们产生了制作一套完整的前端图片优化方案的想法,智图系统因此应运而生。先上两张图,对比一下WebP格式图片的压缩威力。

首先提到webp 我们有可能会感到陌生,那是因为我们或许在项目中还没有用到这个技术,今天我们就一起来了解一下这个新生 “ 儿” 吧!

春节后第一天上班,开门利和红包还是挺给力的,oo 。别了2015,2016迎来了新的挑战,希望大家一起再接再厉,业绩更上一层楼吧。

澳门美高梅游戏 1

1、什么是webp呢?

WebP(发音 weppy,项目主页),是一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8。根据 Google 的测试,无损压缩后的 WebP 比 PNG 文件少了 45% 的文件大小,即使这些 PNG 文件经过其他压缩工具压缩之后,WebP 还是可以减少 28% 的文件大小。

2010 年发布的 WebP 已经不算是新鲜事物了,在 Google 的明星产品如 Youtube、Gmail、Google Play 中都可以看到 WebP 的身影,而 Chrome 网上商店甚至已完全使用了 WebP。国外公司如 Facebook、ebay 和国内公司如腾讯、淘宝、美团等也早已尝鲜。目前 WebP 也在我厂很多的项目中得到应用,如腾讯新闻客户端、腾讯网、QQ空间等,同时也有一些针对 WebP 的图片格式转换工具,如 智图,iSparta 等。

废话少说了,直击今日主题,今天想推荐一个图片优化平台,感觉还不错吧,先前在网上也用过很多的图片优化工具,比如cssgaga等等,相比起来各有各的好处,下面就介绍下:

smart_picture_1.png

2、webp的优势?

上图说明

澳门美高梅游戏 2

Paste_Image.png

由此我们可以得出结论:

1、PNG 转 WebP 的压缩率要高于 PNG 原图压缩率,同样支持有损与无损压缩
2、转换后的 WebP 体积大幅减少,图片质量也得到保障(同时肉眼几乎无法看出差异)
3、转换后的 WebP 支持 Alpha 透明和 24-bit 颜色数,不存在 PNG8 色彩不够丰富和在浏览器中可能会出现毛边的问题

WebP 的优势体现在它具有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性,在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。

智图平台是什么?

智图(http://zhitu.tencent.com)

3、色彩数的选择

在 JPEG 和 PNG 格式的选择经验上可以知道,对于色彩复杂的图片,一般使用 JPEG 格式,而对于色彩单一的图片,使用 PNG 格式。可见色彩数会影响图片的压缩效果。于是我们通过 Photoshop 中的色阶分离功能调整表情图片的色彩数,在其他因素保持不变的前提下对比不同色彩数对于 WebP 有损无损压缩的影响。

智图是腾讯ISUX前端团队开发的一个专门用于图片压缩和图片格式转换的平台,其功能包括针对png,jpeg,gif等各类格式图片的压缩,以及为上传图片自动选择最优的图片格式。同时,智图平台还会为用户转换一份webp格式的图片。

所谓智图,我们将之称为Smart Image,智能图片优化平台,其实是智能转换图片格式的简称。这里可能有人会提出疑问,转换图片格式,不就是JPEG To PNG 或者 PNG To JPEG嘛。是的,但我们在压缩图片的时候,往往根据以往经验或感觉去压然后反复比较,在质量和体积间难以达到平衡,而有了智图,你不需要再犹豫,把图片交给智图,智图自动识别最优格式并压缩处理。其实我们知道图片都是有一定压缩空间的,并且一张图片合适的格式取决于图片的尺寸,色值,透明度等属性。智图就是根据一张图片的上述属性,进行对比判断,输出合适的图片格式并进行压缩的一个图片优化平台。使用智图,你可以:

4、图片的规格

算法这东西我是看不懂,但是看到大牛们的文章,在这里还是要跟大家分享一下
通过阅读文献了解到 WebP 使用的是 Fancy 采样算法,既然是采样算法必然有采样区块,而 JPEG 的采样区块是 8*澳门美高梅游戏 ,8,对于原始图片的长宽不是 8 的倍数,都需要先补成 8 的倍数,使其能一块块的处理,所以对于 8 的整数倍的图片,压缩会更高效。

那么 WebP 的采样区块会是多少?我们在其他因素保持不变的前提下改变图片规格,选取了 200200 附近多个规格值,得到了一些数据。将数据可视化之后可以看到凡是以 1616 倍数(160160、176176、192192、256256)为规格的图片,有损压缩的比例都明显大于以 44 或 88 的倍数为规格的图片。

综合结论:
对于不同场景下 WebP 的使用,我们总结了一些解决方案,如下:
1、若使用场景是浏览器,可以:
JavaScript 能力检测,对支持 WebP 的用户输出 WebP 图片
使用 WebP 支持插件:WebPJS

2、若使用场景是 App,可以:
Android 4.0 以下 WebP 解析库(链接)
iOS WebP 解析库(链接)

3、转换工具:
智图
iSparta

iSparta 是我们组针对 WebP 和 APNG 两种新型图片格式的转化而开发的一款桌面应用,直接图片批量转换为 WebP,同时提供多种参数配置

如何使用智图平台?

  • 更优——为你的图片智能选择合适的图片格式
  • 更快——为你压缩图片以便节省带宽优化体验
  • 更高——为你提供WebP图片让你的站点高大上

您只需要将要优化的图片拉至首页的拖拽区域后,系统会自动上传图片并经过智图压缩,返回新的图片。您也可以根据自己的实际使用情况选择不同的压缩率。

功能』首先看下智图系统的界面

智图好在哪里?

澳门美高梅游戏 3

智图能够自动为您选择压缩率压缩并且在合适的情况下为您选择正确的图片格式。与此同时,智图也会为您上传的图片转换一份webP格式的图片。

smart_picture_2.png

编辑:澳门美高梅游戏 本文来源:其中包括在空间装饰头图中应用WebP格式的图片,

关键词: