解像度をめぐる混乱は広く見られますし、無理もありません。同じ言葉が、文脈によって別のものを指すからです。カメラはメガピクセルで語り、PhotoshopはPPIで語り、印刷所は300 DPIを求め、Googleはウェブ用の画像に「Retinaディスプレイに耐える解像度」を勧めます。ソフトごと、職種ごとに語彙の使い方が違うように見えるのも当然です。
この記事では、それぞれの概念を本来の位置に置き直し、互いの関係と、実務のどの場面で何が効いてくるのかを説明します。
ピクセルとは何か
ピクセルは picture element 、つまり「画像の要素」の略です。ラスター形式のデジタル画像における最小単位で、それ以上分けられない一つの色の点を指します。
デジタル画像は、ピクセルが長方形の格子状に並んだものです。各ピクセルは色の値を持ち、通常は赤(R)・緑(G)・青(B)の三つのチャンネルで表され、それぞれ256段階(0〜255)をとります。つまり8ビットのRGBでは、1ピクセルあたり256の3乗、約1677万色を表現できます。
ピクセルは抽象的な単位で、それ自体に物理的な大きさはありません。大きくも小さくもなく、格子の中の色の値でしかないのです。それが現実にどれだけの面積を占めるかは、表示や印刷の条件によって完全に決まります。
解像度をめぐる混乱の核心はここにあります。 ピクセルは物理的な寸法を持たない、抽象的な空間に存在している。解像度の話をするとき、私たちはつねに、この抽象的なピクセルを画面や紙という物理的な空間へどう対応させるかを論じているのです。
画像解像度とは
「解像度」という言葉には、しばしば混同される二つの異なる意味があります。
- 総ピクセル数としての解像度: 「この画像の解像度は3840×2160ピクセルです」という言い方です。ここでの解像度は、横と縦のピクセル数そのものを指します。この意味での「高解像度」とはピクセルが多いということで、細部まで写り、拡大や大判印刷にも耐えます。
- 密度としての解像度: 「この画像は300 DPIです」という言い方です。ここでの解像度は、一定の長さの中にピクセル(あるいは点)がいくつ収まるかを指します。デジタルの空間(ピクセル)と物理的な空間(センチ、インチ)を結びつける値です。
デジタル画像の品質と「大きさ」を決めるのは、前者、つまり総ピクセル数です。後者の密度が意味を持つのは、印刷のように画像を物理的な寸法に当てはめる必要があるときだけです。
PPI(Pixels Per Inch)とは
PPIは 1インチあたりのピクセル数 (pixels per inch)を表します。画面やデジタル画像におけるピクセルの密度を示す値で、1インチの直線上にピクセルが何個並ぶかを表します。
24インチのフルHDモニターは1920×1080ピクセルで、画面の横幅は実寸でおよそ21.5インチです。したがって 1920 ÷ 21.5 ≈ 89 PPI。画面の1インチに89個のピクセルが並んでいることになります。
iPhone 15 Proは6.1インチの画面に2556×1179ピクセルを持ち、横幅は実寸で2.82インチです。したがって 2556 ÷ 2.82 ≈ 460 PPI 。一般的なモニターの5倍を超える密度です。
画面のPPIは精細さを左右します。PPIが高いほど一つひとつのピクセルは小さくなり、肉眼では判別しにくくなり、映像は鮮明に見えます。Appleが「Retinaディスプレイ」と名づけたのは、通常の使用距離では300 PPIを超えると人の目が個々のピクセルを見分けられなくなるためです。
📐 PPIは画面の性質であって、画像の性質ではありません。 モニターのPPIは、解像度と画面の物理的な大きさで決まる固定値です。1200×800ピクセルの画像は、89 PPIのモニターでは一定の大きさを占めますが、460 PPIの画面では4分の1ほどの大きさに見えます。ピクセル1個が物理的に小さいからです。
DPI(Dots Per Inch)とは
DPIは 1インチあたりの点の数 (dots per inch)を表します。もともとは、プリンターが紙に置くインクの点の密度を指す言葉です。600 DPIのプリンターは、紙の1インチの直線上に600個の点を置きます。
グラフィックデザインの現場では、印刷用画像のピクセル密度を指す言葉として、DPIとPPIはほぼ同じ意味で使われています。印刷所が「300 DPIのデータで」と言うのは、仕上がり寸法の1インチあたり300ピクセルを確保してほしい、という意味です。
ピクセル・PPI/DPI・物理寸法の関係
すべてを説明する中心的な式がこれです。
物理寸法(インチ)= 総ピクセル数 ÷ 密度(DPIまたはPPI)
横幅3000ピクセルの同じ画像で見てみましょう。
| 密度(DPI) | 結果として得られる横幅 | 主な用途 |
|---|---|---|
| 72 DPI | 3000 ÷ 72 = 41.7インチ(106 cm) | 解像度の低い旧来のディスプレイ |
| 96 DPI | 3000 ÷ 96 = 31.25インチ(79 cm) | Windowsの標準的なモニター |
| 150 DPI | 3000 ÷ 150 = 20インチ(51 cm) | 家庭用印刷として実用範囲 |
| 300 DPI | 3000 ÷ 300 = 10インチ(25.4 cm) | 商業印刷の品質 |
| 600 DPI | 3000 ÷ 600 = 5インチ(12.7 cm) | 精密な印刷(ごく小さな文字) |
注意したいのは、画像そのものは変わっていないことです。3000ピクセルはどの場合も同じです。変わるのは、そのピクセルを物理的な空間にどう配るかだけです。300 DPIならピクセル1個は1/300インチを占め、72 DPIなら1/72インチ、つまり4倍以上の面積を占めます。72 DPIで印刷した画像が粗く見えるのはこのためで、ピクセル1個が肉眼で見分けられる大きさになってしまうのです。
メガピクセルとは
1メガピクセルは100万ピクセルです。12メガピクセルのカメラは、およそ1200万ピクセルの画像を生成します。12 MPの代表的な解像度は4032×3024ピクセルで、掛け合わせると12,192,768ピクセル。これを丸めたものが、仕様に書かれた「12メガピクセル」です。
| 画素数 | 代表的な解像度 | 300 DPIでの最大寸法 |
|---|---|---|
| 8 MP | 3264 × 2448 px | 27.7 × 20.8 cm |
| 12 MP | 4032 × 3024 px | 34.2 × 25.6 cm |
| 24 MP | 6000 × 4000 px | 50.8 × 33.9 cm |
| 48 MP | 8064 × 6048 px | 68.3 × 51.2 cm(A1以上) |
| 108 MP | 12032 × 9000 px | 101.9 × 76.2 cm |
実務的な結論はこうです。最近のスマートフォン(12 MP以上)であれば、A4を300 DPIで印刷するのに十分すぎる解像度があります。一般的な判型において、足かせになるのはスマートフォンのカメラではありません。
なぜ「72 DPI」が「ウェブ用」とされたのか
デジタルデザインの慣習の中でも、もっとも古く、もっとも誤解されているもののひとつです。由来は歴史的なもので、1980年代の初期のMacintoshのモニターが1インチあたりおよそ72ピクセルでした。Appleがこれを基準に据えたのは、画面と印刷の対応を取りやすくするためです。活字の1ポイントがちょうど1/72インチだったからです。Photoshopは画面用ドキュメントの既定値に72 PPIを採用し、この慣習がそのまま残りました。
いまのモニターの密度は90〜140 PPI、最近のiPhoneは460 PPIに達します。画面を表す数値として、72 PPIはすでに時代遅れです。
ここから導かれるいちばん重要な点: デジタル画像のメタデータに書かれたDPIの値は、画面表示にまったく影響しません。1200×800pxの画像は、メタデータが「72 DPI」でも「300 DPI」でも、ブラウザ上ではまったく同じに表示されます。ブラウザはその値を無視し、ファイルの1ピクセルを画面の1ピクセルとして描くからです。DPIのメタデータが意味を持つのは、その画像を印刷するソフトで開いたときだけです。
💡 「ウェブは72 DPI」についての結論: これは惰性で残っている、時代遅れの慣習にすぎません。ウェブ用の画像で効いてくるのは ピクセル単位の寸法 であって、DPIではありません。1920×1080pxの画像は、メタデータが72 DPIでも300 DPIでも、フルHDモニターに問題なく対応します。
Retinaディスプレイと@2xという考え方
AppleがRetinaディスプレイを投入したのは2010年のiPhone 4で、その密度は326 PPI、当時のモニターのおよそ倍でした。そこで採られたのが、 論理ピクセルと物理ピクセルの分離:
- 論理ピクセル(CSSピクセル): コード上で使う単位です。CSSで
width: 300pxと指定した画像は、論理ピクセルで300個ぶんの幅を占めます。 - 物理ピクセル: 画面上の実際の点です。@2xのRetinaディスプレイでは、論理ピクセル1個が4個(2×2)の物理ピクセルで描かれます。@3xの画面では9個に対応します。
そのため、ラスター画像は十分な解像度で用意しないと、高密度の画面でぼやけて見えます。対処法は、表示寸法の2倍(または3倍)の画像を用意することです。
- 幅300pxで表示する画像 → 600px(@2x)または900px(@3x)で用意する
- 800×600pxで見せるギャラリー → 1600×1200pxのファイルを用意する
アップロードの前に、ImageToolsの サイズ変更 で寸法を正確に整えておきましょう。
印刷向けの解像度|必要なピクセル数の求め方
式はこうです。 ピクセル数 = 物理寸法 × DPI:
| 判型 | 実寸 | 必要なピクセル数(300 DPI) | おおよその画素数 |
|---|---|---|---|
| L判(10×15 cm) | 3.94 × 5.91インチ | 1181 × 1772 px | 2.1 MP |
| 2L判(13×18 cm) | 5.12 × 7.09インチ | 1535 × 2126 px | 3.3 MP |
| A5(15×21 cm) | 5.91 × 8.27インチ | 1772 × 2480 px | 4.4 MP |
| A4(21×29.7 cm) | 8.27 × 11.69インチ | 2480 × 3508 px | 8.7 MP |
| A3ポスター(29.7×42 cm) | 11.69 × 16.54インチ | 3508 × 4961 px | 17.4 MP |
| バナー 100×70 cm(150 DPI) | 39.37 × 27.56インチ | 5906 × 4134 px | 24.4 MP |
遠くから見る大判のバナーや掲示物であれば、150 DPIでたいてい足ります。名刺、写真、チラシといった手元で見る印刷物では300 DPIが基準です。
画面向けの解像度|本当に効いてくるもの
画面やウェブに載せる画像では、DPIのことは忘れてかまいません。押さえるべきは次の三点です。
- 表示領域 × 画面の倍率で寸法を決める。 @2xの画面で幅1440pxのバナーを見せるなら2880pxを、600pxで見せる商品画像なら1200pxを用意します。
- 必要以上に大きい画像は載せない。 サイト上で800×600pxとして見せるのに4032×3024pxの写真を置くのは無駄です。ブラウザは実際に使う12倍のピクセルを読み込むことになります。
- ウェブではDPIのメタデータは何の影響もない。 ウェブ用に「72 DPIで書き出す」か「300 DPIで書き出す」かは関係ありません。効いてくるのはピクセル数だけです。
DPIを上げても画質が良くならない理由
おそらくもっともよくある、そしてもっともやっかいな勘違いです。PhotoshopでDPIを変える方法は、[イメージ]→[画像解像度]に二通りあります。
- 再サンプルしない場合: ピクセル数は変わりません。Photoshopは仕上がり寸法を計算し直すだけです。72 DPIの720×540pxの画像は、300 DPIの720×540pxの画像になります。同じピクセルが、より狭い面積に収まるだけで、画質は少しも良くなっていません。
- 再サンプルする場合: Photoshopは補間によって新しいピクセルを作ります。既存のピクセルのあいだの値を計算して埋めるのです。ピクセル数は増えますが、それは作り出されたものです。仕上がりはなめらか、あるいはぼやけて見えるだけで、鮮明になることはありません。元の写真になかった細部を、計算で生み出すことはできないのです。
結論: 本物のピクセルを増やす唯一の方法は、もともと解像度の高い画像から始めることです。PhotoshopでDPIを変えても細部は生まれません。既存のピクセルを、別の物理的な広さに配り直しているだけです。
動画の解像度と画像の関係
| 動画の解像度 | ピクセル単位の寸法 | 1フレームあたりの画素数 |
|---|---|---|
| HD (720p) | 1280 × 720 px | 0.9 MP |
| Full HD (1080p) | 1920 × 1080 px | 2.1 MP |
| 4K UHD | 3840 × 2160 px | 8.3 MP |
| 8K UHD | 7680 × 4320 px | 33.2 MP |