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

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

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

什么是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. BZOJ2196: [Usaco2011 Mar]Brownie Slicing

    n<=500 * m<=500的方阵,先沿横坐标切A-1刀,再把每一块切B-1刀,得到A*B块,求这A*B块的数字之和的最小值的最大值. 最小值最大--二分,然后贪心切.每次扫一行,看这一 ...

  2. maven 编译出错 Failed to execute goal org.apache.maven.plugins:maven-clean-plugin:2.5:clean

    eclipse在使用maven的tomcat控件编译java程序时,报错 Failed to execute goal org.apache.maven.plugins:maven-clean-plu ...

  3. HDU 4622 (后缀自动机)

    HDU 4622 Reincarnation Problem : 给一个串S(n <= 2000), 有Q个询问(q <= 10000),每次询问一个区间内本质不同的串的个数. Solut ...

  4. http的N种请求

    GET通过请求URI得到资源 POST,用于添加新的内容 PUT用于修改某个内容 DELETE,删除某个内容 CONNECT,用于代理进行传输,如使用SSL OPTIONS询问可以执行哪些方法 PAT ...

  5. django学习之- Models笔记

    1:创建数据库表 #单表# app01_user 生成的表明为 tb1class User(models.Model): name = models.CharField(max_length=32,d ...

  6. 前端学习之-- Jquery

    Jquery学习笔记 中文参考文档:http://jquery.cuishifeng.cn Jquery是一个包含DOM/BOM/JavaScript的类库引入jquery文件方法:<scrip ...

  7. [bzoj4006][JLOI2015]管道连接_斯坦纳树_状压dp

    管道连接 bzoj-4006 JLOI-2015 题目大意:给定一张$n$个节点$m$条边的带边权无向图.并且给定$p$个重要节点,每个重要节点都有一个颜色.求一个边权和最小的边集使得颜色相同的重要节 ...

  8. Fragment实践之聊天窗体

    前几天刚学了android的fragment,总是停留在简单的demo,也许永远都学不会. 今天,我要动手向我的聊天软件开刀.今天.用Fragment来实现一个例如以下图效果的聊天界面. waterm ...

  9. No module named '_sqlite3'问题解决

    Centos自带的python版本是2.7的,后面我自己装了3.5版本的,在创建应用的时候python manager.py startapp users 时,就会报No module named ' ...

  10. 解决cell切割线不是全屏问题

    if ([_tableView respondsToSelector:@selector(setSeparatorInset:)]) { [_tableView setSeparatorInset:U ...