要使用WebP格式,需要将你网站用到的图片都制作一份WebP格式的版本,如果你使用CDN服务商,它们一般都会提供转码到WebP格式的选项。如又拍云:
增加这样的配置后,我们可以通过给图片URL加上相应的后缀,来使用WebP格式的版本资源。
你也可以使用webpack、gulp的插件来批量转换图片格式。这里不赘述。
因为不是所有浏览器都支持WebP格式,我们就有两种思路:一个是只在支持WebP格式的浏览器中使用WebP格式;一个是让不支持WebP格式的浏览器可以支持WebP。
<picture>是html5中的一个新标签,类似<video>它也可以指定多个格式的资源,由浏览器选择自己支持的格式进行加载。
<picture class="picture">
<source type="image/webp" srcset="image.webp">
<img class="image" src="image.jpg">
</picture>
如果浏览器支持WebP格式,就会加载image.webp,否则会加载image.jpg。
即使浏览器不支持<picture>标签,图片仍然会正常显示,只是css可能无法正确选取到picture元素。比如在IE8中,下面的CSS就不会起作用:
.picture img {
width: 100px;
height: 100px;
}
但是可以这样来给图片写样式:
.image {
width: 100px;
height: 100px;
}
即使浏览器使用的是WebP格式的图片,最终还是会应用img元素的样式。
不过只要使用了html5shiv,使旧的浏览器支持这个标签,CSS选择器就可以正常使用了。
这种方法是最简单的,但是不能作用于CSS中的图片(如背景)。
我们有很多的页面往往会用到图片的“懒加载”——通常是把图片的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中的图片(如背景图等)。
既然WebP的解码器是开源的,那么能否用JS来实现呢?当然可以,有人就用JS写出了WebP的解码器。引入这个JS库,就是将所有的WebP图片用JS解码后转换为base64,然后替换掉原来的URL,这样就可以让原本不支持WebP的浏览器正常显示WebP了。这个库的使用方法非常简单,看网页的说明即可。
这种方法的缺点是,因为JS要解码WebP图片,需要在此异步请求src中的URL(不过因为图片本身之前被下载了一次,直接使用了缓存);而且JS解码比较慢,对性能有影响,可能需要一段时间才能显示出图片来。
以上就是在浏览器中使用WebP图片的几种方法,可以根据自己的实际情况选用。在我们的实践中,使用了WebP格式后,图片的体积普遍缩小了1/3以上,既加快了加载的速度,还节省了用户的流量,我们十分推荐从现在就开始使用这种格式。
来源:https://segmentfault.com/a/1190000007482148
webp是一种同时提供了有损压缩与无损压缩的图片档案格式,同质量的前提下,WebP体积大约只有JPEG的1/3,对于采用大量图片的网页,WebP格式可以节省大量带宽,大幅提升网页加载速度。
我们都知道,WebP 是 Google 推出的 WebP 图片格式,它是一种支持有损压缩和无损压缩的图片文件格式,根据Google测试,相同的图片,WebP 格式的图片均能比 PNG,JPG 格式的图片节约不少体积,但是其兼容性不是很好,如下:
webp 是目前 Web 比较流行的解决方案,相对于 Jpeg/png, 基于 VP8 的压缩,有着非常不错的压缩率。比较基础的方法,还是检测 UA 白名单来说,毕竟这些版本都是很早就支持。
WebP是Google在2010年提出的一种新的图像格式。对于包含大量图片的网站,大多会使用WebP格式的图片,这样不仅可以减少流量带宽,还可以减少用户访问的加载时间,提高用户体验
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!