又拍_又拍云同盟（又拍云官网）

　　文 | 王成

　　本文转载自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花样的选项。如又拍云：

　　增加这样的配置后，我们可以通过给图片URL加上响应的后缀，来操纵WebP花样的版本资源。

　　你也可以操纵Webpack、Gulp的插件来批量转换图片花样。这里不赘述。

　　在浏览器中操纵WebP花样

　　因为不是所有浏览器都支撑WebP花样，我们就有两种思路：一个是只在支撑WebP花样的浏览器中操纵WebP花样；一个是让不支撑WebP花样的浏览器可以支撑WebP。

　　姿势一：Picture标签

　　Picture 是TML5中的一个新标签，类似Video它也可以指定多个花样的资源，由浏览器选择自己支撑的花样进行加载。

　　picture class="picture"

　　source type="image/webp" srcset="image.webp"

　　img class="image" src="image.jpg"

　　/picture

　　如果浏览器支撑WebP花样，就会加载Image.webp，不然会加载Image.jpg。

　　即使浏览器不支撑标签，图片仍然会正常表示，只是CSS或许无法准确选取到Picture元素。好比在IE8中，下面的CSS就不会起作用：

　　.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. = function () { var result = (img.width 0) (img.height 0);

　　callback(result);

　　};

　　img. = function () {

　　callback(false);

　　};

　　img.src = 'data:image/webp;,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解码后转换为，然后更换掉本来的URL，这样就可以让原来不支撑WebP的浏览器正常表示WebP了。这个库的操纵方法很是简朴，看网页的分析即可。

　　这种方法的弱点是，因为JS要解码WebP图片，须要在此异步请求SRC中的URL（不过因为图片自己之前被下载了一次，直接操纵了缓存）；并且JS解码比较慢，对机能有影响，或许须要一段时间才气表示出图片来。

　　以上就是在浏览器中操纵WebP图片的几种方法，可以凭据自己的现实情况选用。在我们的实践中，操纵了WebP花样后，图片的体积普遍缩小了1/3以上，既加速了加载的速度，还节省了用户的流量，我们很是举荐从如今就最先操纵这种花样。

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

　　又拍云的处置惩罚处罚功能着实太厚实，在图片处置惩罚处罚方面，略缩图尽情尺寸更改，全网一键更新所有图片，吊水印，URL防盗链等。迩来上线的又拍直播云，除了直播加速、推拉流外，更具有厚实的美颜、滤镜、水印、防盗链、鉴黄、禁播等功能，资助直播平台快速上线直播营业，快来试试吧~

　　戳我阅读原文哦~