移动端WebP兼容解决方案

来源： SDK.cn 类型：业界新闻发布：2017-05-02 12:53:44

前言

移动端应用往往有大量的图片展示场景，图片的大小对企业至关重要。WebP 作为一种更高效的图片编码格式，平均大小比 PNG/JPG/ GIF/动态 GIF格式减少 70%（对比测试页面），且质量没有明显的差别，是其他图片格式极佳的替代者。

1、潜在问题

在移动端使用 WebP 图片，存在两个问题：

1）图片基本上是 PNG/JPG/GIF/动态 GIF 格式，需要转换为 WebP 格式？

图片格式转换分为实时、提前处理两种，提前处理需要已知图片情况，还会增加 WebP 图片的存储，所以用实时处理是比较佳的。

2）移动端原生或默认浏览器是否支持 WebP？如果要兼容众多浏览器，该怎么办？

Android 原生和Chrome 浏览器都支持 WebP，iOS 原生和 Safari 浏览器尚不支持 WebP。其他浏览器方面，除 Opera（欧朋）外，都还不支持。

本文结合又拍云图片处理，探讨一种通用移动端 App 使用 WebP 方式。

2、解决方案

1）终端向服务端请求图片（.jpg/.png/.gif等），又拍云 CDN 收到请求后，先去存储源获取图片。

2）访问图片处理，把图片转换成 WebP。

3）把 WebP 图片返回给终端。

4）终端呈现 WebP。

3、图片格式转换

又拍云 CDN 如何知道那张图片要转换成 WebP，因此，需要在访问 URL 上带上相关参数。

WebP 格式转换参数 /format/webp。

例如，图片 URL 是 https://p.upyun.com/docs/cloud/demo.jpg

则图片格式转 WebP 的 URL 是 https://p.upyun.com/docs/cloud/demo.jpg!/format/webp

其中，! 是分隔符。

4、存在问题

这个方案虽然实现了图片大小降低和加载时间降低，但没有彻底解决终端兼容问题。Ps：我们的研究也不会止于此

终端兼容问题有：

1）iOS 原生不支持 WebP，怎么呈现 WebP？

iOS 上呈现 WebP的方式是解码 WebP。如何解码 WebP？请看《移动端如何使用 WebP（下）》。

2）Safari、Firefox、Edge 等浏览器不支持 WebP，怎么兼容？

解决方法是用 JS 判断用户的浏览器，根据浏览器类型，决定是否把图片转成 WebP。如果用户浏览器是 Chrome，Chrome 支持 WebP，可以在 URL 后带上 !/format/webp，使用 WebP 图片；如果用户浏览器是 Safari，Safari 不支持 WebP，URL 后不加 !/format/webp，使用原生图片。

后续又拍云会在 CDN 中集成这个判断，更好的方便用户使用 WebP。

另外一种方法是使用插件，详细请阅读 WebPJS