谈到优化网站性能时,主要目标之一就是减少要发送到浏览器的数据量(即 payload)。而当前,图片通常是页面构成中最耗费流量的部分,因此降低图片的大小是一个最为有效的优化网页前端性能的办法。

有很多工具可以压缩图像,以便减少文件大小,但仍然在一定程度上受文件类型的限制,图像编码的方式对最终生成文件的大小有很大的影响。 在这篇文章里将介绍一种被称为 WebP 的新型图片格式,旨在在不影响用户体验的情况下减少图片的大小。

一.WebP是什么?

WebP 是由谷歌开发的一种图像格式,与 JPEG 图像相比,这种格式最多可以减少图片文件大小的 34%。从而显著优化页面加载时间和带宽使用情况。

上图是 JPEG 和 80% 压缩质量的 WebP 图像之间的比较 ,来源于 Luc Viator, Creative Commons Attribution-Share Alike 3.0 Unported.

根据谷歌团队的介绍,自从去年 Chrome Web Store 转而使用 WebP 后,整个网站图片的大小平均减少 30%。这相当于每天节省了数 tb 的带宽!谷歌的 Play Store 目前也使用 WebP 格式储存图像。

WebP 格式支持无损有损的图像压缩、alpha 通道透明度、颜色配置文件、元数据和动画,这些特性使 WebP 格式成为一个为网络上所使用的图像提供的一站式的解决方案。

俯视过去几年互联网浏览趋势的演变,你就会发现,开发一个新的图片格式越来越重要。移动浏览现在占全球互联网流量的 15%,这一数字仍在上升,然而,这些移动设备的网络依赖的数据并没有以同样的速度提高。大部分人的移动浏览仍然被低带宽连接所限制,网页的加载速度慢得令人沮丧,而使用 WebP 之类技术来减少 web 页面的整体负载则有助于缓解这一现象。

二.使用 WebP 的利弊

与传统图像格式如 JPEG、PNG 或 GIF 相比,使用 WebP 有很多优势:

  • 更小的文件尺寸
  • 更高的质量——与其他相同大小不同格式的压缩图像比较
  • 完全免费——开源的 WebP 是 2010 年由谷歌根据 BSD 协议所提供的
  • 一种格式可以取代所有其他格式—— WebP 有能力取代 JPEG、 PNG 和 GIF,成为在 Web 上图像的单一格式

但是,尽管自 2010 年起 WebP 便已推出,但它的支持仍然是有限的,这是现今使用 WebP 的主要缺点:

  • 浏览器支持——WebP 目前支持桌面上的 Chrome 和 Opera 浏览器。手机支持仅限于原生的 Android 浏览器和 Android 系统上的 Chrome 浏览器,后面会介绍关于如何处理这个限制的方法。
  • 本地操作系统支持——WebP 目前不被任何操作系统原生支持。谷歌只是基本的开发了 Web 上的格式,但要将其添加到 Windows 成像组件中还需要有编解码器支持,在这里给大家附个下载链接.

: WebP 图像也可以使用在 Android 应用程序和 iOS 应用程序上,但在这篇文章中我们将先关注于 Web 应用程序.

三.真实的页面响应时间

评价网站性能好坏的一个主要指标就是页面响应时间,也就是说用户打开完整页面的时间。任何一项技术的使用都是有风险的,更何况是在公司的网站上,你必须要有一定的数据和证据来说服你的 Boss 或者相关负责人才行。

现在业内的很多前端监控工具都是基于拨测的模拟访问。假设,在网络良好、用户机器良好、用户使用pc有线网、运营商及DNS无任何问题等等情况下的访问,这是真实的用户访问么?!!

只有像类似于下图这样的针对用户访问时间的真实监控才能用来作为推动某项技术落地于网站的有力证据。

同样重要的是要定位到图片资源加载的时间,如果拖慢网站页面加载的主要原因就是图片资源的话,那就算你不抓紧的话,老板也会逼着你让你去解决这个问题,这个时候,WebP 就派上用场了。

之前做过前端优化的工作,国内外的前端性能优化工具也使用了不少,现阶段可以较好实现上面两个功能的工具有:

