一.WebP 的由来
现代图像压缩技术对我们的生活方式影响很大。数码相机能将上千张高质量图片存储到一张内存卡里、智能手机可以与邻近设备快速分享高分辨率的图片 、网站与手机等移动设备能快速展示各种富媒体。
然而，如果图片只能以最原始的格式进行存储的话 ，以上所有都只是纸上空谈 。
在 APP 、浏览器或 PC 端、还是移动端等各种设备里 ，通常使用 JPEG 这种损耗较大的格式对图片进行高效率的管理，而使用 PNG 这种失真较小的格式传送图表 、图标以及图画等 。
然而 ，在过去几年间 ，尽管视频的格式发展迅速，图像格式却有些不尽人意。
直到 2010 年 ，谷歌推出了全新的 WebP（发音为 「Weppy」）格式 ，一种开源且同时支持有损与无损压缩的图片格式，才改善了这一现状 。
WebP 格式文件要比常用的 JEPG 与 PNG 格式小得多 ，而且还支持许多高级特性 ，比如有损模式下的透明性，在低质 、高压缩设置下更为养眼的图片质量等 。
二.WebP 的意义
前两年 Google 进行了一个统计调查：如果亚马逊页面加载每慢 100ms ，将影响他们 1% 的收入；如果谷歌页面加载慢 500ms ，流量将锐减 20%，这个数据到现在只会更加恐怖！
评价网站性能好坏的一个主要指标就是页面响应时间，也就是说用户打开完整页面的时间。IT 业内的人一般都了解 ，普通的基于 JEPG 还有 PNG 图片格式的网页 ，其图片资源加载往往都占据了页面耗时的主要部分，技术运维人员需要做的就是要 BOSS 知道这个事实而已 ，进而推动 WebP 技术的使用 。
现在业内的很多前端监控工具都是基于拨测的模拟访问 。假设 ，在网络良好、用户机器良好 、用户使用 pc 有线网 、运营商及 DNS 无任何问题等等情况下的访问，这是真实的用户访问么？！！
像下图这样的 ，针对用户访问页面时间的真实监控 ，才能用来作为推动某项技术落地于网站的有力证据。
然后，再通过类似资源加载耗时这样的功能 ，就像上面说的那样 ，基于真实的用户体验来抓出拖慢页面响应时间的真正元凶——图片！
笔者之前做过前端优化的工作，国内外的前端性能优化工具也使用了不少 ，最近也询问了周围做性能优化的朋友 ，现阶段可以较好实现上面两个功能的工具有： OneAPM Browser Insight、AppDynamics 、Ruxit，大家有兴趣的话可以去尝试下 。
WebP 的意义就在于此，通过较小的文件来降低带宽的消耗 ，为线上服务降低流量成本 ，更快的展示和更短的图像共享时间，为网站及移动应用用户带去更好的用户体验 。
在本文中 ，主要介绍 Cloudinary 基于云的即时 WebP 图像生成技术以及 Google 开发的通过代码行来实现的 WebP 图像的生成。
三.WebP 的强大优势
1.同等质量但是图片更小
通过 Cloudinary 这个软件 ，简单地改变 CDN 提供的 URL 的文件扩展名，就可以进行图像格式的即时转换 。
例如 ，有一张以公共 ID 名 「sample」 上传到云的 JPG 图片 ，现在我们要在网站上嵌入该图像 300x200 px 的缩略图 。
下图 1 是由 Cloudinary 使用 JPG 格式生成的，而图 2 是使用 WebP 格式生成的。(注意 ，通过谷歌 Chrome 浏览器才能正确地查看 WebP 图像）
图 1.sample.jpg 27.9KB JPG
图2.sample.webp 12.4KB WebP
如果检查网络数据 ，你会发现，JPG 文件是 27.9 KB 而 WebP 文件只有 12.4 KB ，而两张图片看起来几乎相同。这意味着节省了56%的带宽 。如果你的网站包含了大量图片 ，就可以节省一半的流量，让你的网站以两倍于之前的速度加载，访问者肯定更加高兴 。
如果使用客户端库 ，既可以在公共 ID 后面连接「.webp」 ，也可以将「format」参数设置为「webp」。例如，在 Ruby on Rails 和 PHP 中：
<%= cl_image_tag("sample.webp", :crop => :scale, :width => 300) %> "webp", "width" => 300, "crop" => "scale")); ?>
2.压缩之后质量无明显变化！
JPG 和 WebP 都支持有损压缩格式 ，允许你控制目标图像的质量 。
目标图像的质量和文件大小之间存在明显的折中关系 。在很多情况下 ，可以很大程度降低图像的质量和尺寸，而用户却几乎不会注意到其中的差别。
不过 ，JPEG 格式的图片在质量较低时会有明显的缺陷 ，尤其是当图片包含微小的细节或文本时，但 WebP 格式则没有明显的缺陷 ，但也会在低质量设置时产生稍微模糊的图像 。
你可以将 Cloudinary 的「quality」参数（或者 URL 的「q」参数）设置为1到99之间的任何值（默认值为90）来自己测试一下 。
下面的例子将样本图片的质量设置为30%。图一是 JPG 图片的效果 ，图二是 WebP 图片的效果 。
图1.sample.jpg 10.6KB
图2.sample.webp 7.1KB WebP
显然，只有眼尖的人才能察觉质量上的差别 ，质量降低后的图片仍旧保持了不错的观感 ，WebP 格式图片在这一点上尤为突出 。30% 的质量设置下，JPG 图片的大小为 10.6KB，而 WebP 仅为 7.1KB。
相比之下 ，WebP 格式的图片减小了33% 的大小 ，而与 JPG 格式的原图相比，低质量的 WebP 格式图片只占了其四分之一大小 。
下面的 Node.js 与 Django 示例会产生与上例效果相似的交付 URL 。
cloudinary.image("sample.webp", { width: 300, crop: 「scale」, quality: 30 }); cloudinary.CloudinaryImage("sample.webp").image(width = 300, crop = 'scale', quality = 30)
3.完美支持无损 WebP 图像
以上所有例子中 ，WebP 都是有损格式 ，只保留了 90% 或更低的质量。
WebP 同样支持一如 PNG 格式的无损模式，这种无损模式对于栅格化的矢量图形非常有用（比如 ，logo） ，因为这类图像一旦保存为有损模式，就会出现明显的质量下降。
想要生成无损的 WebP 文件 ，只需将 Cloudinary 的 「quality」 变量设置为 100:
图1.cloudinary_icon.webp
在 Ruby on Rails 也是一样：
<%= cl_image_tag("sample.webp", :quality => 100) %> 四.确定用户比例
正如上面提到的 ，并不是所有的浏览器都支持的 WebP 图片格式 。
目前支持 WebP 的主要是 Chrome，Android 4.0+ 版本还有 Opera 浏览器 。这确实是限制 WebP 推广的最大问题 ，技术人员需要有选择性地决定何时利用它。
但 ，在另一方面讲，Chrome 是相当受欢迎，尤其是针对 IT 人员或者各个行业的高素质人员来讲 ，所以 ，即使只为了提升 Chrome 用户的用户体验并且节省 Chrome 浏览器所消耗的那一部分带宽，使用 WebP 仍然是值得的 。
那么问题来了 ，尽管 Chrome 浏览器和 Android 系统的普及程度是人尽皆知的 ，关于网站访客的浏览器比例，技术人员同样需要拿出一定的数据来像 Boss 证明 ，转化 WebP 图像这个操作是有意义的 。
所以针对网站用户统计的工具就非常重要了 ，而且这个工具还不能是像 GA 、百度统计以及 CNZZ 这样的营销工具，一定要基于真实用户访问的用户访问统计图才有说服力。
这个要识别起来其实很难的 ，因为各种机型浏览器非常复杂 ，目前国内外 APM （性能优化）领域涉及这个方面并且做的符合需求的工具也给大家推荐几个： OneAPM Browser Insight、AppDynamics 、NewRelic
五.通过命令行将图像转换为WebP
除了可以通过 Cloudinary 这款软件来生成 WebP 图片之外，还可以通过代码命令来生成相应的 WebP 图片 。
谷歌已开发了大量实用的命令行将图像转换为 WebP ，每个人都可以从谷歌开发者网站下载 。当你有一个实用程序的副本之后 ，你可能想要将实用程序的 bin 文件夹添加到您的本地路径，这可以通过将以下代码添加到你的主目录 下的.bash_profile 文件中来实现(针对 Mac/Linux 系统)。
PATH=$PATH:"/path/to/libwebp-utilities/bin" export PATH
你需要更新下引用路径来表示你的系统上 WebP 实用程序文件夹的位置 。重新启动终端止，就能够访问命令行实用工具了 。
另外 ，Mac 可以使用homebrew来安装实用程序。
brew install webp
注:homebrew 不是总能匹配项目网站的最新版的 。
安装实用程序完成后 ，就可以使用 cwebp 将 JPEG 或 PNG 图像转换成 WebP 格式 。
cwebp [options] -q quality input.jpg -o output.webp
质量选项应该是 0 (差)到 100 (很好)之间的数字，典型的质量值大约是 80 ，但是你也可以多多尝试 ，直到文件质量和大小都让你满意。
完整的选项列表，可以使用此实用工具运行带有 -longhelp 的 cwebp 命令 ，或者查看帮助文档。
注:也可以使用 dwebp 实用程序将 WebP 图像转换回 PNG 、PAM、PPM 或 PGM 图像 。
dwebp input_file.webp [options] [-o output_file] 六.基于访客浏览器的动态 WebP 生成
就像上文说过的 ，为了仅针对 Chrome/Android4/Opera 的访客生成 WebP 图像，你可以使用 JS 代码根据访客的浏览器信息加载图像 。
Cloudinary 的 jQuery 插件能帮助你动态地生成展示 URL ，后者会即时地生成图片 ，再通过带有高级缓存的 CDN 快速地展示结果。
例如，你可以在 HTML 页面定义图片标签 ，将 「src」 属性设置为空白图片 ，将 「data-src」 属性设置为已经上传至 Cloudinary 的实际图片的公共 ID 值 。
<img src="blank.png" width="150" height="100" data-crop="fill" data-src="sample.jpg"/>
下面的 jQuery 代码会将所有图片标签转换为动态生成的图像 URL，而不是占位的空白图片 。
$('img').webpify();
该页面加载很快，无需等待图片加载。之后 ，上面的 jQuery 代码会动态地更新图片标签 ，根据访客浏览器支持 WebP 格式与否，生成 WebP 图像或 JPG 图像 。
Chrome 下的结果：
<img src="">
其他浏览器下的结果：
<img src="https://res.cloudinary.com/demo/image/upload/c_fill,h_100,w_150/sample.jpg" width="150" height="100" data-crop="fill" data-src="sample.jpg">
欲知有关 jQuery 插件的更多细节 ，可以点此查看文档 。
七.总结
现如今 ，网站与移动应用的富媒体内容越来越丰富，追踪带宽使用情况、优化下载和上传时间 ，对于优化用户体验都是至关重要的。很明显 ，与 JPEG 或 PNG 相比 包括在图片大小和质量之间的平衡，以及这个新兴的格式支持的功能等方面来讲 ，WebP 有许多优点 。
WebP 格式是帮助你优化用户体验的又一利器 ，虽然浏览器对 WebP 的支持仍有很多需要改进的地方，但是恰当是使用一些工具和技术 ，很容易体会到 WebP 的好处 ，也不会疏远使用不支持这种格式的浏览器的用户 。
注：本文改编自外文文章“How to support WebP images, save bandwidth and improve user experience” ，by Nadav Soferman ,由 OneAPM 产品运营整理改编发布.
原文地址: https://cloudinary.com/blog/how_to_support_webp_images_save_bandwidth_and_improve_user_performance
Browser Insight是一个基于真实用户的 Web 前端性能监控平台，能够帮大家定位网站性能瓶颈 ，网站加速效果可视化；支持浏览器 、微信 、App浏览 HTML 和 HTML5页面。想阅读更多技术文章 ，请访问 OneAPM 官方技术博客 。
本文来自作者[恭喜发财]投稿，不代表华智号立场，如若转载，请注明出处：https://www.bjxhzyykj.cn/miao/7802.html
评论列表（4条）
我是华智号的签约作者“恭喜发财”！
希望本篇文章《查看jquery版本(jquery获取html内容)》能对你有所帮助！
本站[华智号]内容主要涵盖：华智号,生活百科,小常识,生活小窍门,百科大全,经验网
本文概览： 一.WebP的由来 现代图像压缩技术对我们的生活方式影响很大。数码相机能将上千张高质量图片存储到一张内存卡里...