面向高dpi显示屏的适配方案主要有以下几种：

1、javascript选择图片进行加载

方法：通过 window.devicePixelRatio 获取设备像素比率，获取屏幕宽度和高度，甚至可能通过navigator.connection或发出假请求，如foresight.js库做一些网络连接嗅探。
收集所有这些信息后再决定要加载哪个图片。

优点：兼容低版本浏览器

缺点：图像加载会有延迟

2、有服务端选择加载图片

方法：为每个图片编写自定义请求处理程序来处理。
这样的处理程序将基于User-Agent（中继到服务器的唯一信息）检查Retina支持。
然后，根据服务器端逻辑决定是否要提供高DPI图片来加载适当的资产（根据一些已知的惯例命名）。

优点：兼容低版本浏览器

缺点：用户代理不一定提供足够的信息来决定设备是否应该接收高质量或低质量的图像。此外，与User-Agent相关的任何内容都可能成为被攻击的漏洞，应该尽量避免使用。

3、通过CSS媒体查询

方法：

#my-image { background: (low.png); }
 
@media only screen and (min-device-pixel-ratio: 1.5) {
  #my-image { background: (high.png); }
}

优点：兼容比较广泛，ie9以上浏览器基本都支持；可以灵活地选择响应断点（例如，可以加载低，中和高DPI的图片）。

缺点：代码量比较大，此方法仅限于CSS属性，所有的图片必须都是背景元素。

4、使用更新的浏览器特性

方法：

css的image-set属性

background-image: url(icon1x.jpg);
background-image: -webkit-image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);
 
background-image: image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);

html的srcset属性

<img alt="my awesome image"
  src="banner.jpeg"
  srcset="banner-HD.jpeg 2x, banner-phone.jpeg 640w, banner-phone-HD.jpeg 640w 2x">

优点：代码清晰，代码量较少，适配比较简单

缺点：稍微低版本的浏览器都不兼容，不过没关系，至少可以显示默认尺寸的图片

5、个人感觉的最优方案

所有的图标尽量用svg和css来实现，而高品质图片可以结合上一方案的浏览器新特性来适配。