Webの「96dpi」と印刷の「350dpi」は何が違う？

同じ「dpi」という言葉でも、Webと印刷では基準が異なります。W3C仕様とAdobeヘルプの定義から順に整理します。

参照した一次情報

・W3C「CSS Values and Units Module Level 4」§6.2 Absolute Lengths（drafts.csswg.org/css-values）
・W3C「CSS Values and Units Module Level 4」§7.4 Resolution Units（dpi, dpcm, dppx）
・MDN Web Docs「length」（1in＝96px＝72ptを明記）
・Adobe Photoshop ヘルプ「画像サイズと解像度」（helpx.adobe.com／2025-12-02更新）

Webの「96dpi」はCSS仕様の定数

W3CのCSS Values and Units Level 4 §6.2 Absolute Lengthsでは、絶対長単位として cm／mm／Q／in／pt／pc／px が定義されており、いずれも互いに固定比率で換算されます。 MDNはこの仕様を要約して「1in は 96px と定義され、72pt と等しい」と説明しています。

つまりCSSの世界では、解像度に関係なく 1in＝96px＝2.54cm＝25.4mm＝72pt が常に成り立ちます。これは「参照ピクセル（reference pixel）」と呼ばれ、低解像度ディスプレイを基準にした論理的な単位です。

Retina／高解像度ディスプレイの扱い

iPhoneやMacBookのRetinaは物理的に200dpi以上ありますが、CSSでは「devicePixelRatio (DPR)」を介して論理ピクセル（=参照ピクセル）と物理ピクセルを分離しています。たとえばDPR=2のディスプレイなら、CSSで100pxの画像はOS側で200pxにレンダリングされます。

このおかげで、Webデザイナーは端末ごとの物理解像度を意識せずにCSSのpx値だけで設計でき、画像はsrcsetやretina版で別途用意すればOK、という分担になっています。

印刷の「350dpi」はオフセット印刷の標準

一方、印刷側の「dpi」はAdobe Photoshopヘルプが定義する「印刷品質での1インチあたりのピクセル数（ppi）」を指します。オフセット印刷では網点（ハーフトーン）を出力するため、出力線数（lpi）に対して画像解像度は2倍程度必要というのが伝統的な目安で、商業印刷の175lpi×2＝350dpiが業界標準になっています。

家庭用インクジェットはこの「網点」を使わず、インクの濃淡や粒径で階調を作るため、300dpi程度でも十分美麗です。だから「印刷は300〜350dpiが標準」という二段重ねの目安になっています。

Web→印刷の換算ポイント

・Webバナー750pxを実物換算（96dpi）： 750÷96×2.54≒19.8cm
・A4印刷（350dpi）の必要px： 210mm÷25.4×350≒2894px、297mm÷25.4×350≒4093px
・Webで作った1200×630pxのOGP画像を印刷したら： 96dpiなら31.75×16.67cm、350dpiならわずか8.71×4.57cm
・逆にA4を96dpiで作ると： 794×1123px。Webサイトの背景画像にはこれで十分

※ 同じ画像でも「DPIをいくつとみなすか」で実物サイズが変わるだけで、画像そのもののピクセル総数は変化しません。

「dpiを上げれば画質が良くなる」は誤解

Photoshopの「画像サイズ」ダイアログでリサンプリングをオフにしてDPIを300→600に変更しても、総ピクセル数は変わらず、印刷時の実物サイズが半分になるだけです。元データのピクセル数が増えるわけではないので、解像感は同じです。

Webから印刷に転用する時は、必ず「印刷したいサイズに対して必要pxが足りているか」を本ツールで確認してください。