前言

移动端应用往往有大量的图片展示场景,图片的大小对企业至关重要。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、解决方案

移动端使用 WebP

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


推荐阅读:

移动端如何使用 WebP