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

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

webp是什么？

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

webp的兼容性怎么样？

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

webp兼容性

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

webp和同类图片格式的比较

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

png格式

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

webp转换数据比对

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

webp格式

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

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

• 如果不用程序实现，文末的那个测试地址就可以了
• 当然，作为程序员，我们还是倾向用程序实现的，这里以nodejs为例
• 安装cwebp-bin  windows平台推荐使用cnpm安装
• 编写转换方法towebp
• 输入原始图片地址和输出图片地址，调用towebp函数进行测试
• 注意，原始图片尺寸不要超过16383x16383
• 超过会报错，这是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

ie降级

---

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

chrome--webp

项目中的实践

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

总结

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

enote

 

 

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