Print vs Web Images: Resolution, Color, and Format Guide — pic0.ai

私は今でも、クライアントからパニックで電話を受けた日のことを覚えています。彼らはベンダーから5,000部の印刷されたパンフレットを受け取ったばかりで、すべての画像がピクセル化され、色あせて見えました。同じ画像は彼らのウェブサイト上では素晴らしく見えていました。その12,000ドルの間違いは彼らに教訓を与え、私にとっても18年間プロダクションデザイナーとして教え続けてきた教訓を再確認させるものでした：画面上でうまくいくことは、適切な準備なしには印刷ではうまくいかないことが多いのです。

私はマーカス・チェンです。デジタルメディアと印刷メディアの間のギャップを埋めることにほぼ20年を費やしてきました。小さなブティックからフォーチュン500の社内チームまで、さまざまなエージェンシーでプロダクションデザイナーとして働いてきました。名刺から40フィートの広告看板まで、すべてのファイルを準備してきました。媒体を越える際に画像がどのように失敗するか、あらゆる方法を見てきました。今日は、印刷とウェブの両方のための画像準備に必要なすべてを共有しますので、高価な電話をかける必要はありません。

解像度を理解する：画像の品質の基礎

解像度はほとんどの人がつまずくところであり、異なる文脈で異なる意味を持つ同じ用語—DPIやPPI—を使用するためです。これを実際に意味が通るように説明しましょう。

ウェブ画像の場合、解像度はピクセルで測定します。1920x1080の画像には正確に2,073,600ピクセルが含まれており、デジタル表示において重要なのはそれだけです。モニターはファイルメタデータに埋め込まれたDPI設定を気にすることはなく、単に1画面ピクセルごとに1画像ピクセルを表示します（100％ズーム時）。これが、同じピクセルサイズの72 PPI画像と300 PPI画像がスクリーン上で同じように見える理由です。PPI値は基本的にブラウザやディスプレイによって無視されます。

印刷はまったく異なります。ここでは、DPI（1インチあたりのドット数）またはPPI（1インチあたりのピクセル数）が、各物理インチの紙にどれだけのピクセルが収まるかを決定します。300 PPIの画像は、各線状インチに300ピクセルが印刷されることを意味し、1平方インチあたり90,000ピクセルを作成します。この密度が、シャープでプロフェッショナルに見える印刷物を生み出します。それを72 PPIに下げると—古いウェブの標準—1平方インチあたりわずか5,184ピクセルしか印刷されません。その違いは肉眼で明らかです。

重要なのはこの数学です：プロフェッショナル品質（300 PPI）で4x6インチの写真を印刷したい場合は、1200x1800ピクセルの画像が必要です。同じ画像がウェブページでフルサイズで表示されると、それは非常に大きくなり、おそらく画面全体を占めてしまうでしょう。逆に、800ピクセル幅に最適化されたウェブ画像は、300 PPIで印刷するとわずか2.67インチ幅になり、より大きな印刷サイズに引き伸ばすとピクセル化されてしまいます。

私は常にクライアントに、解像度を固定されたピクセルの予算として考えるように言っています。広い面積にそのピクセルを分散させる（解像度が低く、大きな印刷物）か、小さな面積に集中させる（解像度が高く、小さな印刷物またはシャープなディテール）かのどちらかです。しかし、存在しないピクセルを作成することはできません。72 PPIのウェブ画像を300 PPIにアップスケーリングしてもディテールは増えず、既存のピクセルを補間するだけでぼやけたゴミになってしまいます。

プロフェッショナル印刷の業界標準は、写真と詳細なグラフィックに対して300 PPIです。遠くから見る大判印刷では250 PPIで済むことがありますが、ビルボードは数百フィート離れて見るため、最小30-50 PPIで済むこともあります。しかし、誰かが手に持つようなもの—パンフレット、雑誌、名刺—に関しては、300 PPIは譲れません。

色空間：RGBとCMYKの違い

色空間の問題は、経験豊富なデザイナーですら間違いを犯すところです。単に一つの色空間から別の色空間に変換することだけではなく、これらのシステムが存在する理由と基本的な違いを理解することが重要です。

「画像ファイルのDPI設定はメタデータであり、ブラウザには完全に無視される—ウェブ表示で重要なのはピクセル寸法だけです。」

