其他分享
首页 > 其他分享> > 一场关于webp的革命,让你的网站更丝滑

一场关于webp的革命,让你的网站更丝滑

作者:互联网

一场关于webp的革命,让你的网站更丝滑

webp是什么?

webp是谷哥推出的一种新型图片格式,从2010发布到现在已经过去了10年。其通过减少文件大小,但达到和JPEG格式相同的图片质量,来缩短图片的网络请求时长。值得注意的是,图片不能过大,webp支持的图片像素最大数量是16383x16383(width x height)。

webp的兼容性怎么样?

特定场景下,webp是一个很不错的选择,比如大屏可视化,花瓣网那种图片素材网站,京东淘宝等电商平台,应用很广。感兴趣的可以去某个网站通过network网络面板进行查看,看看什么样的图片场景使用了webp。好用,但并不意味着可以全线使用。下面这张图是webp在不同浏览器下的兼容情况。

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=webp兼容性

比较明显的,除了ie和苹果,其他的都没啥大问题。然而现实的问题就是,这两类浏览器涵盖的用户量还挺多的。如果使用,需要做降级处理,降级成png,jpeg,jpg等其他支持的图片格式。当然,如果一切以chrome为标准,不考虑兼容问题,那就可以无脑用了。

webp和同类图片格式的比较

webp是否真的能在轻量和色彩度上鱼和熊掌兼得呢?我们来进行一个测试。最近在学英语,我就用一张英语知识点的思维导图来当案例了,测试网址见文末。

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=png格式

如果你对英语不感兴趣,可以不用过多关注上边图片中的内容,只需知道这张图原始大小为1.14M,png格式。如果不做任何处理,尤其是网不好的情况下,加载真的很慢,有部分白屏,然后一点点加载...体验很差。那么转成webp会如何呢?来看一下对比数据。

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=webp转换数据比对

一图胜千言,处理成webp格式的图片尺寸小了一半多,接下来再看看视觉效果,下边这张图是webp格式

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=webp格式

仔细康康昂,视觉角度,有明显差异吗?几乎没有,放大效果也是差不多的,但事实就是,图片尺寸确实小了很多。webp真的做到了鱼和熊掌兼得。

如何把其他格式图片转成webp格式?

const { execFile } = require('child_process');
const cwebp = require('cwebp-bin');
function towebp (src, target) {
    return new Promise((resolve, reject) => {
        execFile(cwebp, [src, '-o', target], err => {
            if (err) { reject(err); }
            resolve(true)
        });
    })
}

webp的选择时机和降级处理

webp的出现不是为了取代原有图片格式的,所以没必要什么图片都拿来转一下,如果图片特别小,其实转成webp也没有太大效果。可以参考一下淘宝京东等电商平台不同场景下图片格式的选用。还有就是浏览器的兼容性,要做降级处理。这里采用html5的picture标签来做降级处理。

<picture>
  <source srcset="/名词性从句.webp"> </source>
  <img src="/名词性从句.png" alt="名词性从句">
</picture>

上边这种写法,浏览器会优先解析webp格式图片,如果不支持,就降级采用png的图片,无论哪种,都不会两个都下载的,这才符合预期。当然,如果是ie,那么它可能识别不了html5的新标签,可以使用html5shiv这个大补丁,让ie支持,文末附上html5shiv的cdn地址。下面来看一下ie下降级成png的效果,这里使用了html5shiv

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=ie降级

chrome显示肯定是没问题的,这里看一下资源加载,:只会加载一种图片格式,这正是我们预期的

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=chrome--webp

项目中的实践

涉及用户自定义图片处理的,都会提供上传接口,可以在后台对用户上传的图片做一个处理,将大图转成webp,然后前端做降级处理。对于用户而言,能明显体会到加载速度变快,至于图片转换前后的质量和色彩度,几乎是无感知的。

总结

本文从webp的概念入手,先后分析了webp的兼容性,优缺点,并和其他图片格式进行比较,最后给出了一套后端的转换方案和前端的降级处理策略。最后安利一波我的英语学习网站,包含英语基础语法,侧重图文展示的早安分享和侧重英语短视频的晚安分享。

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=enote

 

 

标签:降级,网站,图片格式,更丝滑,webp,格式,png,图片
来源: https://blog.51cto.com/u_14219805/3009741