某些DPI统计数据排在第一位：
Mack Book Pro 13.3”具有 227 DPI （2560x1600px / 13.3英寸）。
iPhone 6s具有 326 DPI （750x1334px / 4.7英寸）。
Sony Xperia Z平板电脑具有 224 DPI （1920x1200px / 10.10英寸）。
但是，当我将JPEG图像保存为Web图像时，它具有 72 DPI ，并且仅当我将容器分辨率设置为图像分辨率的2倍时，图像才看起来不错。
例如，
<img src="200x200px_72dpi_image.jpg" width="100px" height="100px">
对于视网膜显示器（iPhone 6s，Mac Book Pro 13.3“等）产生良好的效果，并且
<img src="100x100px_72dpi_image.jpg" width="100px" height="100px">
产生不好的结果。
2018年我该怎么办？是否应将300 DPI图像用于网络？
答案 0 :(得分：1)
Apple认为他们对此主题有疑问，并发布了一些指导方针/建议以解决该问题。
这一切都归结为提供2x图像的网站如果客户端浏览器 CAN 支持它-否则默认恢复为72 DPI标准。< / p>
2018年图像DPI应该为72像素/英寸吗？
是的。支持更高分辨率的设备是相对较新的设备，尚未达到100％的市场饱和度。
是否应将300 DPI图像用于网络？
300 DPI可能会过大。该分辨率的图像将具有非常大的文件大小，并且与稍微像素化的图像相比，更长的加载时间可能会给用户带来更大的困扰。您需要设计一个符合业务需求的合理平衡。
2018年我该怎么办？
我的两分钱...
浏览JPEG以外的其他格式。探索SVG以获取艺术线条图形。 WebP也值得探索照片。
默认为72dpi，并选择采用更高的DPI。借助媒体查询和许多流行的现代CSS / JS框架，设备只需很少的精力即可在低分辨率默认值上加载2x资源。没错，您需要以不同的分辨率渲染相同的图像资源，但是可以自动进行。
时间。即使在2018年，这些东西仍在变化，供应商正在这个HDR领域竞争。期望-webkit，-moz和-ms前缀，直到达到标准为止（如果尚未全部准备就绪）。