在提交大图项目交付给客户或者对接设计师的切图时，我们经常听到很多指导性的意见，例如“网页图片分辨率必须是 72 DPI！”或者“印刷输出需要 300 DPI 精度！”。这两个词汇甚至在 Photoshop 属性框内长年同台展示，让许多普通开发者极易混淆：

1. PPI (Pixels Per Inch, 每英寸像素)

PPI 是针对数字物理屏幕显示器的精确量度。它指的是每英寸长的屏幕内，总共排布了多少个会发光的液晶发光格（物理像素点）。

  • 常见体现: 苹果的视网膜屏 (Retina Displays) 或者是各种手机的 2K/4K 屏幕，它们的 PPI 极高，所以显示字迹极度细润。
  • 决定因素: 纯粹由硬件厂商制作屏幕的物理密度决定。

2. DPI (Dots Per Inch, 每英寸墨点)

DPI 是纯机械印刷和喷墨设备打印出的纸张介质物理网点精度。

  • 常见体现: 这指的是一台喷墨或激光实体打印机在把图片吐在纸上时，一英寸长的纸面上总共需要喷涂多少个微米级别的微小 C、M、Y、K 四色墨水圆点。
  • 决定因素: 只由你的物理打印机性能设定，和网页代码无关。

震惊无数网页前端与UI设计师的技术真相

在纯数字屏幕和浏览器（Safari、Chrome等）上，网页只关心像素的高度和宽度（如 $800 \times 600$ 像素），它压根不看所谓的 “300 DPI” 隐藏头！

哪怕您刻意把一张 JPG 用修图软件把分辨率属性头写成令人战栗的 “9999 DPI” 或者贬为 “1 DPI”，只要它在网格里的像素宽高依旧是 $600 \times 600$ px，它在浏览器中开出来的面积、画质、和速度都是百分之百一模一样的。DPI 只在您决定要把这张数字图像“打印到纸张上”时才派上用场。