2018年图像DPI应该是72pixels/inch吗？答案

【问题标题】：Should image DPI be 72pixels/inch in 2018?2018年图像DPI应该是72pixels/inch吗？
【发布时间】：2018-12-05 10:03:05
【问题描述】：

首先是一些 DPI 统计数据：

Mack Book Pro 13.3" 具有 227 DPI（2560x1600 像素/13.3 英寸）。

iPhone 6s 具有 326 DPI（750x1334 像素/4.7 英寸）。

Sony Xperia Z 平板电脑具有 224 DPI（1920x1200 像素/10.10 英寸）。

但是，当我为网络保存 JPEG 图像时，它具有 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 年我能用它做什么？ Web 是否应该使用 300 DPI 图像？

【问题讨论】：

【解决方案1】：

Apple 认为他们会对这个主题有疑问，并发布了一些如何处理它的指南/建议。

这一切都归结为提供 2x 图像的网站如果客户端浏览器可以支持它 -- 否则默认回到 72 DPI 标准。

2018年图像DPI应该是72pixels/inch吗？

是的。支持更高分辨率的设备相对较新，尚未达到 100% 的市场饱和度。

300 DPI 图像是否应该用于网络？

300 DPI 可能是矫枉过正。该分辨率的图像将具有非常大的文件大小，并且与稍微像素化的图像相比，用户可能会因较长的加载时间而被推迟。您需要设计一个符合您业务需求的合理平衡。

2018 年我能用它做什么？

我的两分钱...

探索 JPEG 以外的其他格式。探索 SVG 以获取艺术线条图形。 WebP拍照也值得探索。
默认为 72dpi，并选择加入更高的 DPI。借助媒体查询和许多流行的现代 CSS/JS 框架，设备只需很少的努力即可在低分辨率默认值上加载 2x 资源。诚然，您需要以不同的分辨率渲染相同的图像资源，但这可以自动化。
时间。即使在 2018 年，这些东西仍在发生变化，供应商也在这个 HDR 领域展开竞争。期待-webkit、-moz 和-ms 前缀，直到达到标准（如果还没有准备好）。

【讨论】：