w3ctech

网站性能9号彩票优化 — WebP 全方位介绍

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

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

一.WebP是什么?

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

Compare Image

上图是 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 格式成为一个为网络上所使用的图像提供的一站式的解决方案。

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

二.使用 WebP 的利弊

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

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

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

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

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

三.真实的页面响应时间

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

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

只有像类似于下图这样的针对用户访问时间的真实监控才能用来作为推动某项9号彩票技术 落地于网站的有力证据。 网站性能9号彩票优化
— WebP 全方位介绍

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

网站性能9号彩票优化
— WebP 全方位介绍

之前做过前端9号彩票优化 的工作,国内外的前端性能9号彩票优化 9号彩票工具 也使用了不少,现阶段可以较好实现上面两个功能的9号彩票工具 有: OneAPM Browser InsightAppDynamicsRuxit,大家有兴趣的话可以去尝试下。

四.将图像转换为WebP

现在大家应该了解了为什么 WebP 与众不同,为什么考虑在 Web 应用程序中使用它,下面介绍的是如何将9号彩票你 现有的图像转换为 WebP 格式。

谷歌已开发了大量实用的命令行将图像转换为 WebP,每个人都可以从谷歌开发者网站9号彩票下载 。当9号彩票你 有一个实用程序的副本之后,9号彩票你 可能想要将实用程序的 bin 文件夹添加到您的9号彩票本地 路径,这可以通过将以下代码添加到9号彩票你 的主目录 下的.bash_profile 文件中来实现(针对 Mac/Linux 系统)。

PATH=$PATH:"/path/to/libwebp-utilities/bin"  
export PATH

9号彩票你 需要更新下引用路径来表示9号彩票你 的系统上 WebP 实用程序文件夹的位置。重新启动终端止,就能够访问命令行实用9号彩票工具 了。

另外,Mac 可以使用homebrew来安装实用程序。

brew install webp

:homebrew 不是总能匹配项目网站的最新版的。

安装实用程序完成后,就可以使用 cwebp 将 JPEG 或 PNG 图像转换成 WebP 格式。

cwebp [options] -q quality input.jpg -o output.webp

质量选项应该是 0 (差)到 100 (很好)之间的数字,典型的质量值大约是 80,但是9号彩票你 也可以多多尝试,直到文件质量和大小都让9号彩票你 满意。

完整的选项列表,可以使用此实用9号彩票工具 运行带有 -longhelp 的 cwebp 命令,或者查看9号彩票帮助 文档

:也可以使用 dwebp 实用程序将 WebP 图像转换回 PNG、PAM、PPM 或 PGM 图像。

dwebp input_file.webp [options] [-o output_file]
五.PageSpeed 自动转换模块

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

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

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

ModPagespeedEnableFilters convert_jpeg_to_webp

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

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

ModPagespeedEnableFilters convert_png_to_jpeg

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

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

六.确定用户比例

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

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

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

七.文末感想

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

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

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

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

w3ctech微信

扫码关注w3ctech微信9号彩票公众号

共收到0条回复