除了视频,图片占据了 PC 和 App 的大部分流量,为运营方带来高额的成本支出,同时过多的图片加载会影响到网站与 App 的加载速度。因此在保证图片质量的前提下缩小图片的体积就成了迫在眉睫的事情。

目前,传统的图片格式如 JPEG、PNG、GIF 等格式的图片已经没有太多可以优化的空间,而 Google 推出 WebP 格式在图片压缩方面有了新的突破。

WebP 的诞生及原理

WebP 的诞生是因为最初 Google 开发了一种基于 VP8 视频编码格式的 WebM 视频格式,Google 的工程师意识到 WebM 格式非常适合压缩关键帧,由此开发了 WebP 图片格式。

WebP 最初发布于 2010 年,主要目标是使图片质量和 JPEG 格式质量相同的情况下,减少图片文件的体积,籍此减少互联网上图片的发送时间和流量消耗。发布不久之后,WebP 便被整合到 Chrome 以及 Android 系统中,并且 Google 发布了函数库,让 iOS 应用等其他工具支持 WebP 格式。

WebP 图片格式派生自 VP8 视频编码,同时提供有损压缩和无损压缩:

  • 有损 WebP 压缩使用的图像编码方式与 VP8 视频编解码器中压缩视频关键帧的方法相同。利用图像已编码部分预测未编码部分,将图像细分来进行预测处理,分块越细预测越准确。获取编码数值后将原图像数据减去预测数据得到差值,仅对差值进行编码,以此控制大小;

  • 无损 WebP 压缩使用已知的图像片段来精确地重建新的像素,在无法找到相应的匹配值的情况下,使用本地调色板进行优化。

Webp使图片体积减少45%

与其他图片格式相比,WebP 集合了多种图片文件格式的特点。它像 JPEG 一样适合压缩照片和其他细节丰富的图片,像 GIF 一样可以显示动态图片,像 PNG 一样支持透明图像。根据 Google 的测试,WebP 无损压缩图片比 PNG 图片少了 45% 的文件体积,即使这些 PNG 图片在使用 pngcrush 和 PNGOUT 处理后,WebP 依旧可以减少 28% 的文件体积。

△ WebP 图片格式与其他图片格式对比

WebP 应用效果

随着浏览器对 WebP 支持的普及,目前也有越来越多的互联网开始使用 WebP,这里分享几个数据:

YouTube 的视频略缩图采用 WebP 后,网页加载速度提升了 10%;

Google Chrome 应用商店采用 WebP 后,每天可以节省几 TB 的带宽,页面加载时间减少了30% 左右;

花瓣网在 2017 年 5 月开启 WebP 后,在网站总体请求量没有减少的情况下,整体带宽下降了近 50%。

WebP 格式兼容情况

虽然 WebP 的使用给实际应用带来了很多好处,且 Google Chrome 和 Opera 浏览器以及许多其他工具和软件库都支持 WebP,但是到目前为止也并非所有浏览器都支持 WebP, IE、Edge、Firefox、Safari 就均未支持 WebP 格式。

△ WebP 支持的情况

如何开启 WebP 图片格式

WebP 凭借优异的图片压缩性能,以及兼备无损和有损两种压缩算法,迅速在各大网站、App 普及。那么要如何在网站中开启 WebP 格式呢?

△ 又拍云控制台 WebP 自适应开启方式

又拍云目前已经支持 WebP 图片格式转换,而且还支持 WebP 自适应功能。在又拍云后台一键开启 WebP 自适应功能,即可通过 CDN 平台智能判断客户端浏览器是否支持 WebP 解码,如果支持则返回 WebP 格式图片,如果不支持则会返回原图,在客户端以及源站无需任何改动。

参考文章:

WebP—维基百科 https://zh.wikipedia.org/wiki/WebP

A new image format for the Web https://developers.google.com/speed/webp/

相关阅读:都说 WebP 厉害,究竟厉害在哪里?