OneAPM Browser InsightAppDynamicsRuxit,大家有兴趣的话可以去尝试下。

四.将图像转换为WebP

现在大家应该了解了为什么 WebP 与众不同,为什么考虑在 Web 应用程序中使用它,下面介绍的是如何将你现有的图像转换为 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]
五.PageSpeed 自动转换模块

很高兴有工具可以手动将图像格式转换成 WebP

但正如我们之前看到的,并不是所有的浏览器都支持这种图像格式,因此需要一种可以预览 WebP 图像,并且使不支持 WebP 格式的浏览器可以用 JPEGs 或 PNGs 替代的服务。本来可以写一些复杂的服务器端代码,找出用户的浏览器是否支持 WebP 然后提供适当的文件,但幸运的是我们不需要这么做。

由谷歌开发的 PageSpeed 模块有一个功能,会自动将图像转换成 WebP 格式和服务端的浏览器所支持的格式。很神奇,就像魔术一样,而且设置也很简单,只需要将一行代码添加到你的主机配置中,启用这个特性。

ModPagespeedEnableFilters convert_jpeg_to_webp

:如果你不熟悉 PageSpeed 模块,可以看下这个英文的帮助文档,关于如何在 Apache Web 服务器上设置 mod_pagespeed.

使用 convert_jpeg_to_webp 选择器可以使 PageSpeed 模块在适当的地方开启图像优化和自动转换 WebP 图像的服务。最初这只适用于 JPEG 图像,但你也可以通过开启 convert_png_to_jpeg 选择器使其支持 png 图像。

ModPagespeedEnableFilters convert_png_to_jpeg

根据谷歌报导,目前有超过 300000 个网站使用 PageSpeed 模块(或服务)为用户提供 WebP 图像.

在自己的服务器上使用 PageSpeed 模块的方法非常简单,可以充分利用 WebP 的优势。

六.确定用户比例

那么现在还有一个问题,你如何确定网站的用户有多大比例支持 WebP 呢?这个也同样需要拿出一定的数据来像 Boss 证明,转化 WebP 图像这个操作是有意义的。

所以针对网站用户统计的工具就非常重要了,而且这个工具还不能是像 GA、百度统计以及 CNZZ 这样的营销工具,一定要基于真实用户访问的才可以,就像下面这个样的真实用户访问统计图。





这个要识别起来其实很难的,因为各种机型浏览器非常复杂,目前国内外涉及这个方面并且做的符合需求的工具也给大家推荐几个:

OneAPM Browser InsightAppDynamicsNewRelic

七.文末感想

本文主要介绍的就是怎样使用 WebP 图像来减小网页的总体规模,以便于降低页面加载时间。很明显,与 JPEG 或 PNG 相比 WebP 有许多优点,包括在规模和质量之间的平衡,以及这个新兴的格式支持的功能等.

虽然浏览器对 WebP 的支持仍有很多需要改进的地方,但是使用谷歌 PageSpeed 模块会使你很容易体会到 WebP 的好处,也不会疏远使用不支持这种格式的浏览器的用户。

:本文翻译自外文文章“Getting Started with the WebP Image Format” ,由 OneAPM 产品运营整理改编发布,原文地址:http://blog.teamtreehouse.com/getting-started-webp-image-format

Browser Insight 是一个基于真实用户的 Web 前端性能监控平台,能够帮大家定位网站性能瓶颈,网站加速效果可视化;支持浏览器、微信、App浏览 HTML 和 HTML5页面。想阅读更多技术文章,请访问 OneAPM 官方技术博客

本文转自 OneAPM 官方博客

