此文已由作者吴维伟授权网易云社区发布。

欢迎访问网易云社区,了解更多网易技术产品运营经验。

前端性能优化是一件很琐碎的事情。它不像其它很多技术,在确切有限的步骤下就可以把功能做好。它就像是在打扫屋子,需要时常去检查屋子是否有不整洁的地方,然后立即整理。所以在性能优化的过程中会遇到各方面的问题。本文的主题是聊聊怎么让图片更“整洁”。

什么是WebP

WebP是一种新的文件格式,相比于jpg、png、gif,在相同的图片质量的情况下,它有着更小的图片大小,可以大大缩小页面加载时间。可以参考http://isux.tencent.com/introduction-of-webp.html

如何生成WebP格式的图片

WebP官网上提供了转换工具,可以把jpg、png图片转换成WebP。

如何使用

由于WebP并没有被大多数浏览器原生支持,所以在使用时并不像jpg、png图片一样轻便。WebP的兼容方案一般分为3种:

1,服务器端判断是否应该返回WebP格式的图片

当服务器端接收到浏览器的图片请求时,根据User-Agent判断是否应该返回WebP格式的图片。这种方法的优势很明显,前端几乎不需要做任何修改就可以完美的完成此次优化任务。缺点也很明显,你需要恭敬地给后端大大倒上一杯咖啡,然后真诚地说:“加个功能呗,这个真的很简单!!!”
当然,这里有一个造好的轮子,你可以提供给后端大大。pagespeed,Google开发的一个支持Nginx和Apache的模块,主要用来提高页面加载速度。其中有一个功能convert_jpeg_to_webp,可以实现当支持WebP的浏览器请求图片时,可以自动将jpg等转换成WebP。pagespeed其它性能优化的功能也值得尝试哦~

2,浏览器判断是否应该使用WebP格式的图片

首先,你需要知道普通格式图片的URL和WebP格式图片的URL。通过浏览器特性侦测,来判断应该使用哪一类图片。这种方式的缺点是只适用于javascript动态生成的图片,无法统一处理CSS中引用的背景图片。

3,替浏览器写解析程序

我们要做的事情是,“你没有实现解析WebP的功能,那我来吧”。对于不支持WebP的浏览器,我们通过JavaScript将其转码成浏览器支持的格式,以base64的形式赋值给DOM元素。这个轮子已经被造好了,只需要简单的引入webpjs,就可以实现WebP的转码功能。这种方式能够处理所有的图片,包括Img标签和背景图片。不过由于是JavaScript实现转码,所以对页面性能有所影响。

侦测浏览器是否支持WebP

方法1,尝试加载一张WebP图片,观察是否能够正常加载
(function () {    var WebP = new Image();
    WebP.onload = WebP.onerror = function () {        if (WebP.height != 2) {            // 不支持WebP
        } else {            // 支持WebP
        }
    };
    WebP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
})();
方法2,尝试从canvas中导出WebP格式的图片,观察是否能够正常导出
function checkWebp() {    try {        return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
    } catch (err) {        return false;
    }
}

网易云免费体验馆,0成本体验20+款云产品!

更多网易技术、产品、运营经验分享请点击

相关文章:
【推荐】 一些 ssh 小技巧
【推荐】 网易易盾验证码的安全策略

前端性能优化之WebP的更多相关文章

  1. 移动H5前端性能优化指南

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...

  2. web前端性能优化指南(转)

    web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...

  3. 移动H5前端性能优化指南(转载)

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...

  4. web前端性能优化指南

    web前端性能优化指南 web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loadin ...

  5. 移动H5前端性能优化指南[转]

    移动H5前端性能优化指南 米随随2015.01.23 移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首 ...

  6. 移动 H5(PC Web)前端性能优化指南

    原文地址https://zhuanlan.zhihu.com/p/25176904?utm_source=wechat_session&utm_medium=social&utm_me ...

  7. 第146天:移动H5前端性能优化

    移动H5前端性能优化 一.概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点,首屏加载3秒完成或使用Loading 4. 基于联通 ...

  8. [转]移动H5前端性能优化指南

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...

  9. 前端性能优化之利用 Chrome Dev Tools 进行页面性能分析

    背景 我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据 ...

随机推荐

  1. C++动态特性和C++对象模型——《高质量程序设计12章》

    1.动态特性 静态特性和动态特性,编译时和运行时 虚函数 (1)虚函数的叫覆盖,虚函数不是实现多态的唯一手段(其他语言也可能采用别的方法). 抽象基类: (1)如果将基类的虚函数声明为纯虚函数,则基类 ...

  2. 洛谷—— P1536 村村通

    P1536 村村通 题目描述 某市调查城镇交通状况,得到现有城镇道路统计表.表中列出了每条道路直接连通的城镇.市政府“村村通工程”的目标是使全市任何两个城镇间都可以实现交通(但不一定有直接的道路相连, ...

  3. [Bzoj4521][Cqoi2016]手机号码(数位dp)

    4521: [Cqoi2016]手机号码 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 870  Solved: 505[Submit][Status ...

  4. [Bzoj1296][Scoi2009] 粉刷匠 [DP + 分组背包]

    1296: [SCOI2009]粉刷匠 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2184  Solved: 1259[Submit][Statu ...

  5. 2017多校Round2(hdu6045~hdu6055)

    补题进度:10/11 1001(不等式) 根据题意列不等式,解一解就行了 1002(套路) 题意: 给定一个随机产生的1e6*1e6的矩阵和一个1e3*1e3的矩阵,你要回答这个1e3*1e3的小矩阵 ...

  6. sys.argv的妙用:python命令行参数列表的修改、增加、删除

    是否妙用取决于你怎么用 1.sys.argv是用来获取命令行参数的方法,本身是一个list.你搜其实用方法,这方面的介绍最多,这里不赘述 2.那么问题是:sys.argv可以赋值吗?可以扩充吗?可以修 ...

  7. leetcode:238. Product of Array Except Self(Java)解答

    转载请注明出处:z_zhaojun的博客 原文地址 题目地址 Product of Array Except Self Given an array of n integers where n > ...

  8. 全局最小割模版 n^3

    //点标从0-n-1, 開始时先init 复杂度n^3 //对于边(u,v,flow): //g[u][v]+=flow; //g[v][u]+=flow; typedef long long ll; ...

  9. 浅谈asp.net通过本机cookie仿百度(google)实现搜索input框自己主动弹出搜索提示

    对于通过用户输入关键词实现自己主动弹出相关搜索结果,这里本人给两种解决方式,用于两种不同的情形. 常见方法是在数据库里建一个用户搜索关系表,然后通过用户搜索框输入的keyword异步调用数据表中的相关 ...

  10. UIButton的图片和文字相对位置调整

    通常.假设直接设置UIButton的图片和文字,默认的两者相对位置可能不是我们想要的,那么须要进行调整. 须要用到的函数例如以下: UIEdgeInsetsMake(CGFloat top, CGFl ...