webP编码图片基础

一. 概念

WebP格式,谷歌(google)开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器宽带资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。

WebP既支持有损压缩也支持无损压缩。相较编码JPEG文件,编码同样质量的WebP文件需要占用更多的计算资源。
webP编码图片基础_第1张图片

二. 浏览器支持

1.前端JS方案–利用img标签加载一张base64的webP图片,在img标签的onload事件中判断图片是否具有宽高的属性,若有表示支持webP,若没有表示不支持webP。

2.后台判断方案–判断浏览器请求头Accept是否支持webP,返回是否支持的标致给前台。

3.IOS独立客户端方案–使用官方提供的开发工具,客户端先拉去webP格式的图片,下载完成后在客户端实时转码,将webP图片转换为jpg或png图片,展示给用户的是普通图片。此方法的优点在于缩小了图片体积,节省了带宽而用户实际等待时间相差不大。

4.ANDROID客户端方案–客户端判断用户系统版本,android系统版本大于4.0时,原生都支持webP格式的静态图片。动态图片需使用flash来做兼容

5.兼容方案–对于不支持webP的浏览器,也可采用flash作为载体来加载webP图片,用户下载时,可捕获事件,并返回普通的jpg或png格式文件。

你可能感兴趣的:(javascript)