网站性能优化— WebP 全方位介绍的更多相关文章

  1. 网站性能优化实战——从12.67s到1.06s的故事

    文章摘自https://juejin.im/post/5b0b7d74518825158e173a0c 作为互联网项目,最重要的便是用户体验.在举国“互联网+”的热潮中,用户至上也已经被大多数企业所接 ...

  2. asp.net网站性能优化2则

    摘要:Web服务器的性能优化有很多资料介绍了,多台主机负载均衡,查询结果的多级缓 存,数据库索引优化等都是常见的优化手段.随着后端优化空间越来越小,现在越来越多 的网站更注重前端性能的优化,就是浏览器 ...

  3. input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年,我们被耍过的bug——has

    input屏蔽历史记录   设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处   ;(function($){$.ex ...

  4. Yslow网站性能优化工具

    Yslow是一款网站性能优化的插件:

  5. 网站性能优化(Yahoo 35条)

    Yahoo 网站性能优化 35条 一.内容部分 尽量减少 HTTP请求 减少 DNS查找 避免跳转 缓存 Ajxa 推迟加载 提前加载 减少 DOM元素数量 用域名划分页面内容 使 frame数量最少 ...

  6. Yahoo团队经验:网站性能优化的34条黄金法则

    Yahoo团队总结的关于网站性能优化的经验,非常有参考价值.英文原文:http://developer.yahoo.com/performance/rules.html 1.尽量减少HTTP请求次数 ...

  7. 网站性能优化小结和spring整合redis

    现在越来越多的地方需要非关系型数据库了,最近网站优化,当然从页面到服务器做了相应的优化后,通过在线网站测试工具与之前没优化对比,发现有显著提升. 服务器优化目前主要优化tomcat,在tomcat目录 ...

  8. Yahoo网站性能优化的34条规则

    摘自:http://blog.chinaunix.net/uid/20714478/cid-74195-list-1.html Yahoo网站性能优化的34条规则 1.尽量减少HTTP请求次数 终端用 ...

  9. Yahoo! 35条网站性能优化建议

    Yahoo! 35条网站性能优化建议 Yahoo!的 Exceptional Performance团队为改善 Web性能带来最佳实践.他们为此进行了一系列的实验.开发了各种工具.写了大量的文章和博客 ...

随机推荐

  1. oralce11 过程

    PL/SQL 块的结构和实例 pl/sql(procedural language(过程化语言)/sql)是oracle在标准的sql语言上的扩展.pl/sql不仅允许嵌入sql语言,还可以定义变量和 ...

  2. linux 0.11 源码学习+ IO模型

    http://www.cnblogs.com/Fredric-2013/category/696688.html

  3. Nginx高并发配置思路(轻松应对1万并发量)

    测试机器为腾讯云服务器1核1G内存,swap分区2G,停用除SSH外的所有服务,仅保留nginx,优化思路主要包括两个层面:系统层面+nginx层面. 一.系统层面 1.调整同时打开文件数量 ulim ...

  4. jquery.qrcode和jqprint的联合使用,实现html生成二维码并打印(中文也ok)

    在公司的生产现场中,常常会在一些部品或设备上贴上二维码,用于扫描录入数据,免去手动输入的麻烦. 以前曾经做过winform的程序,生成二维码,并打印出来,使用的是zxing的类库, 但是如果二维码是附 ...

  5. Parallel类(简化Task 操作)

    Parallel类 Parallel类是对线程的一个很好抽象.该类位于System.Threading.Tasks命名空间中,提供了数据和任务并行性. 1.用Parallel.For()方法循环 // ...

  6. 使用 C# 编程对RTF文档的支持

    http://www.68design.net/Development/Aspnet/Basis-AspNet/26011-1.html

  7. [GDI+] 生成缩略图的类文件SmallImage (转载)

    直接看代码吧,大家可以直接复制使用 /// <summary> /// 类说明:SmallImage类, /// 编码日期:2012-08-20 /// 编 码 人: 苏飞 /// 联系方 ...

  8. 在.Net中进行跨线程的控件操作(上篇:Control.Invoke)

    本文的重点在于介绍如何在多线程编程中,从非UI线程上访问界面中的控件.有过多线程编程经验的人都知道,当我们在非UI线程上试图给一个界面中的控件赋值的时候,比如说label的Text属性,系统会抛出一个 ...

  9. Local IIS 7.0 - CS0016: Could not write to output file / Microsoft.Net > Framework > v4.0.30319 > Temporary ASP.NET Files

    This week I went nuts over my local IIS. I have never swore to a machine that much in my whole life. ...

  10. windows下安装wamp和wordpress

    安装wamp WAMP是一个windows上的php开发集成环境,一键安装php,apache和mysql,非常方便. 双击wampserver2.2exxxxxxxxxx.exe文件进行安装,安装过 ...