南京网站制作系统,东莞市住建局官网,牛网网站建设,做网站那里好作者 | Jackson编辑 | 尾尾 不论是 PC 还是移动端#xff0c;图片一直占据着页面流量的大头#xff0c;在图片的大小和质量之间如何权衡#xff0c;成为了长期困扰开发者们的问题。而 WebP 技术的出现#xff0c;为解决该问题提供了好的方案。本文将为大家详细介绍 WebP 技… 作者 | Jackson编辑 | 尾尾 不论是 PC 还是移动端图片一直占据着页面流量的大头在图片的大小和质量之间如何权衡成为了长期困扰开发者们的问题。而 WebP 技术的出现为解决该问题提供了好的方案。本文将为大家详细介绍 WebP 技术同时也会分享该技术在 MIP 项目)中的实践。 一、什么是 WebP WebP 是由 Google 收购 On2 Technologies 后发展出来的图片格式以BSD授权条款发布。目前已经在不同厂商之间进行了尝试如Google、Facebook、ebay、百度、腾讯、淘宝等。 二、为什么选择 WebP 1. WebP 的优势 WebP 在支持有损、无损、透明图片压缩的同时大大减少了图片的体积。据统计WebP 无损压缩后比 PNG 图片体积减少了 26%有损图片比同类 JPEG 图像体积减少了 25%~34%下面总结 WebP 在不同指标上所能获得的提升对比。 1体积和流量方面 根据业界给出的改造数据可知改造 WebP 之后图片体积会降低很多具体可参照 WebP 体积测试链接同时也可参照下图。 图片 在 MIP 项目)中通过我们的本地测试获得的数据如下图所示。 图片 从以上测试可知如果将体积换算成带宽WebP 不同模式下都会节省大量流量。科技博客 GigaOM 曾报道谷歌的 Chrome 网上应用商店采用 WebP 格式图片后每天可以节省几 TB 的带宽Google 移动应用采用 WebP 图片格式后每天节省了 50TB 数据存储空间。 2速度方面 图片的加载速度还要取决于网络时间所以我们没有测试确定的数据不过可以参考业界的数据科技博客 GigaOM 曾报道YouTube 的视频略缩图采用 WebP 格式后网页加载速度提升了 10%谷歌的 Chrome 网上应用商店采用 WebP 格式图片后页面平均加载时间大约减少 1/3。 2. 兼容性 目前来说WebP 的支持程度也在不断上升据 2017年10月12日在 can i use 上的查询显示全球 WebP 的支持程度已经达到 73.64%如下图所示。 WebP 支持程度图解 而也正是因为这种天然的图片体积优势和发展趋势MIP 团队也决定进行初步的实践尝试以提升页面用户体验。 三、WebP 实践经验 1. 如何判断浏览器支持程度 WebP 的判断方法在官方文档中进行了总结大致分为 HTML5 picture、嗅探和Request Header三种方式下面展开介绍这三种方式。 1HTML5 picture 这种方法不进行 WebP 支持程度的判断而是利用 html5 picture 元素的特性允许开发者列举出多个图片地址浏览器根据顺序展示出第一个能够展现的图片元素如 picturesource typeimage/webp srcsetimages/webp.webpimg srcimages/webp.jpg altwebp image
/picture复制代码上面的示例在浏览器不支持 WebP 图片的情况下自动回退到 jpg 格式进行展示但 picture 的支持程度还不是很完善开发者可以根据需求决定是否进行使用。 图片 2嗅探 嗅探的方式是指直接向浏览器中插入一段 base64 的 WebP 图片检测图片是否能够正常加载依据该方法进而判断支持程度如官方给出的嗅探函数 // check_webp_feature:
// feature can be one of lossy, lossless, alpha or animation.
// callback(feature, result) will be passed back the detection result (in an asynchronous way!)
function check_webp_feature(feature, callback) {var kTestImages {lossy: UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsDJaQAA3AAAAAA,lossless: UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA,alpha: UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA,animation: UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA};var img new Image();img.onload function () {var result (img.width 0) (img.height 0);callback(feature, result);};img.onerror function () {callback(feature, false);};img.src data:image/webp;base64, kTestImages[feature];
}复制代码其中包含了对有损、无损、透明图、动图等 WebP 图片的嗅探这是一种最为保险的方法。不过缺点也很明显在图片类型不一且量级较大的情况下前端并不能知道哪些图片是有损无损亦或是透明的也没有办法对其中一种特定类型做特定策略所以即使知道不支持该类型的 WebP然而我们也没有办法主观的去做容错。所以这种方法只适合于图片类型单一的情况如开发者知道所有图片都是有损的或是动图等有针对性的去处理。 同时在处理的过程中为了提高嗅探效率嗅探之后可以将结果以本地存储的方式进行保存如cookie 方便下次直接进行调用。 3Request Header 这种方式是较为符合标准的解决方案浏览器在支持 WebP 图片格式的情况下会在请求的 http header accept 中携带 webp/image 的字段后端接收到请求之后可以按照该形式来判断是否返回 WebP 图片内容。 MIP 在实践中采用的是该方法当用户访问 MIP Cache 上的页面时不需要开发者替换图片MIP Cache 根据 http header 自动决定是否返回 WebP 图片内容。 不过这个过程也依然有坑——国内浏览器层出不群大部分都向标准化的方向靠近但仍然需要一定的时间来跟进。所以在实践过程中我们就发现了这样的问题虽然 http header accept 中包含了 webp/image 的字段但实际上是不支持 WebP 格式的华为 MT7 自带浏览器具体体现在动图animation的 feature 上。而相应的解决方案其实也很简单就是在 WebP 图片加载失败后发起原图请求让图片能够正确的展示在页面上具体方式是通过 img onerror 函数执行对应逻辑。 2. WebP转换工具 WebP 的转换工具很多主要包含了命令行和可视化界面两种 1命令行 官方对于每一种 WebP 格式也分别提供了对应的转换工具主要包含了cwebp、dwebp、vwebp、webpmux、gif2webp 等几种开发者可以择优选择。 2可视化 页面也提供了不同可视化的软件进行 WebP 格式图片转换如iSparta。 四、总结 WebP 作为一种新型图片格式不但能够节省流量减少图片体积一定程度上也可以优化用户体验。MIP 项目对于 WebP 支持目前已上线大家可以浏览 MIP 页面进行体验。同时作为关注速度优化的 MIP 团队我们将不断迭代前行致力于打造极致的用户体验。
