手把手教你如何将网站图片格式升级为WebP | 干货分享

王成 2016-11-18 09:27 新媒体 来源:思达派 查看原文

文 | 王成

本文转载自SegmentFault


WebP格式介绍

WebP是Google开发的一种新的图片格式,它支持有损压缩、无损压缩和透明度,压缩后的文件大小比JPEG、PNG等都要小。所以可以节省带宽,减少页面载入时间,节省用户的流量。

Android和iOS的App只要引入Google提供的解码库,都可以很轻松的支持WebP格式。不过在Web上,WebP的支持还不是很广泛。根据Can I Use的数据,目前只有Chrome、Opera浏览器,以及Android的WebView是支持WebP的。但是WebP图片有这么多优点,我们能不能在Web页面中使用呢?可以。这篇文章就来讨论一下这个问题。

把已有的图片转换为WebP格式

要使用WebP格式,需要将你网站用到的图片都制作一份WebP格式的版本,如果你使用CDN服务商,它们一般都会提供转码到WebP格式的选项。如又拍云:

22222.jpg增加这样的配置后,我们可以通过给图片URL加上相应的后缀,来使用WebP格式的版本资源。

你也可以使用Webpack、Gulp的插件来批量转换图片格式。这里不赘述。

在浏览器中使用WebP格式

因为不是所有浏览器都支持WebP格式,我们就有两种思路:一个是只在支持WebP格式的浏览器中使用WebP格式;一个是让不支持WebP格式的浏览器可以支持WebP。

姿势一: <Picture>标签

<Picture>是HTML5中的一个新标签,类似<Video>它也可以指定多个格式的资源,由浏览器选择自己支持的格式进行加载。

<picture Powered-by-XIUMI V5" powered-by="xiumi.us" >

.picture img {  width: 100px;  height: 100px;}

但是可以这样来给图片写样式:

.image {  width: 100px;  height: 100px;}

即使浏览器使用的是WebP格式的图片,最终还是会应用img元素的样式。

不过只要使用了HTML5Shiv,使旧的浏览器支持这个标签,CSS选择器就可以正常使用了。这种方法是最简单的,但是不能作用于CSS中的图片(如背景)。

姿势二:使用JS替换图片的URL。

我们有很多的页面往往会用到图片的“懒加载”——通常是把图片的URL放在Img元素的一个自定义属性中,然后用JS在适当的时机将URL赋值给SRC属性。用类似的原理,我们可以根据浏览器是否支持WebP格式,给Img元素赋予不同的SRC值。

首先我们需要用JS来判断浏览器是否支持WebP格式,方法是给浏览器一个WebP格式的图片,看浏览器能否正确渲染。这种方法是异步的,所以需要把后续的操作写在回调函数中。我们可以将结果存储在LocalStorage中,这样之后就不用再次检查了。

function checkWebp(callback) {  var img = new Image();
 img.onload = function () {    var result = (img.width > 0) && (img.height > 0);
   callback(result);
 };
 img.onerror = function () {
   callback(false);
 };
 img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
}

然后用下面的代码来根据是否支持WebP替换相应的SRC。

function showImage(useWebp){  var imgs = Array.from(document.querySelectorAll('img'));

 imgs.forEach(function(i){    var src = i.attributes['data-src'].value;    if (useWebp){
     src = src.replace(/\.jpg$/, '.webp');
   }

   i.src = src;
 });
}

checkWebp(showImage);

这种方式的优点是可以与已有的懒加载函数相结合。而且使用JS,我们还可以处理CSS中的图片(如背景图等)。


姿势三:使用JS解码WebP图片


既然WebP的解码器是开源的,那么能否用JS来实现呢?当然可以,有人就用JS写出了WebP的解码器。引入这个JS库,就是将所有的WebP图片用JS解码后转换为Base64,然后替换掉原来的URL,这样就可以让原本不支持WebP的浏览器正常显示WebP了。这个库的使用方法非常简单,看网页的说明即可。


这种方法的缺点是,因为JS要解码WebP图片,需要在此异步请求SRC中的URL(不过因为图片本身之前被下载了一次,直接使用了缓存);而且JS解码比较慢,对性能有影响,可能需要一段时间才能显示出图片来。


以上就是在浏览器中使用WebP图片的几种方法,可以根据自己的实际情况选用。在我们的实践中,使用了WebP格式后,图片的体积普遍缩小了1/3以上,既加快了加载的速度,还节省了用户的流量,我们十分推荐从现在就开始使用这种格式。


又小拍也关注WebP一段时间呢,不但关注了WebP,还关注了动态WebP,不久之后会有惊喜带给大家哦。

又拍云的处理功能实在太丰富,在图片处理方面,略缩图任意尺寸更改,全网一键更新所有图片,打水印,URL防盗链等。最近上线的又拍直播云,除了直播加速、推拉流外,更具有丰富的美颜、滤镜、水印、防盗链、鉴黄、禁播等功能,帮助直播平台快速上线直播业务,快来试试吧~

戳我阅读原文哦~


为您推荐: