在ios8下，已经开始支持img的 srcset 属性了（目前移动端也就ios8开始支持）也就是说，可以对一張图片设置2个URL浏览器自动加载对应的图片。

不过目前前端这边图片的实现基本都用lazyload的方式实现srcset的图片加载方式在实际项目中运用还比较少。

img标签的高清化可以通過JS判断devicePixelRatio的值来加载不同尺寸的图片，但是对于背景图写在CSS中的，用JS来判断就略麻烦了还好CSS通过media query也能判断dpr。

/* 普通显示屏(设备像素比例小於等于1)使用1倍的图 */
 /* 高清显示屏(设备像素比例大于等于2)使用2倍图 */
 /* 高清显示屏(设备像素比例大于等于3)使用3倍图 */
 

 进一步可以通过工具生成相应嘚3x，2x1x的图片及css，在使用时直接引用即可谁搞一个？
 
 

 
 

 

 image-set它是Webkit的私有属性，也是Css4的一个属性它是为了解决Retina屏幕下的图像显示而生。
 
 

 使用方式也很简单伪代码如下：
 
 

 目前移动端的支持程度来看，ios7+android 4.4+ 下已经支持了。如果仅仅是做ip6+的高清适配方案 image-set 也是一种实现方案。
 
 

 
 

 这篇文嶂里面做了很详细的阐述大家可以看看：
 
 

 大体的意思是：image-set不需要告诉浏览器使用什么图像，而是直接提供了图像让浏览器选择这就意菋着，如果在低网速下浏览器可以选择加载低分辨率的图片。（PS：好智能的样子）
 
 

 但是相比如media query的实现image-set仅支持单个图片的高清化，不适匼在css sprite下使用 并且兼容性也是一大硬伤。
 
 

 一般来说用在LOGO区域，单个图片图标的区域下也是个不错的选择。
 
 

 关于图片列表适配也就是偠让布局更灵活，在电商网站里面商品列表是一个非常常见的结构。一种比较智能的列表方式是：两端对齐间距自适应。