转载

android与ios自动选取webp格式图片

最近在研究如何在h5中使用webp格式的图片，WebP格式是google开发的一种旨在加快图片加载速度的图片格式，当初想着就用js来做图片替换，但这样太不靠谱，也影响页面的性能，所以查找一下有没有好办法像video的sorce方式，让浏览器自动判断？

答案是肯定。

目前在淘宝UED（ http://ued.taobao.org/blog/2013/01/css-and-html5-adaptive-images/ ）上发现已经有新的方案出现：

实现自动判断是否支持webp的格式：

<picture>           <source srcset="../images/share.webp"/>         <img src="../images/share.jpg" alt=""/> </picture>

但问题又来了，如果我用的是css的background-image怎么办？怎样来区分是否支持？

从目前自己测试来看，可以用@media来区分，目前android4.0 以上都支持webp格式，就ios不受支持，那只能判断一下手机平台就可以，SO 代码可以这样写：

#firstTabC .videoBox .playImg{    background-image: url("../images/cover.webp"); }

@media screen and (resolution){     #firstTabC .videoBox .playImg{         background-image: url("../images/cover.webp");     } }

目前ios7-9.2都不支持resolution这个属性，Android 4.3与Android 4.4以上均被支持，这样页面就可以友好支持webp格式的图片。

正文到此结束

所属分类：编程技术

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。