WebP 的前世今生的更多相关文章

  1. 都说 WebP 厉害,究竟厉害在哪里?

    之前在< WebP 的前世今生 >一文中,介绍了 WebP 图片格式是由 Google 基于 VP8 视频编码格式研发的,同时提供有损压缩和无损压缩两种格式,那么今天就来看看 WebP 有 ...

  2. webp图片实践之路

    最近,我们在项目中实践了webp图片,并且抽离出了工具模块,整合到了项目的基础模板中.传闻IOS10也将要支持webp,那么使用webp带来的性能提升将更加明显.估计在不久的将来,webp会成为标配. ...

  3. 【调侃】IOC前世今生

    前些天,参与了公司内部小组的一次技术交流,主要是针对<IOC与AOP>,本着学而时习之的态度及积极分享的精神,我就结合一个小故事来初浅地剖析一下我眼中的“IOC前世今生”,以方便初学者能更 ...

  4. [C#] 回眸 C# 的前世今生 - 见证 C# 6.0 的新语法特性

    回眸 C# 的前世今生 - 见证 C# 6.0 的新语法特性 序 目前最新的版本是 C# 7.0,VS 的最新版本为 Visual Studio 2017 RC,两者都尚未进入正式阶段.C# 6.0 ...

  5. docker4dotnet #1 – 前世今生 & 世界你好

    作为一名.NET Developer,这几年看着docker的流行实在是有些眼馋.可惜的是,Docker是基于Linux环境的,眼瞧着那些 java, python, node.js, go 甚至连p ...

  6. Atitit 智能云网络摄像机的前世今生与历史 优点  密码默认888888

    Atitit 智能云网络摄像机的前世今生与历史 优点  密码默认888888 用户名admin  密码aaaaaa 网络摄像机是一种结合传统摄像机与网络技术所产生的新一代摄像机,它可以将影像通过网络传 ...

  7. 【原】webp图片牛刀小试

    其实今年很早就有接触到webp图片的概念,只是一直没怎么弄.今天在一个小项目中小用了一番.总结总结 采用 what,why,how的方式来总结 what? 什么是webp图片? 维基百科:       ...

  8. 记录一下折腾webp 的过程

    最近有客户想要处理webp 的动图,情况当然是我们并不能处理webp 格式的图片.这事就交给了我来折腾,一开始想着用瑞士军刀ffmpeg.结果是折腾了差不多一天,前前后后编译了几十次ffmpeg 源码 ...

  9. 阿里开源消息中间件RocketMQ的前世今生-转自阿里中间件

    昨天,我们将分布式消息中间件RocketMQ捐赠给了开源软件基金会Apache. 孵化成功后,RocketMQ或将成为国内首个互联网中间件在Apache上的顶级项目. 消息一出,本以为群众的反应是这样 ...

随机推荐

  1. Java客户端调用.NET的WebService

    项目需要去调用.NET的WebSrevice,本身是Java,研究了半天,终于有些头绪,记下来. 1,新建.NET WebService.只在原方法上加上一个string类型的参数str [WebMe ...

  2. Spark官方2 ---------Spark 编程指南(1.5.0)

    概述 在高层次上,每个Spark应用程序都由一个运行用户main方法的driver program组成,并在集群上执行各种 parallel operations.Spark提供的主要抽象是resil ...

  3. 每周分享之 二 http协议(3)

    本次分享http协议,共分为三部分,这是第三部分,主要讲解一个完整的http请求都经过哪些步骤,当我们在地址栏中输入网址,到返回页面都经历了什么 1.输入网址 当我们在浏览器中输入网址的时候,浏览器就 ...

  4. NOIP2017SummerTraining0710

    个人感受:这套题,题目泄露,没什么好打的,第一题刚开始题目理解错误,后来还行,第二道题,打了一个50还是60分的dp,第三道暴力过了小数据,拿了200分,排名15+. 问题 A: 七天使的通讯 时间限 ...

  5. Python协程爬取妹子图(内有福利,你懂得~)

    项目说明: 1.项目介绍   本项目使用Python提供的协程+scrapy中的选择器的使用(相当好用)实现爬取妹子图的(福利图)图片,这个学会了,某榴什么的.pow(2, 10)是吧! 2.用到的知 ...

  6. JavaWeb(六)之MVC与三层架构设计

    前言 这段时间要学习hadoop,但是也希望把自己的web知识复习起来.所以花自己休息的时间把这些web的知识好好的巩固一下!没有什么可以阻挡我前进的脚步. 首先我们先了解一下: C/S:客户端 / ...

  7. MySql5.7安装及配置

    MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下公司.MySQL 最流行的关系型数据库管理系统,在 WEB 应用方面MySQL是最好的 RDBMS ...

  8. Python并发编程__多进程

    Python并发编程_多进程 multiprocessing模块介绍 python中的多线程无法利用多核优势,如果想要充分地使用多核CPU的资源(os.cpu_count()查看),在python中大 ...

  9. php环境搭建工具推荐

    楼楼最近由于一系列原因,使用了几款php环境搭建工具,安装配置方便,所以在这里推荐一下.第一款是XAMPP(网址http://www.xampps.com/),软件包原来的名字是 LAMPP,但是为了 ...

  10. 读Zepto源码之Form模块

    Form 模块处理的是表单提交.表单提交包含两部分,一部分是格式化表单数据,另一部分是触发 submit 事件,提交表单. 读 Zepto 源码系列文章已经放到了github上,欢迎star: rea ...