前言
不管是 PC 还是移动端,图片一直是流量大头,以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求,如何保证在图片的精细度不降低的前提下缩小图片体积,成为了一个有价值且值得探索的事情。
但如今对于 JPEG、PNG 和 GIF 这些图片格式的优化几乎已经达到了极致, 若想改变现状开辟新局面,便要有釜底抽薪的胆量和气魄,而 Google 给了我们一个新选择:WebP。
对 WebP 的研究缘起于手机 QQ 原创表情商城,由于表情包体积较大,在 2G/3G 的网络环境下加载较慢。于是催生了其诞生,今年 WebP 图片格式得到越来越多的关注,很多团队也开始布道,前阵子的前端圈“走进腾讯互娱前端技术专场”也有相关专题。
关于更多webp的信息可以参考:WebP 探寻之路
这样一个可以减少图片体积又不影响画质的图片格式,在手机端Android和iOS的App只要引入Google提供的解码库,都可以很轻松的支持WebP格式。不过在Web上,在使用中却有相关问题,最大的问题就是不兼容,火狐完全不支持。谷歌和欧朋等支持较好。
这意味着我们前端又要为该死的兼容考虑了。
解决方法:
本人觉得最佳的解决方法是:使用JS解码WebP图片
既然WebP的解码器是开源的,那么能否用JS来实现呢?当然可以,有人就用JS写出了WebP的解码器。引入这个JS库,就是将所有的WebP图片用JS解码后转换为Base64,然后替换掉原来的URL,这样就可以让原本不支持WebP的浏览器正常显示WebP了。这个库的使用方法非常简单,看网页的说明即可。
这里为大家放上这个库的地址官网地址:webp.js,和github下载地址:webpjs
这种方法的缺点是,因为JS要解码WebP图片,需要在此异步请求SRC中的URL(不过因为图片本身之前被下载了一次,直接使用了缓存);而且JS解码比较慢,对性能有影响,可能需要一段时间才能显示出图片来。但图片体积的缩小可以很好的对这个JS解码时间进行对冲。
我们在github的webpjs
下载地址把webpjs
下载下来,然后引入webpjs.min.js
,使用很简单只需要引入即可,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="webpjs-master/webpjs-0.0.2.min.js"></script>
<script type="text/javascript" src="exif.js"></script>
</head>
<body>
<img src="lB3O1WmG5M0JxM0GhA_1668_2500.webp">
</body>
</html>
引入后,他就可以兼容火狐了,其本质是通过使用JS解码WebP图片的,放上截图:
我们可以看到src是base64码。是不是很简单?
webp图片信息的获取
开始前请在github上下载我的项目:webp-ArrayBuffer,然后里面有一个文件是:
lB3O1WmG5M0JxM0GhA_1668_2500.webp
,这是我们IOS工程师处理过得webp图片,你们可以拿来做案例。
有时我们需要获取图片的原始数据信息,例如:拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。
我们一般使用exif.js
来获取图片的原始数据信息,github下载exif.js,然后使用<script type="text/javascript" src="exif.js"></script>
引入exif.js
,如果你有npm环境可以使用npm install exif-js --save
进行安装。而且它的语法也特别简单。
虽然 Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展,但是图片转换为webp后由于webp自身原因在IOS等手机上写入信息并不现实,太过与繁琐与难缠,这样 Exif.js 无法获取原始数据。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="webpjs-master/webpjs-0.0.2.min.js"></script>
<script type="text/javascript" src="exif.js"></script>
</head>
<body>
<img src="lB3O1WmG5M0JxM0GhA_1668_2500.webp" onclick="exif()"