转载

image-set,srcset,webp的一些尝试

image-set

image-set 可以根据设备像素比（device pixed ratio）匹配不同大小的背景图，先看看 demo 。实现的代码如下

background: url(../img/icon.png) no-repeat; background-image: -webkit-image-set(url(../img/icon.png) 1x,     url(../img/icon@x2.png) 2x);

这个方法相比媒体查询，不用设置 background-size ，不用重新计算 background-position ，只要在拼sprite的时候导出两种尺寸的图片。 image-set兼容性如下表

srcset 和 image-set 类似，用来设置前景图，用法如下

这样支持的会加载 srcset 里面的地址，不支持的加载 src 的地址， srcset兼容性如下表

image-set,srcset,webp的一些尝试

webp 是谷歌推广的一种图片格式，相比同等质量的jpg，可以减少三分之二的体积，所以可以对支持webp的chrome浏览器做优化。 webp兼容性如下表

image-set,srcset,webp的一些尝试

写两个1x的图片地址，默认会加载第一个，不支持webp格式的ipad会用后面的jpg格式。查看demo

但是这个方法ipad会加载不出图片，查看demo 。

调整下顺序就可以了，查看demo ，但是这样chrome就加载了jpg的图片，而不加载webp格式的图片，所以目前webp还不能这样用。

正文到此结束

所属分类：编程技术

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

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