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

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

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

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

在浏览器中使用WebP格式

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

设计坞https://www.wode007.com/sites/73738.html

姿势一: <picture>标签

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

<picture class="picture">
<source type="image/webp" srcset="image.webp">
<img class="image" src="data: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中的图片(如背景)。

姿势二:使用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以上,既加快了加载的速度,还节省了用户的流量,我们十分推荐从现在就开始使用这种格式。

在html中如何兼容使用WebP格式的图片【图片升级到WebP】的更多相关文章

  1. 在html页面中利用ftp访问协议格式载入服务器图片

    访问格式为:ftp://用户名:密码@服务器ip:服务器端口/具体文件路径 如下所示: <img src="ftp://lxj:123@127.0.0.1:21/IMG_2013051 ...

  2. iOS开发中WebP格式的64位支持处理

    几个月前我们项目中添加了对webp格式的处理.期间遇到了一些问题,这是当中的一个小的记录. 官方下载地址:https://code.google.com/p/webp/downloads/list 对 ...

  3. 利用 LibWebP-NET 解码与编码 WebP 格式图片

    此文以后将会在我的新博客更新,有任何疑问可在我的新博文中提出 https://blog.clso.fun/posts/2019-03-02/vb-net-webp.html WebP 格式是谷歌开发并 ...

  4. Qt增加webp格式支持

    Webp 是一种图片文件格式,能在相同质量的情况下比 PNG 文件尺寸小巧. Chrome 应用商店图片已全部转换为 WebP 格式 YY(基于Qt开发)也已经把图片格式换成webp了 http:// ...

  5. 将jpg压缩成webp格式的图片

    cwebp名称 cwebp -压缩图像文件为的WebP文件概要 cwebp [选项] INPUT_FILE -o output_file.webp描述 cwebp压缩使用的WebP格式的图像.输入格式 ...

  6. CentOS系统php5.6安装ImageMagick处理webp格式图片

    1.先安装webp yum install libwebp 2.编译安装ImageMagick 之前有过yum安装的先卸载 yum remove ImageMagick 我使用的是老版本ImageMa ...

  7. centos下 将(jgp、png)图片转换成webp格式

    由于项目要求需要将jpg.png类型的图片  转换成webp格式,最开始使用了php gd类库里 imagewebp 方法实现,结果发现转换成的webp格式文件会偶尔出现空白内容的情况.像创建了一个透 ...

  8. windows下查看webp格式图片

    关于webp 时下webp格式日渐势起,主流浏览器(IE: ???)已经开始支持webp,诸多互联网企业(Facebook 和 ebay,国内的有淘宝.腾讯和美团等)都已经在不遗余力的将webp应用到 ...

  9. 对于WebP格式入门解读

    因为项目中需要用到大量动画效果,前期尝试过几种方案,比如GIF.帧动画.lottie.SVGA等格式的动画渲染方案,发现都存在各式各样的问题.比如: 1,GIF格式.5秒的动画,一张图大小可能就会达到 ...

随机推荐

  1. java实现最大镜像子串

    ** 最大镜像子串** [代码填空](满分12分) 串"abcba"以字母"c"为中心左右对称:串"abba" 是另一种模式的左右对称.这两 ...

  2. Java实现第九届蓝桥杯全球变暖

    全球变暖 题目描述 你有一张某海域NxN像素的照片,"."表示海洋."#"表示陆地,如下所示: ....... .##.... .##.... ....##. ...

  3. github下载速度太慢,这里有已经下载完的nacos-server.zip组件

    nacos: 分布式系统微服务的注册中心和配置中心 .. 在微服务系统中,起到很重要的作用.小伙伴老是给我抱怨,说这个github下面很慢慢,半天下载不下来,所有这样呢,我就把已经下载好的 nacos ...

  4. WinUI 3试玩报告

    1. 什么是 WinUI 3 在微软 Build 2020 开发者大会上,WinUI 团队宣布可公开预览的 WinUI 3 Preview 1,它让开发人员可以在 Win32 中使用 WinUI.Wi ...

  5. HDU - 2546 饭卡 题解

    题目大意 电子科大本部食堂的饭卡有一种很诡异的设计,即在购买之前判断余额.如果购买一个商品之前,卡上的剩余金额大于或等于5元,就一定可以购买成功(即使购买后卡上余额为负),否则无法购买(即使金额足够) ...

  6. 我去,你竟然还不会用 Java final 关键字

    写一篇文章容易吗?太不容易了,首先,需要一个安静的环境,这一点就非常不容易.很多小伙伴的办公室都是开放式的,非常吵,况且上班时间写的话,领导就不高兴了:只能抽时间写.其次,环境有了,还要有一颗安静的心 ...

  7. JS 姓氏,区域,消息组成的随机内容定时随机展示

    var surname_g = "\u8D75\u94B1\u5B59\u674E\u5468\u5434\u90D1\u738B\u51AF\u9648\u891A\u536B\u848B ...

  8. 百度编辑器UEditor不能插入视频的解决方法

    在编辑器中就可以引用优酷.腾讯视频的iframe通用代码和embed html代码:移动端一般引用iframe,可设置属性,使其适应设备.(这里,建议切换到源码模式,插入相应的视频代码embed或if ...

  9. Mysql:bit类型的查询与插入

    原文链接:https://www.cnblogs.com/cuizhf/archive/2013/05/17/3083988.html Mysql关于bit类型的用法: 官方的资料如下: 9.1.5. ...

  10. flex弹性布局及其属性

    CSS3 弹性盒子内容 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成. 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将 ...