注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

和申的个人主页

专注于java开发,1985wanggang

 
 
 

日志

 
 

Webp图片格式推广  

2013-09-03 11:06:56|  分类: 性能 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

意义

Webp是一种有损压缩图形档格式,根据Google的测试,在有损压缩的状况下Webp比同画质的JPEG少20%~34%的文件大小。详见http://baike.baidu.com/view/4447461.htm。分析云梯访问日志可知chrome浏览器占比已经达到40%左右,详见下表。

域名

url_type

pv

chrome

占比

item.taobao.com

ipv

593686460

224549944

0.37822986

s.taobao.com

search

306003780

116116638

0.37946145

detail.tmall.com

ipv

152742396

64447157

0.42193365

list.tmall.com

list

54901966

21945716

0.3997255

s8.taobao.com

search

40375696

14944038

0.37012459

list.taobao.com

list

32341808

12030549

0.37198134

ju.taobao.com

ipv

10010869

4077831

0.40734036

search.taobao.com

search

8363472

2143762

0.25632441

s.etao.com

search

5660205

2442721

0.43156052

try.taobao.com

ipv

4600380

2330367

0.50655968

ershou.taobao.com

ipv

3827846

1826116

0.47706099

detail.taobao.com

ipv

1840740

818394

0.44460054

search8.taobao.com

search

1250746

594411

0.47524517

同一张图片所占网络带宽对比(见下表),可知WEBP格式可节省大量带宽,并且已经在无线团队得到验证。节约的成本=CDN带宽成本*可以使用webp格式的流量占比*Chrome浏览器占比*WebP格式压缩率。

图片

JPEG(KB)

WEBP(KB)

图片1

67.4

11.6

图片2

244

42.4

风险

1.  图片转换成Webp格式会降低图片质量,因此暂时不能在宝贝描述等商家特别敏感的地方推广;只能先在list、商品主图等使用压缩图片的地方率先尝试,同时加强对数据的监控与分析。

2.  目前只有部分Webkit版本原生支持Webp,因为要密切关注Webkit核心浏览器在相关应用中的占比。此外,也要探索将Webp推广到其他浏览器的技术。

3.  增加Webp格式后,可能会降低CDN命中率。

范围

        所有图片较多且给CDN带来较大流量的页面。先从消耗CDN资源最多的应用开始,如detail、list、search和shop等。

      Webp图片格式推广 - 和申 - 和申的个人主页

 

Detail系统的范围

      装修模块和主图,将来再推广到描述中的关联营销图片。   

具体操作

方案一

CDN服务器判断用户是否使用的是Webkit核心浏览器,如果是则输出Webp格式。

优点:推广速度快,不需要其他应用做任何修改

缺点:

1.  风险较大,使用Webp对图片质量有一定影响,可能会引起卖家的反弹。

2.  将来通过Flash等技术可以在IE等浏览器上展示Webp,还是需要在相关页面上处理。

3.  不能进行ABTest,没办法计算是否对点击、转换率等是否有影响。

方案二

在页面中通过js控制,如果浏览器支持Webp,则请求Webp格式的图片。

优化:

1.  风险比较小,可以针对产品特点确定哪些图片可以使用Webp,哪些不能使用。

2.  很方便进行ABTest,对比使用Webp和不使用Webp对点击和转化率等的影响。

3.  样式中的图片不能使用Webp格式

缺点:需要每个应用推广,推广成本比较高。

难点

1.  目前只有大部分Webkit核心浏览器支持Webp,另外需要确定其他使用Webkit核心的浏览器是否支持Webp

2.  通过监控数据证明使用Webp可以有效的降低网络带宽。目前CDN与不能统计,在Chrome中也没办法通过js读取图片的文件大小。不过可以与CDN合作,申请其他CDN域名,进而得到Webp图片使用的带宽。

测试

1.  在业务上可以使用Webp的地方,在不支持Webp格式的浏览器中使用原图片展示(JPEG/JPG/PNG/GIF等),在支持Webp的浏览器中使用Webp格式请求。

2.  选择部分用户或者部分宝贝(如用户id或宝贝id可以被10整除)的数据进行ABTest,通过数据监控对比用户的平均点击数/成交转换率等。

数据监控

1.  埋点记录浏览器是否支持Webp格式

2.  申请使用新的CDN图片域名,监控CDN的流量情况。

3.  分析对比使用和没使用Webp图片的页面点击率/成交转换率等。


统计信息唧唧歪歪唧唧网ggyygg.net
  评论这张
 
阅读(1093)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016