php改变jpg图片dpi_【前端技术】Web端高dpi图片适配方案

最近经手一个web项目，需要考虑前端多种尺寸屏幕的图片适配问题，也是关于ui设计导出1X&2X切图如何使用的方法，现在整理一下高dpi屏幕的web端适配方案，希望对大家能有帮助。

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

1、javascript选择图片进行加载

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

优点：兼容低版本浏览器

缺点：图像加载会有延迟

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

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

优点：兼容低版本浏览器

缺点：用户代理不一定提供足够的信息来决定设备是否应该接收高质量或低质量的图像。此外