web-dev-qa-db-ja.com

PNG(またはJPG)にはDPIがありますか?それとも、網膜用に構築する場合は関係ありませんか?

私が決定的な答えを見つけるのに非常に苦労している簡単な質問:PNGファイルにはDPIがありますか?または、おそらくもっと重要なのは、網膜対応のサイト/アプリを構築するときにも関連性があるのでしょうか?

デザイナーからRetinaiPadアプリのPSDアセットを受け取りました。これは、アプリ内で表示するためにHTMLに変換する必要があります。通常、2048x1536 @ 72 DPIなどのファイルを受け取ります。2倍のサイズですが、標準の画面DPIです。次に、通常、CSSを使用してブラウザに表示方法を指示します。

しかし今回、デザイナーは1024x768 @ 144 DPI(標準サイズですが2倍のDPI)でPSDを提供するように指示されました。Photoshop内のDPI設定は印刷を目的としているため、これは正しくないと思います。さらに、144 DPI PSDからPNGまたはJPGとして何かを保存すると、72 DPI(または30,000 DPI)のPSDから保存されたものとまったく同じになります。 DPIは、結果のファイルに表示される設定にも、異なるファイルサイズにも反映されていないようです。せいぜい、メタデータのようです。

したがって、DPIはここでは関係がないことを理解しています。網膜プロジェクトでは、単純に2倍のサイズのアセットを要求する必要がありますが、新しいアセットを要求する前に、問題について確認/明確化してください。私は印刷物の背景から移行している多くのデザイナーと仕事をしているので、これは私が遭遇する一般的な問題であり、将来的に私たちの要件についてより良いガイダンスを提供できるようにしたいと思います。

13
gbanks

DPIは、画像のピクセル寸法と、表示される方法に関係なく、表示される(または表示されるはずの)物理的なサイズとの関係です(画面、印刷)。 、 なんでも)。画像formatには本質的にDPIがありませんが、実際に作成された画像ピクセルの数であり、特定の物理サイズで表示される必要がありますDPIがあります。

画像ファイルに関する限り、DPIは単なるメタデータであるというのは正しいことです。画像自体は固有の物理サイズを持たないピクセルのグリッドですが、DPI値は意図された物理サイズを表します。たとえば、幅144ピクセルでDPIが144の画像は、表示時に1インチ幅で表示されますが、幅144ピクセルでDPIが72の画像は、表示時に幅2インチで表​​示されます。

画像に保存されているDPI値を使用すると、DPIもわかっているデバイスに表示されたときに、画像を正しい物理サイズに自動的に拡大縮小できます。たとえば、72dpiモニターに表示される144dpi画像は、各次元で50%拡大縮小して、144ピクセル(1インチ)の画像が72ピクセル(1インチ)のモニター表面にマッピングされるようにする必要があります。ただし、Webブラウザは通常これを行いません。画像のピクセルは画面のピクセルに直接マッピングされるだけなので、画像を手動で拡大縮小して、表示されるモニターに適したピクセルサイズにする必要があります。

2048x1536 @ 72DPIおよび1024x768 @ 144 DPIで画像を取得するとおっしゃいましたが、これらはまったく同等ではありません。 2048x1536 72DPI画像は幅約28.4インチ(2048/72)で表示されますが、1024x768 144DPI画像は幅約7.1インチ(1024/144)で表示されます。 2048x1536 @ 144DPIと1024x768 @ 72DPI(どちらも幅14.2インチ)を意味していませんか?

ところで、最近の従来の(非網膜)モニターは通常、72ではなく96〜100 DPIです。たとえば、私の20インチDell2007WFPのピクセルサイズは1680x1050です。これは対角線上で約1981ピクセル、つまり1インチあたり約99ピクセルです。 CSSの「px」単位は実際には1/96インチとして定義されており、高DPI画面の複数の物理ピクセルに対応する場合があります。

12
Wyzard

PNGには、ピクセル/メートルをX方向とY方向に分けて、PNGの「pHY」チャンクに保存する機能があります。残念ながら、これでは正確な変換はできません(72dpiはメートルあたり2834.64566929ピクセルで、2835ピクセル/メートルとして保存され、DPIに変換して戻すと72.0009になります)。一部の人々はこれが気がかりだと感じます。

JPEGは、X_densityとY_densityをピクセル/インチまたはピクセル/ cmの単位で保存することもできます。

13

印刷レイアウトを行う場合を除いて、DPIが重要になることはめったにありません。ブループリントがある場合、ページを適切に拡大縮小するにはDPI情報が不可欠です。

JPEGはDPIをサポートしていません。ただし、さまざまなJPEGファイル形式があります。

Photoshopのようなソフトウェアは、より大きなページレイアウトパッケージ(Creative Suite)の一部です。そのため、DPI情報(およびIllustratorとInDesign)を利用して、ページのレイアウト方法を指示します。

100x100の画像を100DPIで、500x500の画像を500 DPIで、ページ上で同じサイズにすることができます。

2
user3344003

他の答えは正しいですが、詳細が多すぎる可能性があります。重要なのはピクセル数です。 dpiは、Photoshopまたは他のアプリがそれらを表示する方法に影響しますが、最終的に、網膜以外のフルスクリーンは1024x768で、網膜のフルスクリーンは2048x1536です。 iPhone 6Plusは3倍のRetinaHDを追加したことに注意してください。

十分なRAMで、十分に高速なマシンがある場合は、3倍でグラフィックを作成して、3つのサイズすべてを再サンプリングして保存できるようにすることをお勧めします。

1
David Berger

それらは完全に同じではありません。ファイル1の幅は2倍、高さは2倍なので、画像番号2の4倍のピクセル数になります。どちらのファイルも、ピクセル単位のDPIのサイズに関係なく、コンピューターはこれらのピクセルを使用するだけなので、PCではDPIは重要ではありません。 。

DPIは確かに印刷用です。サイズ(たとえばインチ単位)を変更せずに、より良い品質を保証するためです。DPIは、紙やさまざまなコンピューター画面に表示された場合のピクセルとインチの比率についてのみ通知します。

希望する解像度で別の画像を送信するようにクライアントに指示する必要があります。

0
Nicky Smits