ブログ

スクリーンショットの色プロファイルと DPI、ピクセルグリッドの話

執筆 InSnap · 公開 · スクリーンショット, 色プロファイル, ICC, PNG メタデータ, Display P3

スクリーンショットの色プロファイルと DPI、ピクセルグリッドの話

スクリーンショットはただの画像ではありません。色プロファイル、DPI、ピクセルグリッドという 3 つの情報を抱えています。それぞれの役割、確認方法、気にすべき場面を整理します。

スクリーンショットはふつう、サイズで説明されます。幅 1920、高さ 1080、2.1 MB。しかしそれはファイルが持っている情報のほんの一部です。画像の下には、どのスクリーンショットにもピクセルグリッド、DPI の数字、そして最近の Mac や広色域の Windows ノート PC では色プロファイルも含まれています。どれも画像の中身を変えるものではありませんが、どれも別の場所で表示されるときの見え方を変えます。

スクリーンショットにまつわる混乱のほとんどは、この 3 つのうちのどれかが原因で、ピクセルのせいではありません。「ここだと違って見える」「貼り付けたら小さくなった」「色がおかしい」——どれも同じです。

まずはピクセルグリッド

どのスクリーンショットにもピクセル単位の幅と高さが決まっていて、その数字はファイルが移動しても変わりません。変わるのは、それが描画される倍率のほうです。

Retina の Mac では、レイアウトはポイントで測られますが、描画は 2 倍のピクセル数で行われます。そのため 400 × 300 ポイントの選択範囲は、800 × 600 ピクセルの画像として保存されます。150% スケーリングの Windows も同じ考え方で、1920 × 1080 のレイアウトは 2880 × 1620 の物理ピクセルでキャプチャされます。キャプチャが「大きすぎる」のではありません。画面が実際に持っていたピクセル数になっているだけです。

実用的なルールは、何かがおかしいと判断する前に本当のピクセル数を確認することです。Finder でファイルを選んで Command-I を押します。Windows ならプロパティを開きます。画像が思ったよりおよそ 2 倍なら、それは高密度ディスプレイでのキャプチャで、問題があるとしたら下流のどこかです。

高倍率でキャプチャを調べると、細部が本物か再サンプリングかを判別できます

DPI という数字、そしてそれがたいてい嘘である理由

ピクセルの隣に、ファイルは解像度の数字を保存しています。たいていは 72 か 144 DPI です。これは設定ではなくメタデータで、「この画像を印刷したりレイアウトに配置したりするなら、1 インチあたりこのドット数とみなしてください」とプログラムに伝えるものです。

画面用のアプリで、これを表示サイズの判断に使うものはほとんどありません。ただし一部は使います。レイアウトツール、Word、Keynote、一部の PDF 書き出しツールはこの数字を読み、それに応じて画像を拡大縮小します。同じ PNG が、ある場所ではちょうどいい大きさで貼り付き、別の場所では 2 倍の大きさで貼り付くのはそのためです。ピクセルは何も変わっていません。変わったのは、受け取ったアプリが信じることを選んだ数字のほうです。

macOS 標準のスクリーンショットツールは、ディスプレイに関係なく 72 DPI を書き込みます。InSnap を含め、ほとんどのキャプチャソフトも同じです。その結果、Retina のキャプチャは、ごく普通の DPI 値が付いた大きな画像として届きます。DPI を尊重するスライドがそれを 2 倍の大きさで表示するのは、まさにこの組み合わせのせいです。「1 インチあたり 72 ドット」と読み取り、本当のピクセル数で計算してしまうのです。

色プロファイル — 見落とされがちなもの

これは、見えなくなるまでは見えない部分です。

広色域ディスプレイ——P3 パネルの Mac や、広色域画面の Windows ノート PC——では、システムは色をそのままの sRGB として保存しません。Display P3 空間向けにエンコードして保存し、どの空間なのかを記した ICC プロファイルをファイルに添えます。プロファイルを読むプログラムは、あなたが見た色に変換して戻します。プロファイルを無視するプログラムは生の数値を読み、少し違う色を表示します。

どれくらい違うかは色によります。無彩色のグレーはほとんど動きません。白と黒はどちらの空間でも同じ位置にあるからです。彩度の高い色は大きく動きます。鮮やかな青は、1 つのチャンネルで 255 のうち 50 以上ずれることがあります。

同じ色を 1 回保存し、3 通りに見た場合

プロファイルを引き継がないアプリでスクリーンショットを読み込むと——プロファイルなしで保存し直すエディタ、一部の Web アップローダー、一部のチャットクライアントなど——ファイルは同じピクセルのまま、それを読むための指示だけを失います。そのあとのビューアーはすべて sRGB として扱い、色がずれていきます。

