写真素材のサイズはどれを選ぶ？Web・印刷に必要なピクセル数と解像度を解説

写真素材のサイズは使用先から逆算して選ぶ

写真素材のサイズを選ぶときは、最終的に使用する媒体と掲載サイズを先に決めます。Webと印刷では、必要なサイズを判断する基準が異なるためです。

Webと印刷の両方で使う可能性がある場合は、印刷に必要なピクセル数を満たす大きめの素材を保管し、Web掲載時に縮小した画像を書き出す方法が扱いやすいでしょう。

ピクセル数・解像度・PPI・DPIの違い

画像サイズを正しく判断するには、似た意味で使われやすい用語を分けて考える必要があります。

ピクセル数は画像を構成する点の数

ピクセルは、デジタル画像を構成する小さな点です。「2400×1600px」と表示されている画像は、横方向に2400ピクセル、縦方向に1600ピクセルあります。

Webに掲載する画像では、この縦横のピクセル数が主な判断材料になります。元画像の横幅よりも大きく表示すると、輪郭や細部がぼやけて見えることがあります。

PPIは1インチに配置する画像のピクセル数

PPIは「Pixels Per Inch」の略で、印刷時の1インチ当たりに何ピクセルを配置するかを示します。1インチは25.4mmです。

同じ3000ピクセルの画像でも、300ppiで印刷する場合と150ppiで印刷する場合では、印刷できる大きさが変わります。高いPPIで印刷すると小さく精細になり、低いPPIで印刷すると大きくなりますが、近くで見たときに粗さが分かりやすくなります。

DPIは印刷機が出力するドットの密度

DPIは「Dots Per Inch」の略で、プリンターが1インチに出力するインクやトナーの点の数を表します。画像データの密度はPPI、印刷機側の性能はDPIと区別するのが本来の使い方です。

ただし、印刷会社の入稿案内では、画像解像度を「300dpi」と表記していることもあります。入稿時は用語だけで判断せず、必要な画像のピクセル数や仕上がり寸法も確認してください。

ファイル容量だけでは使用できるサイズを判断できない

JPEGのファイル容量は、ピクセル数だけでなく、圧縮率、写真の細かさ、色数などでも変わります。5MBの画像が必ずしも2MBの画像より大きく印刷できるとは限りません。

素材を選ぶときは、ファイル容量ではなく「横×縦のピクセル数」を確認することが基本です。

Webに必要な写真素材のピクセル数

Web用画像は、ページ上で実際に表示される最大幅から逆算します。画像ファイルに設定された72ppiや300ppiという数値より、縦横のピクセル数と表示サイズの関係が重要です。

最大表示幅の2倍を用意すると判断しやすい

高解像度ディスプレイでは、1つのCSSピクセルを複数のデバイスピクセルで表示することがあります。そのため、幅600pxで表示する写真なら、横幅1200px程度の画像を用意すると精細に表示しやすくなります。

上記は固定された規格ではなく、画像を選ぶための計算例です。実際には、サイトのコンテンツ幅、スマートフォン表示、画像のトリミング、高解像度表示への対応方法によって変わります。

横幅だけでなくトリミング後のサイズを確認する

元画像が横2400pxあっても、人物を中心に大きく切り抜くと、使用できる範囲が横1200px程度になることがあります。必要なピクセル数は、元画像全体ではなく、最終的なトリミング後の画像で確認します。

特に採用サイトのメインビジュアルや求人LPでは、デスクトップ用の横長画像とスマートフォン用の縦長画像で、異なるトリミングが必要になることがあります。購入前に、人物の位置、背景の余白、縦横比も確認しておくと加工しやすくなります。

必要以上に大きな画像をそのまま掲載しない

幅800pxで表示する場所へ、横5000pxの画像をそのまま掲載しても、通常は見た目が大幅に向上するわけではありません。一方で、画像のデータ量が増えると、通信環境によっては表示に時間がかかる可能性があります。

複数の画像サイズを用意できる場合は、HTMLのsrcsetやsizesなどを利用し、ブラウザーが画面幅や解像度に合った画像を選べるようにする方法があります。

出典：MDN「HTMLにおけるレスポンシブ画像の使用」

印刷に必要な写真素材のピクセル数

印刷用の写真素材は、印刷する実寸とPPIから必要なピクセル数を計算します。Adobeは、近距離で見る高品質な印刷物について、300ppiを標準的な目安として説明しています。

例えば、A4の横幅210mmを300ppiで印刷する場合は、「210÷25.4×300」で約2480px必要です。縦297mmは約3508pxとなるため、A4全面に使用する写真は、仕上がり寸法だけで約2480×3508pxが目安になります。

300ppiで印刷する場合のサイズ早見表

表の数値は、写真を用紙全面へ配置する場合の仕上がり寸法を基準にしています。ページの一部分に写真を配置する場合は、実際に写真が占める寸法で計算します。