RGB（赤、緑、青）は加法色モデルです。スクリーンは光を放出し、赤、緑、青の光をフル強度で組み合わせると白が得られます。光がないと黒になります。これが、スマートフォンから4Kモニターまで、すべてのデジタルディスプレイの動作原理です。RGBは約1670万色（各色256段階）を表現でき、特にシアンと明るい緑の範囲で驚くほど鮮やかな色も含まれています。

CMYK（シアン、マゼンタ、イエロー、キー/ブラック）は減法色モデルです。プリンターは白い紙から始まり、特定の波長の光を吸収（減算）するインクを追加します。シアンインクは赤い光を吸収し、マゼンタは緑、イエローは青を吸収します。理論的には、すべてを組み合わせると黒が得られるはずですが、実際には泥臭い茶色になります。これが、本物の黒（「K」）を4色目として追加する理由です。

重要な問題は、CMYKの色域がRGBよりも小さいことです。画面上で見る素晴らしい電気的な青と鮮やかな緑？ 多くはCMYKインクでは再現できません。RGB画像をCMYKに変換すると、色が変わります—時には劇的に。その明るいライムグリーンはもっと鈍いオリーブトーンになりかねませんし、その電気的な青はわずかに紫がかることもあります。

私はこの教訓をキャリアの初期に、テックスタートアップのロゴデザインの際に学びました。クライアントは私が選んだ鮮やかなシアンブルーが気に入っていました。それは画面上では完璧に見えました。しかし、名刺が到着すると、色は明らかに鈍く、わずかに灰色がかっていました。印刷会社は何も間違っていませんでした；そのRGBカラーはCMYK空間には存在しなかったのです。今では、どんな印刷プロジェクトでも最初からCMYKでデザインし、少なくとも早い段階で変換して、クライアントにソフトプルーフを見せるようにしています。

ウェブの作業には、常にRGBを使用してください。それは画面のネイティブな色空間であり、ファイルサイズも小さく、表示可能なすべての色にアクセスできます。印刷用には、ファイルをプリンターに送る前にCMYKに変換し、キャリブレーションされたモニターを使用するか、物理的なプルーフをリクエストして色が実際にどのように見えるかを確認してください。一部のプリンターは自ら変換することを好むので、私はまず確認し、RGBファイルに埋め込まれたカラープロファイルを提供します。

もう一つ：RGBとCMYKの間を何度も行き来して変換しないでください。各変換は情報を失い、色を移動させます。RGBで編集し、その後印刷のためにCMYKに一度だけ最終変換を行いましょう。そして、常にオリジナルのRGBファイルをマスターとして保持してください。

ファイル形式：適切なコンテナの選び方

ファイル形式の選択は、使用しているソフトウェアだけでなく、圧縮、色サポート、使用ケースを理解することにかかっています。誰かがロゴにJPEGを使用したり、ウェブサイトにTIFFを使用したためにプロジェクトが失敗するのを見てきたので、これをしっかりやりましょう。

ウェブ画像の主要な形式はJPEG、PNG、WebP、SVGです。JPEGはロスのある圧縮を使用し、データを削除してファイルサイズを縮小します。これは、わずかな品質損失が目に見えない写真には最適で、通常、写真を60-80％圧縮しても目に見える劣化はありません。私は通常、60-75％の品質でウェブJPEGをエクスポートし、ファイルサイズと視覚的品質のバランスを美しく保っています。5MBのカメラ写真は200-400KBになり、高速なページ読み込みに最適です。

PNGはロスレス圧縮を使用し、透明性をサポートしているため、ロゴやテキスト付きのグラフィック、シャープなエッジや透過的な背景が必要な画像に最適です。PNG-8は256色をサポートし、シンプルなグラフィックに適していますが、PNG-24は何百万色もサポートします。トレードオフはファイルサイズで、PNGは通常、同等のJPEGの3-5倍のサイズになります。私は透明性が必要なものや、UI要素やテキスト付きのインフォグラフィックのようなピクセルの精度を要求する場合にPNGを使用します。

WebPはロスのある圧縮とロスレス圧縮の両方を提供し、透明性をサポートし、同等の品質でJPEGよりも25-35％小さいファイルサイズを実現する現代的な形式です。ブラウザのサポートは現在非常に良好で（ユーザーの95％以上）、私は新しいプロジェクトのデフォルトとしてWebPを使用し始め、古いプロジェクトにはJPEGのフォールバックを提供しています。