プロファイルが無視されると、彩度の高い色ほど大きくずれる

編集して保存し直すと何が起きるか

スクリーンショットを編集して保存し直すのは、プロファイルが静かに消える場所です。多くのツールは画像をデコードし、メタデータを捨て、ピクセルだけを含む新しいファイルを書き出します。ツールの中では同じに見えます。別の場所で開くと、色が少しだけ違うのです。

確認方法は上と同じです。編集の前と後に、ファイルに埋め込みプロファイルが残っているかを見ます。Mac ならプレビューの「ツール › インスペクタを表示」で ICC プロファイルの行を読めます。前も後も「sRGB IEC61966-2.1」なら問題ありません。前が「Display P3」で後が空なら、そのツールがプロファイルを捨てています。

編集して保存し直すとファイルの中で実際に何が変わるか

ツールを選べる立場なら、プロファイルを保持するものを選んでください。選べないなら、もともとプロファイルを持つソースから書き出し、必要がない限り、非可逆だったりプロファイルを削いだりするエディタを往復しないことです。

3 つのうち、どれが本当に重要か

メタデータ重要な場面重要でない場面
ピクセル寸法常に。画像そのものを定義する決してない——変わらないから
DPI の数字レイアウト、Word、PDF への配置画面での表示、アップロード
色プロファイル広色域ディスプレイ、色のレビュー、デザインの受け渡しフラットな UI のスクリーンショット、白黒のテキスト

バグ報告、コードの断片、チャット用のスクリーンショットなら、ピクセル数だけが重要です。デザインレビューや、マシンをまたいだ色に敏感な比較なら、プロファイルはファイルの他のどの属性よりも重要です。

InSnap はそれぞれをどう扱うか

InSnap は実際のデバイスピクセルでキャプチャします。Retina ディスプレイで 400 × 300 ポイントを選べば、画面が実際に持っていたピクセル数で保存されます。キャプチャの時点で sRGB に変換するので、保存するピクセルはあなたのディスプレイで見た色そのもので、どのビューアーでも同じように扱われます。「sRGB に変換」という別のスイッチはありません。変換するものが何もないからです。ファイルはすでに sRGB です。

選択範囲のラベルは、ドラッグ中に 物理ピクセル でサイズを表示するので、コピーや保存の前に本当のピクセル数が分かります。あとからレイアウト向けの小さなコピーが欲しくなったら、設定 › 保存 の Retina スクリーンショットを 1x に縮小 を使えば、書き出し時にきれいに縮小できます。

元のサイズのままコピーすれば、ファイルは正直なまま

よくある質問

同じスクリーンショットが 2 つのアプリで違って見えるのはなぜですか?

たいていは、一方のアプリが埋め込みの色プロファイルを読み、もう一方が無視しているからです。ファイルが Display P3 プロファイルを持っていて、ビューアーが変換せずに sRGB として扱うと、彩度の高い色が違って見えます。フラットな白、黒、グレーの領域は変わりません。

サイズを変更すると色プロファイルは壊れますか?

それ自体では壊れません。ツールがプロファイルを引き継ぐなら、ほとんどのリサイザーは保持します。壊れるのは、保存時にメタデータを完全に削るツールの場合で、単純なエディタや一部の Web アップローダーでよくあります。プレビューや任意のインスペクタで、ICC プロファイルの行を前後で確認してください。

Retina のスクリーンショットがスライドに 2 倍の大きさで貼り付くのはなぜですか?

ファイルが 2x ディスプレイの本当のピクセル数を持っていて、ポイントでいえばおよそ 4 倍の面積になるからです。DPI メタデータを読んで縮小するレイアウトツールもありますが、多くのツールは読みません。InSnap で Retina スクリーンショットを 1x に縮小 して書き出せば、そうしたツール向けに 1x サイズのコピーが作れます。

P3 プロファイル付きの PNG は sRGB の同じ PNG より大きくなりますか?

わずかに大きくなります。ICC プロファイルが数キロバイトを追加するためです。ピクセルデータはたいてい同じサイズです。PNG はどちらも同じように圧縮するからです。その差は、プロファイルを削る理由にはなりません。

スクリーンショットは sRGB と広色域のどちらで保存すべきですか?

他の人に渡すなら、sRGB が安全な答えです。sRGB を尊重するどの画面でも同じ色に見えます。自分のキャリブレーション済みディスプレイで色を確認し、もう一方のディスプレイも広色域で比較するなら、撮ったままのプロファイルを残してください。チームに共有したり顧客に送ったりするものは、sRGB です。

次のスクリーンショットは、ホットキーひとつで。

macOS 14.4 以降(Apple Silicon / Intel)· Windows 10 以降(64 ビット)