塗り足しを含む場合は仕上がりより大きくする

写真を用紙の端まで印刷するデザインでは、断裁時のずれに備えて塗り足しが必要です。例えば、A4の四辺に3mmずつ塗り足す場合、画像を配置する範囲は216×303mmとなり、300ppiでは約2551×3579px必要です。

必要な塗り足し、カラーモード、保存形式、圧縮方法は印刷会社によって異なります。制作を始める前に、利用する印刷会社の入稿仕様を確認してください。

ポスターや大判印刷は閲覧距離も考慮する

大型ポスターや屋外広告は、チラシやパンフレットより離れた場所から見ることが多いため、300ppiより低い画像解像度で入稿できる場合があります。ただし、必要な数値は印刷方式やサイズによって異なります。

「大判だから150ppiでよい」と一律に判断せず、実寸での必要解像度を印刷会社へ確認することが確実です。

出典：Adobe「Resolution specs for printing images」

手元の写真素材をどの大きさまで使えるか計算する方法

すでに持っている画像を印刷に使えるか確認するときは、ピクセル数から印刷可能な寸法を逆算します。

例えば、3000×2000pxの画像を300ppiで使用する場合、印刷できる寸法は約254×169mmです。A4用紙の全面には足りませんが、A4レイアウト内へ横200mm程度で配置する写真には使える可能性があります。

同じ画像を200ppiで計算すると約381×254mmになります。ただし、印刷できる面積が広がる代わりに、近くで見たときの精細さは低下します。必要な品質は、印刷物の用途と閲覧距離を踏まえて判断します。

拡大処理だけで元の細部が増えるわけではない

画像編集ソフトの再サンプル処理を使うと、ピクセルを追加して画像寸法を大きくできます。ただし、追加されるピクセルは既存の画像情報から推定されたもので、元画像に写っていなかった細部がそのまま復元されるわけではありません。

大きな印刷物に使う可能性がある場合は、最初から必要なピクセル数を満たす写真素材を選ぶ方が、輪郭や質感を保ちやすくなります。

出典：Adobe「Set image size and resolution」

複数の写真素材サイズからどれを選ぶ？

同じ写真に複数のダウンロードサイズが用意されている場合は、現在の使用先だけでなく、今後の展開も含めて選びます。

将来の用途が決まっていない場合

Webサイト、会社案内、求人広告などへ同じ写真を展開する可能性がある場合は、想定される中で最も大きな用途を基準にします。大きい元画像から小さいWeb画像を作ることはできますが、小さいWeb画像を印刷用に拡大すると画質が不足する場合があります。

サイズだけでなく縦横比と余白も確認する

必要なピクセル数を満たしていても、構図が使用先に合わなければ、トリミングによって人物や道具が切れてしまいます。

Web公開・印刷入稿前の画像サイズチェックリスト

Web画像の確認項目

印刷画像の確認項目

写真素材のサイズと解像度に関するよくある質問

Web画像は72dpiに設定する必要がありますか？

Web上の表示サイズは、主に画像の縦横のピクセル数とCSS上の表示幅で決まります。72ppiという設定値だけで、Web上の表示サイズや画質が決まるわけではありません。表示幅に対して十分なピクセル数があるかを確認してください。

A4印刷には何ピクセル必要ですか？

A4の仕上がり寸法210×297mmを300ppiで印刷する場合、約2480×3508pxが目安です。用紙の端まで写真を配置する場合は、印刷会社が指定する塗り足し分も追加します。

Webサイトから保存した画像を印刷に使えますか？

Web掲載用に縮小された画像は、印刷に必要なピクセル数を満たさない場合があります。また、画像を保存できることと、印刷物へ利用できることは別の問題です。元画像のサイズと利用ライセンスの両方を確認してください。

大きな画像を選べば画質は必ずよくなりますか？

必要なピクセル数を満たすことは大切ですが、ピント、圧縮状態、元画像の細部、トリミング方法も画質に影響します。必要以上に大きな画像をWebへそのまま掲載すると、データ量だけが増える場合もあります。

300ppi未満の画像は印刷できませんか？

印刷自体ができないとは限りません。大判ポスターのように離れて見る印刷物では、低いPPIが認められる場合があります。必要な数値は印刷方式や閲覧距離によって異なるため、入稿先へ確認してください。

まとめ

写真素材のサイズは、Webなら最大表示幅、印刷なら仕上がり寸法とPPIから逆算して選びます。

Webと印刷の両方で使う場合は、大きい元画像を保管し、媒体ごとに適切なサイズへ縮小して書き出すと管理しやすくなります。

参考資料

• MDN「HTMLにおけるレスポンシブ画像の使用」
• Adobe「Resolution specs for printing images」
• Adobe「Set image size and resolution」