image，imagery

　　文 | 王成

　　本文转载自SegmentFault

　　WebP格式介绍

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

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

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

　　增加这样的配置后，我们可以通过给图片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元素的样式。

　　不过只要使用image了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防盗链等。最近上线的又拍直播云，除了直播加速、推拉流外，更具有丰富的美颜、滤镜、水印、防盗链、鉴黄、禁播等功能，帮助直播平台快速上线直播业务，快来试试吧~

　　戳我阅读原文哦~

上一篇： wncry，Wncry文件

下一篇： espcms，espcms_utf8_v5713