短い結論：DPI はウェブの品質スイッチではありません
通常のウェブ画像では、72 DPI と 300 DPI の違いはオンラインでの見た目のシャープさを決めません。ブラウザが主に扱うのは次のものです。
- 画像の実ピクセル寸法（例：1200 × 800）
- ページ上の CSS サイズ（例：幅 600 px）
srcsetやsizesなどのレスポンシブ画像ルール- 画面のデバイスピクセル比
- 書き出したファイルの圧縮と画像フォーマット
72 DPI とタグ付けした 1200 × 800 の JPG と、300 DPI とタグ付けした同じ 1200 × 800 の JPG は、ウェブページ上でほぼ同じに表示されます。含まれるピクセルは同一で、DPI 値はそもそも印刷用の指示に近いものです。
DPI が意味を持ち始めるのは、画像が物理サイズに落ちるときです。300 DPI で 2 × 2 インチのパスポート写真を作るなら 600 × 600 ピクセル、300 DPI で 4 × 6 インチのフォトを刷るなら 1200 × 1800 ピクセルが必要です。ここではじめて DPI という数字が役に立ち、ピクセルをインチやミリに結び付けます。
つまり「300 DPI で」と言われたら、次のように聞き返すのがいちばん確実です。
それは印刷のためですか、それともウェブ用にピクセルの多い画像が欲しいのですか？
DPI・PPI・ピクセル・CSS ピクセル
DPI という言葉はいろいろな意味で使われるので、ネット上のアドバイスがしばしば食い違います。
| 用語 | 意味 | 重要になる場面 |
|---|---|---|
| DPI | Dots per Inch。もともとはプリンターのインクドット | プリンターおよび印刷の慣用表現 |
| PPI | 画像や印刷レイアウトにおける 1 インチあたりのピクセル数 | デジタル画像の印刷サイズ |
| ピクセル寸法 | ファイルの実際の幅と高さ（ピクセル） | ウェブ・アプリ・印刷・リサイズ |
| CSS ピクセル | ブラウザが用いるレイアウト単位 | ウェブレイアウトとレスポンシブ画像 |
| デバイスピクセル比 | CSS ピクセルあたりの物理的な画面ピクセル数 | Retina・HiDPI ディスプレイ |
デジタル画像ファイルには PPI の方が正確な呼び方です。ファイルにインクドットは入っておらず、入っているのはピクセルです。とはいえ検索されるのは「DPI」、写真店が使うのも「DPI」、クライアントが PPI の意味で DPI と言うことも多いので、この記事では両方を意識して使い分けます。
実用的な公式はシンプルです。
ピクセル = 印刷インチ × PPI
印刷インチ = ピクセル / PPI
幅 3000 ピクセルの写真なら、300 PPI で 10 インチ幅、150 PPI で 20 インチ幅、72 PPI なら 41.7 インチ幅に印刷できます。ファイルそのものが良くなったり悪くなったりするわけではなく、同じピクセルを紙にどれだけ密に置くかを決めているだけです。
画像内の DPI 値が実際にしていること
多くの画像フォーマットは解像度や密度の値を保持できます。日常のソフトでは次のように現れます。
- 72 DPI
- 96 DPI
- 240 PPI
- 300 PPI
- Photoshop の「解像度」フィールド
- JPG や PNG に埋め込まれた水平・垂直の密度メタデータ
この値はあくまでメタデータで、その密度に従うレイアウトに画像を配置する、あるいは印刷するときの推奨サイズを示唆するだけです。ディテールを追加してくれるわけではありません。
3000 × 2000 の写真を例にしてみます。
| メタデータタグ | 実ピクセル | 推奨印刷サイズ |
|---|---|---|
| 72 DPI | 3000 × 2000 | 41.7 × 27.8 in |
| 150 DPI | 3000 × 2000 | 20 × 13.3 in |
| 300 DPI | 3000 × 2000 | 10 × 6.7 in |
ピクセルは同じ。推奨印刷サイズだけが違います。
ここで多くの人がつまずきます。DPI フィールドだけをいじっても、画像をウェブ用にリサイズしたことにも、圧縮したことにも、シャープにしたことにもなりません。印刷向けのラベルを差し替えただけです。
ブラウザが代わりに参照しているもの
一般的なウェブページの表示では、ブラウザはファイルのピクセルデータとページ側のレイアウト指示を見ています。
HTML や CSS が「この画像は 600 CSS ピクセル幅で表示する」と言っていれば、ブラウザは 600 CSS ピクセル幅で並べます。ここに 1200 ピクセル幅のソースを渡せば 2 倍密度の高密度ディスプレイに十分ですし、400 ピクセル幅しか渡さなければブラウザが引き伸ばすためにぼやけて見えがちです。
そのため、ウェブ画像の作業はたいてい次のように語られます。
- ヒーロー画像：想定される最大表示幅前後で書き出し、必要ならレスポンシブなバリエーションを用意する。
- ブログ画像：デザインがそれ以上を要求しない限り、幅 1200〜1600 px 程度を用意する。
- サムネイル：カードの表示サイズに近い形で書き出す。
- Retina 用アイコン：CSS サイズに対して 2 倍・3 倍のソースピクセルを用意する。
- 重いページ：DPI タグではなく、ピクセルの縮小と圧縮で軽くする。
MDN の naturalWidth の解説はここで役立ちます。画像の幅を CSS ピクセルで説明していて、「DPI タグに書かれた値」ではありません。同じく MDN のレスポンシブ画像ガイドは、srcset と sizes がレイアウトやデバイスの状況に合わせて適切なソースを選ぶ手掛かりだと説明しています。
技術的な補足も一つ。CSS には実験的な image-resolution プロパティがあり、W3C CSS Images は画像解像度のメタデータについて触れています。MDN は現時点で image-resolution を実験的と位置づけ、本番で頼れるブラウザサポートには達していないと注意しています。通常のウェブ公開では、JPG や PNG の DPI メタデータがページ上の見た目のサイズを支配するとは考えない方が安全です。
なぜ「ウェブは 72 DPI」が慣習になったのか
「ウェブは 72 DPI」というルールは、多くが受け継がれた慣習です。
初期のデスクトップパブリッシングでは、スクリーンのピクセル・ポイント・インチが今より近い関係でつながっていました。古い Macintosh のスクリーン慣習はしばしば 72 ピクセル／インチに関連づけて語られます。そこに Windows と CSS の歴史が加わり、96 DPI が持ち込まれました。W3C CSS Values は 1in = 96px という固定関係を定義し、MDN の解像度のドキュメントは CSS では 1dppx が 96dpi に対応すると説明しています。
だからといって、ウェブ画像を 96 DPI で書き出すべきという話ではありません。
CSS はレイアウト単位のための基準系を持っている、というだけの話です。実際のウェブ画像は、表示されるサイズに見合うピクセル数を今も必要とします。幅 5000 px の写真は、72 DPI でも 300 DPI でも 300 px のサムネイルには重すぎますし、幅 400 px のロゴは 600 px のスロットに置けば DPI フィールドが何であってもぼやけがちです。
ウェブ画像で本当に問うべきなのはこちらです。
この画像はレイアウト上で何ピクセルの領域を占めるか。自分が対応したい画面のために、何ピクセルのソースを用意すべきか。
Photoshop のリサンプリング罠
Photoshop や類似ツールは、幅・高さ・解像度を一つのダイアログにまとめて見せます。印刷用途では便利ですが、ウェブ作業では落とし穴になります。
Adobe の画像サイズ関連ドキュメントは次のように区別しています。
- ピクセル数（Dimensions）：ピクセルの総数。
- 幅と高さ：単位により物理サイズかレイアウトサイズを表す。
- 解像度：印刷品質のための 1 インチあたりのピクセル数。
- 再サンプル：ピクセルを増やす／減らす操作。
要になるスイッチが 再サンプル です。
再サンプルをオフにすると、72 PPI から 300 PPI へ変えても、ピクセルはそのままで印刷サイズとの対応関係が変わるだけです。3000 × 2000 のファイルは 3000 × 2000 のまま、これは純粋にメタデータレベルの操作です。
再サンプルをオンにすると、幅と高さの入力次第でピクセルが追加・削除されます。画像データが変化するので、ファイルが大きくなったり小さくなったり、シャープになったりぼやけたりします。無理に拡大するとインターポレーションのアーティファクトも出やすくなります。
ウェブ用途では「72 DPI にして」という漠然とした指示は避け、目的を具体的に伝えましょう。
- 「1600 px 幅にリサイズして。」
- 「320 px のサムネイルを書き出して。」
- 「この JPG を 200 KB 以下に圧縮して。」
- 「600 CSS px スロット向けの 2 倍画像として、幅 1200 px で書き出して。」
DPI を変えるとファイルサイズは変わる？
たいていは変わりません。
DPI／PPI のメタデータだけを書き換えた場合、ファイルサイズは変わらないか、メタデータ分の数バイト程度動くだけです。画像データは相変わらず同じピクセルの格子です。
ファイルサイズが変わるのは、次のどれかを行ったときです。
- ピクセル寸法をリサイズする。
- 画像の一部を切り抜く。
- JPG／WebP／AVIF の品質を下げる。
- 別のフォーマットに変換する。
- EXIF などのメタデータを削除する。
- 透明度を統合する。
- アニメーションのフレーム数や長さを削る。
サイトが「500 KB 以下」と決めているのに、300 DPI から 72 DPI に変えるだけでは解決しません。画像をリサイズするか、圧縮するか、両方行いましょう。
300 DPI が本当に効くとき
300 DPI は近距離で見る印刷物にとって便利な目安で、印刷ファイルが最終出力の 1 インチあたり 300 ピクセルを備えていることを意味します。
典型的な 300 DPI のケース：
- パスポートやビザ用の写真。
- 4 × 6 や 5 × 7 インチのフォト印刷。
- 小さめのフライヤーやパンフレット。
- 本や雑誌の画像。
- 近くで読まれる商品ラベル。
- 小さな文字や細い線が重要なスキャン。
計算はこちら。
| 出力サイズ | 300 DPI でのピクセル |
|---|---|
| 1 × 1 in | 300 × 300 |
| 2 × 2 in パスポート写真 | 600 × 600 |
| 35 × 45 mm ID 写真 | 約 413 × 531 |
| 4 × 6 in フォト | 1200 × 1800 |
| 5 × 7 in フォト | 1500 × 2100 |
| 8 × 10 in 印刷 | 2400 × 3000 |
| A4 ページ | 約 2480 × 3508 |
印刷では物理サイズが省略できません。「300 DPI」だけでは情報として不足で、300 DPI の 2 × 2 インチパスポート写真は 600 × 600 ピクセル、300 DPI の A4 ページは約 2480 × 3508 ピクセルです。同じ 300 DPI でもまったく別物のファイルになります。
300 DPI がそれほど重要でないとき
次の用途では、300 DPI を追いかけても焦点がずれています。
- ウェブサイトの画像
- SNS 投稿
- メールの添付ファイル
- 商品サムネイル
- ブログのスクリーンショット
- アプリアイコンや UI グラフィック
- ピクセル寸法とファイルサイズをバリデートするオンラインフォーム
いくつかのアップロード窓口は、最終的に印刷されるからという理由で DPI に触れています。ただしその場合でも、実際にチェックしているのはピクセル寸法・アスペクト比・ファイルサイズ・カラーモード・顔位置などで、メタデータタグそのものではないことが多いのです。「2 × 2 インチ、300 DPI」と書いてあれば、ピクセルに換算してください。600 × 600 です。
画面向けにはピクセル要件、印刷向けにはピクセル要件＋物理サイズ、これがコツです。
Retina や HiDPI は「300 DPI」ではない
高密度ディスプレイは古い画面より多くのソースピクセルを必要としますが、それはファイルのメタデータを 300 DPI に書き換えるのとは別の話です。
例：
- デザインでは商品写真を 600 CSS ピクセル幅で表示する。
- 1 倍ディスプレイなら幅 600 px のソースで十分。
- 2 倍ディスプレイなら幅 1200 px のソースが望ましい。
- 3 倍ディスプレイなら、ディテールが重要な場合に幅 1800 px のソースが役立つ。
ファイルは 72、96、300 DPI のいずれでタグ付けされていても、このレイアウトの理屈は変わりません。決め手はソースピクセルと表示 CSS ピクセルの関係です。
だからこそレスポンシブ画像は 1200w や 2x のような記述子を使い、「300dpi」を使わないのです。ブラウザは、実際にレンダリングされるサイズ・画面密度・ネットワーク状況に応じて、十分なピクセルデータを持つ画像を選ぼうとしています。
よくある依頼の翻訳
DPI の変更依頼は、実は別のことを言っている場合が多いものです。ファイルに手を入れる前に、依頼を翻訳しましょう。
| 依頼 | 追加で聞くこと | 実際にすること |
|---|---|---|
| 「これを 300 DPI にして」 | 物理的な印刷サイズは？ | ピクセル = インチ × 300 で計算する |
| 「ウェブ用に 72 DPI にして」 | 表示幅かサイズ上限は？ | ピクセルをリサイズ／圧縮する。DPI タグは目標ではない |
| 「オンラインでぼやけて見える」 | どの CSS サイズで表示している？ | ソースピクセルを増やす、または圧縮を見直す |
| 「印刷所から低解像度と言われた」 | どのサイズで印刷している？ | 高解像度のソースを使う、または印刷サイズを小さくする |
| 「ファイルが大きすぎる」 | バイトの上限は？ | リサイズ＋圧縮。DPI 変更だけでは足りない |
| 「300 DPI のパスポート写真が要る」 | どの国のどの用紙サイズ？ | 正確な写真寸法を使い、100 % で印刷する |
このもう一言の質問が、DPI まわりのミスを大幅に減らします。
PhotoTools は DPI 関連のタスクをどう扱うか
PhotoTools は、出力を実際に変えるもの、つまりピクセルを軸に設計されています。
ウェブ作業では：
- リサイズで実ピクセル寸法を決める。
- ファイルサイズ目標があれば圧縮を使う。
- オリジナルには触らない。
hero-1600.jpgやcard-600.webpのように用途がわかる名前でウェブ用コピーを書き出す。
パスポートや ID 写真の印刷では：
- パスポート写真メーカーを開く。
- 2 × 2 インチ、35 × 45 mm、あるいはカスタムサイズなどのプリセットを選ぶ。
- ツールが選択された DPI で物理的な写真サイズをピクセルに換算する。
- ブラウザ内で 4 × 6 または 6 × 4 インチの印刷シートを組み立てる。
- 実寸で 100 % 印刷し、「用紙に合わせる」は必ずオフにする。
- 提出前に印刷された写真をものさしで測る。
内部処理では、選ばれた写真サイズ・シートサイズ・DPI からピクセル寸法を計算しています。たとえば 4 × 6 インチのシートを 300 DPI にすると 1200 × 1800 ピクセルのキャンバスに、2 × 2 インチの写真枠を 300 DPI にすると 600 × 600 ピクセルになります。
これが本物の印刷レイアウトです。小さなウェブ画像を開き、メタデータフィールドを 300 に書き換えて印刷がシャープになることを祈るのとは、まったく別物です。
実用チェックリスト
だれかが DPI に触れたからといってファイルを直しに行く前に、次の項目を確認してください。
- 目的地がウェブなら、ピクセル寸法とファイルサイズ制限を聞き取る。
- 目的地が印刷なら、物理サイズと目標 DPI／PPI を聞き取る。
- ファイルが重い場合はメタデータではなく、リサイズか圧縮を行う。
- 画像がぼやける場合はソースピクセル・圧縮・表示サイズを確認する。
- 印刷が甘い場合はソースにピクセルが足りているか計算する。
- 印刷サイズが違う場合はプリンターのスケーリングと用紙サイズを確認する。
- パスポートやビザ写真なら、印刷結果を実測し公式要件を照合する。
要点はひとつ。DPI はピクセルと紙をつなぐもの、ウェブを支配するのはピクセルと CSS。
参照した技術資料
本記事は次を照合して見直しました。
- W3C CSS Values and Units Module Level 4：CSS の絶対単位、解像度単位、
1dppx = 96dpiの関係。 - W3C CSS Images Module Level 4：CSS における画像解像度の定義と
image-resolutionプロパティ。 - MDN: image-resolution：現状の実装ノートと CSS
image-resolutionの実験的ステータス。 - MDN: HTMLImageElement naturalWidth：CSS ピクセル単位でブラウザが画像を扱う仕組み。
- MDN: img 要素リファレンス：
srcset、sizes、幅記述子、ブラウザのソース選択について。 - Adobe Photoshop — 画像のサイズと解像度：ピクセル数、解像度、再サンプルの区別。
- Adobe Photoshop — サイズ変更と再サンプル：再サンプルがピクセルを書き換える仕組みと、解像度や物理サイズが印刷側の概念である理由。
まとめると、DPI タグをいじることが正解になるケースは多くありません。まず出力先を決め、そのうえで出力先が本当に必要としているピクセル・圧縮・印刷レイアウトを整えましょう。