解像度の基礎 - px, dpi, ppi の違いをわかりやすく解説
解像度とは何か - 画像の細かさを決める基本概念
解像度とは、画像がどれだけ細かい情報を持っているかを示す指標です。デジタル画像は小さな点 (ピクセル) の集合体であり、この点の密度や総数が解像度を決定します。解像度が高いほど画像は精細に見え、低いほど粗く見えます。
日常的に「解像度」という言葉は曖昧に使われがちですが、技術的には 絶対解像度 (画像の総ピクセル数) と 相対解像度 (単位長さあたりのピクセル密度) の 2 種類に分けられます。たとえば「1,920 × 1,080の画像」は絶対解像度を示し、「300 dpi の画像」は相対解像度を示しています。
この区別を理解することが、Web デザインや印刷物の制作で適切な画像を用意するための第一歩です。用途によって必要な解像度は大きく異なり、Web 表示では 72〜96 ppi 程度で十分ですが、商業印刷では 300 dpi 以上が求められます。解像度の概念を正しく把握すれば、無駄に大きなファイルを作ったり、印刷時にぼやけた画像になったりする失敗を防げます。
さらに、同じ「高解像度」でも文脈によって意味が異なる点に注意が必要です。スマートフォンのカメラスペックで語られる「48MP」はセンサーの総画素数を指し、ディスプレイの「Retina」は画面のピクセル密度を指し、印刷所が求める「350 dpi」は出力時の密度を指しています。これらを混同すると、適切な画像準備ができません。
px (ピクセル) - デジタル画像の最小単位
ピクセル (px) はデジタル画像を構成する最小の点です。1 つのピクセルは 1 つの色情報を持ち、これらが格子状に並ぶことで画像が形成されます。「1,920 × 1,080」のような表記は、横に 1920 個、縦に 1080 個のピクセルが並んでいることを意味します。
ピクセル自体には物理的なサイズがありません。同じ 1,920 × 1,080の画像でも、5 インチのスマートフォンに表示すれば各ピクセルは極めて小さく、100 インチのプロジェクターに投影すれば大きくなります。つまりピクセルは相対的な単位であり、表示デバイスによって物理サイズが変わります。
- Web デザイン: CSS ピクセルはデバイスピクセルと異なる場合がある (Retina ディスプレイでは 1 CSS px = 2〜3 デバイス px)
- 写真撮影: カメラのメガピクセル数は総ピクセル数を示す (12MP = 約 4,000 × 3,000 px)
- 動画: 4K は 3,840 × 2,160 px、フル HD は 1,920 × 1,080 px
ピクセル数が多いほど画像に含まれる情報量は増えますが、ファイルサイズも大きくなります。用途に応じた適切なピクセル数を選ぶことが重要です。
dpi (dots per inch) - 印刷における解像度の単位
dpi (dots per inch) は、1 インチあたりに印刷されるドット (インクの点) の数を表す単位です。プリンターがどれだけ細かくインクを配置できるかを示す指標であり、印刷物の品質に直結します。
一般的な印刷用途での dpi の目安は以下のとおりです:
- 300 dpi: 商業印刷、写真集、名刺など高品質な印刷物の標準
- 150 dpi: 新聞印刷、大判ポスター (近距離で見ない場合)
- 72 dpi: かつてのモニター表示用の標準値 (現在は意味が薄い)
- 600〜1200 dpi: レーザープリンターの出力解像度
注意すべき点として、プリンターの dpi と画像の dpi は異なる概念です。プリンターが 1200 dpi の性能を持っていても、元画像が 150 dpi 相当の情報量しかなければ、印刷結果は 150 dpi 相当の品質にしかなりません。逆に、72 dpi のプリンターに 300 dpi の画像を送っても、プリンターの性能以上の品質は得られません。
印刷用データを作成する際は、仕上がりサイズ × 必要 dpi でピクセル数を計算します。たとえば A4 サイズ (約 8.27 × 11.69 インチ) を 300 dpi で印刷するには、2481 × 3507 ピクセル以上の画像が必要です。
ppi (pixels per inch) - ディスプレイにおける解像度の単位
ppi (pixels per inch) は、ディスプレイの 1 インチあたりに表示されるピクセルの数を表します。dpi が印刷のドット密度を示すのに対し、ppi は画面のピクセル密度を示す点が異なります。実際には dpi と ppi は混同されて使われることが多いですが、厳密には別の概念です。
代表的なディスプレイの ppi 値:
- iPhone 15 Pro: 460 ppi (Super Retina XDR)
- MacBook Pro 14 インチ: 254 ppi (Liquid Retina XDR)
- 一般的な 27 インチ 4K モニター: 163 ppi
- 一般的な 27 インチ Full HD モニター: 82 ppi
ppi が高いディスプレイでは、同じピクセル数の画像でも物理的に小さく表示されます。そのため、高 ppi ディスプレイ (Retina など) 向けには、通常の 2〜3 倍のピクセル数を持つ画像を用意する必要があります。これが srcset 属性や @2x、@3x 画像が必要とされる理由です。
Web 開発では CSS ピクセルとデバイスピクセルの比率 (window.devicePixelRatio) を考慮し、適切な解像度の画像を配信することがパフォーマンスと見た目の両立に不可欠です。
dpi と ppi の違い - 混同しやすいポイントを整理
dpi と ppi は日常的に混同されがちですが、技術的には明確な違いがあります。この違いを理解することで、画像制作時の設定ミスを防げます。
本質的な違い:
- dpi: 物理的なインクのドット密度。プリンターの出力能力を示す。1 つのピクセルを表現するために複数のドットが使われることがある
- ppi: デジタル画像のピクセル密度。画像データそのものの密度を示す。1 ピクセル = 1 つの色情報
たとえば、インクジェットプリンターは 1 つのピクセルの色を再現するために、CMYK の微細なドットを複数組み合わせます。そのため、300 ppi の画像を印刷するプリンターは 1200 dpi 以上の性能が必要になることがあります。
実務上の使い分け:
- 画像編集ソフト (Photoshop など) で設定する「解像度」は ppi
- プリンターの仕様書に記載される「解像度」は dpi
- 印刷入稿時に「300 dpi で」と言われたら、実質的には 300 ppi の画像を求められている
混乱を避けるため、画像データの密度を語るときは ppi、印刷デバイスの性能を語るときは dpi と使い分けることを推奨します。ただし業界慣習として「印刷用は 300 dpi」のように ppi の意味で dpi が使われることが非常に多いため、文脈から判断する柔軟さも必要です。
用途別の最適解像度設定ガイド
画像の用途に応じた最適な解像度設定をまとめます。適切な解像度を選ぶことで、品質とファイルサイズのバランスを取れます。
Web サイト・ SNS 用:
- 一般的な Web 画像: 幅 1200〜2400 px (Retina 対応含む)
- OGP 画像: 1200 × 630 px
- ファビコン: 32 × 32 px、180 × 180 px (Apple Touch Icon)
- ppi 設定: Web では無関係 (ブラウザはピクセル数のみ参照)
印刷用:
- 商業印刷 (チラシ、パンフレット): 350 ppi
- 写真プリント (L 判、A4): 300 ppi
- 大判ポスター (B1 以上): 150〜200 ppi (視認距離が遠いため)
- 名刺: 350 ppi 以上
よくある失敗と対策:
- Web 用画像を 300 ppi で書き出す: ファイルサイズが無駄に大きくなる。Web ではピクセル数だけが重要なので ppi 設定は影響しない
- スマホ写真をそのまま印刷に使う: 12MP (4000 × 3000 px) あれば A4 300 ppi に十分対応可能
- 低解像度画像を拡大して印刷: ピクセル補間でぼやける。元画像のピクセル数が不足している場合は AI アップスケーリングを検討
解像度の設定は「最終的な出力先」から逆算して決めるのが鉄則です。まず出力サイズと必要な ppi/dpi を確認し、そこから必要なピクセル数を計算しましょう。