DPI vs PPI — 画面と印刷で「解像度」が違う理由

厳密には別の概念ですが、日常的には混同されています。Photoshopの「画像解像度」ダイアログでも「ピクセル/インチ」と「ドット/インチ」を同義のように扱っています。本記事では慣例に従い、印刷文脈ではDPI、画面文脈ではPPIを使い分けます。

人間の視力には限界があります。正常視力（1.0）の人が30cm離れて見たとき、識別できる最小の点は約0.085mm。これは1インチ（25.4mm）あたり約300ドットに相当します。

つまり300DPIは「普通の人が手に持って読む距離で、ドットが見えなくなる境界」です。これが商業印刷の標準になった理由です。

距離と必要DPIの関係

駅の大型看板は実は72DPI程度で印刷されています。遠くから見るため、粗さが気にならないのです。逆に、名刺を72DPIで刷ると、ギザギザが見えてしまいます。

JPEG/PNGファイルのメタデータには「72dpi」「300dpi」といったDPI情報が記録されています。しかし、この数値を変えても画像の見た目は一切変わりません。

例えば、3000 x 2000 ピクセルの写真があるとします。

ピクセル数は同じ。DPI設定を変えると、同じピクセルをどの大きさに引き延ばすかが変わるだけです。DPIを上げても画質は上がりません — 印刷サイズが小さくなるだけです。

「画像を300DPIにしてください」という指示の本当の意味は、「印刷したい寸法 × 300で計算したピクセル数を確保してください」です。

印刷に必要なピクセル数は、シンプルな掛け算で求まります。

必要ピクセル数 = 印刷サイズ(inch) × DPI
             = 印刷サイズ(mm) ÷ 25.4 × DPI

具体例

スマートフォンのカメラは12MP程度が一般的なので、A4チラシ(8.7MP)は問題なくカバーできます。A3の300DPIには17.4MPが必要なので、少し足りないケースも出てきます。

AppleがRetinaディスプレイを発表した2010年以降、Web制作では「2x画像」が常識になりました。これはPPIと深く関係しています。

CSSの width: 100px は「CSS上の100ピクセル」であり、2xディスプレイでは物理的に200ピクセルが使われます。つまり、100x100pxのCSS領域に100x100の画像を置くと、2xディスプレイでは200x200に引き伸ばされてぼやけます。

これを防ぐために表示サイズの2倍（または3倍）のピクセル数を持つ画像を用意します。srcset属性で:

<img
  src="hero-400.jpg"
  srcset="hero-400.jpg 1x, hero-800.jpg 2x, hero-1200.jpg 3x"
  width="400"
  height="300"
  alt="..."
/>

2xディスプレイには hero-800.jpg、3xには hero-1200.jpg が自動選択されます。

よくある失敗パターン

• 「画像を72DPIから300DPIに変換して」 → Photoshopで「再サンプル」せずにDPIだけ変更。ピクセル数は同じなので印刷サイズが1/4以下に縮小。内容は同じ。
• 「Web用だから72DPIでいい」 → Webにはそもそも「DPI」の概念がない。ブラウザはピクセル数だけを見ます。メタデータの72DPIは完全に無視されます。
• 「300DPIの画像を納品した」が粗いと言われる → DPIが300でも、元のピクセル数が足りなければ小さく印刷される or 引き伸ばされてぼける。重要なのはピクセル数。

正しい確認方法

クライアントや印刷所とやりとりするときは、DPIではなく以下を確認してください。

1. 印刷したい仕上がりサイズ（mm）
2. 必要なDPI（通常300、ポスターなら150-200）
3. 上記から計算した必要ピクセル数

• DPIは印刷のインクドット密度、PPIはディスプレイのピクセル密度
• デジタル画像に「本当のDPI」はない — あるのはピクセル数だけ
• 300DPIが標準なのは、人が30cmで見たときドットが識別できなくなる密度だから
• 必要ピクセル = 印刷サイズ(mm) ÷ 25.4 × DPI
• Retinaの「2x」は CSS 1px に 物理 2px を割り当てる仕組み
• DPIの数字に惑わされず、印刷サイズに対して十分なピクセル数があるかを確認する