实战技术：提升网站用户体验—WebP 图片的高效使用

个人博客导航页（点击右侧链接即可打开个人博客）：大牛带你入门技术栈

一.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) %>

<pre> <?php echo cl_image_tag("sample", array("format" => "webp", "width" => 300, "crop" => "scale")); ?> </pre>

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="http://res.cloudinary.com/demo/image/upload/c_fill,h_100,w_150/sample.webp"width="150" height="100" data-crop="fill" data-src="sample.jpg">

其他浏览器下的结果：

<img src="http://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 的好处，也不会疏远使用不支持这种格式的浏览器的用户。

附Java/C/C++/机器学习/算法与数据结构/前端/安卓/Python/程序员必读/书籍书单大全：

（点击右侧即可打开个人博客内有干货）：技术干货小栈
=====>>①【Java大牛带你入门到进阶之路】<<====
=====>>②【算法数据结构+acm大牛带你入门到进阶之路】<<===
=====>>③【数据库大牛带你入门到进阶之路】<<=====
=====>>④【Web前端大牛带你入门到进阶之路】<<====
=====>>⑤【机器学习和python大牛带你入门到进阶之路】<<====
=====>>⑥【架构师大牛带你入门到进阶之路】<<=====
=====>>⑦【C++大牛带你入门到进阶之路】<<====
=====>>⑧【ios大牛带你入门到进阶之路】<<====
=====>>⑨【Web安全大牛带你入门到进阶之路】<<=====
=====>>⑩【Linux和操作系统大牛带你入门到进阶之路】<<=====

天下没有不劳而获的果实，望各位年轻的朋友，想学技术的朋友，在决心扎入技术道路的路上披荆斩棘，把书弄懂了，再去敲代码，把原理弄懂了，再去实践，将会带给你的人生，你的工作，你的未来一个美梦。

实战技术：提升网站用户体验—WebP 图片的高效使用相关推荐

优秀分层UI设计模板解析提升网站用户体验，5个UI设计技巧轻松搞定
UI设计时刻影响用户体验.在构成 UI 的所有因素中,比如浏览网站.阅读内容的难易程度,都会导致用户对网站产生或好或坏的主观感受,而这种感觉影响用户决定是否按照设计师的期望进行接下来的操作并达成销售. ...
python seo cms_巧用帝国CMS系统变量提升网站用户体验完善SEO优化
使用帝国CMS的小伙伴们可能都会在帝国CMS手册里面看到一些自带的系统变量,举个例子,也是最近刚开始使用的一个系统变量即:$GLOBALS[navclassid]这个变量意思是当前栏目id,$GLOB ...
如何快速提高网站用户体验之3大绝招：快、准、狠
流量的重要性,相信大家都明白!网上也有成千上万的教程,引导大家如何做好网站的引流工作,可是我们最终的目的不只是将用户引导进来而已,更重要的是怎么留住用户,才是我们引流的目的.因此,大家在引流时千万不要 ...
注重网站用户体验优化就要避开前方弯道
在网站建设之初,摆在建设人员眼前的就是访问网站用户的用户体验问题,网站建设以网站用户访问体验为基,保证自家网站良好的用户体验自然与其他网站有了优势.但毕竟不是人人都可以拥有这样的优质网站,如果我们的网 ...
Gomez中国网站用户体验排行：门户网站和讯第一
电子商务从来没有像今天这样融入我们的工作生活,网站性能也从来没有像今天这样影响着电子企业的发展.通过分析超过150家网站的1.5亿次页面点击量,Gomez Benchmarks发现面响应时间从2秒增加 ...
优化网站设计方案提升网站用户回头率
在开展网站制作设计方案同时除了要确保网站用户访问量之外,还需要确保提高网站用户回头率,增加用户的二次访问量,提升网站的访问满意度,这会让网站在行业整体发展趋势中更占优势.不过,想要产生这样的回头率一定 ...
文案写作软件_11种可改善网站用户体验的文案写作技术
文案写作软件 Written by John Stevens 约翰·史蒂文斯 ( John Stevens)撰写 When we talk about user experience and your ...
如何设计一个完整的交互流程，提升产品用户体验
交互流程设计是一项关乎用户体验的重要工作.通过设计和规划用户与产品或服务的交互方式和流程,我们可以提高用户的满意度和使用效果.在本文中,我们将深入探讨交互流程设计的关键要素以及其对用户体验的重要性. ...
转载 - 使用HTML5、CSS3和jQuery增强网站用户体验
记得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验?是不是立刻就想到了flash实现?这彷佛年代久远的事了.使用现在最流行的Web技术HTML5,CSS3和jQuery,同样也可以实现类 ...

实战技术：提升网站用户体验—WebP 图片的高效使用

天下没有不劳而获的果实，望各位年轻的朋友，想学技术的朋友，在决心扎入技术道路的路上披荆斩棘，把书弄懂了，再去敲代码，把原理弄懂了，再去实践，将会带给你的人生，你的工作，你的未来一个美梦。

实战技术：提升网站用户体验—WebP 图片的高效使用相关推荐

最新文章

热门文章