Webデザインのために画像を72DPIに維持することは必須ですか?


50

私は1年以上Webバナーを設計してきましたが、DPIを考慮したことはありません。

デフォルトの72DPIを使用していましたが、72DPIでWebデザインを作成する必要があることを知りたいですか?200DPIなど、それ以上を使用するとどうなりますか?

DPIの増加は高品質の画像を意味することを知っているため、高DPIを使用したいのですが、最近、Webバナーには72DPIを使用する必要があることを読みました。私はそれが必須であり、それが何らかの面で悪影響を与えるかどうかを知りたいですか?

回答:


84

PPI(ピクセル/インチ)設定は、Webイメージでは使用されません。Web、Retinaディスプレイなどの画像は、PPI / DPI設定ではなく、ピクセルサイズ(幅と高さ)で表示されます。実際、png、gif、jpgなどの多くのWebイメージは、内部データにppi設定を保存することさえできず、幅と高さの設定に依存している場合があります。

100ピクセルx 100ピクセルの画像は、PPI / DPI設定に関係なく、Web上で表示されます。

これが、Retinaディスプレイの画像がppi設定の増加ではなく2倍のサイズで保存される理由です。網膜ディスプレイのピクセル密度は高くなりますが、画面の状態がPPI設定に基づかない画像の幅と高さであっても、画像を表示し続けます。

実際には、72ppiのピクセル密度を使用するモニターは、1980年代初期から中期にかけて見られていません。72ppiは、ほぼ30年間正確ではありませんでした。実際、Windowsはピクセル密度にデフォルトの96ppiを使用しているため、Windowsシステムでは正確ではありませんでした。

信じられない?自分で試してみてください。Photoshopで100ピクセルx 100ピクセルの2つの画像を作成します。1つの画像を72ppi、他の画像を300ppiにします。ウェブ用に両方とも保存します。ウェブブラウザで違いはありますか?いや。どちらも100x100ピクセルの画像です。

DPI(インチあたりのドット数)設定は、画像の印刷時にのみ適用されます。DPIはスクリーン向けの画像には影響しません。DPIは、印刷機が1インチ以内に配置するインクドット/スポットの量を指します。Earth上のディスプレイはインクを使用しないため、DPIはディスプレイ画面に関連するものに使用する誤った用語です。

一部のモバイルメーカーは、DPIxまたはxDPIという用語を使用することを選択していることに注意してください。これは頭字語の伝統的な形式ではなく、製造業者は単に大量の水を汚しただけです。モバイル画面の解像度に関連してDPIが表示される場合、彼らは効果的なPPIについて話しているのであり、実際には Dots Per Inchを参照していませ。より適切な頭字語はxPPIまたはPPIxでした。モバイル画面は、すべてのディスプレイと同様に、インクではなくピクセルを使用するためです。

Web画像に使用するppi設定に違いはありません。重要なのは、画像の(ピクセル)幅と(ピクセル)高さです。

複数の画像を使用する場合、一貫性を保つことが重要です。すべての画像を同じppiに設定して、画像間でピースを移動した場合にアスペクトのサイズ変更とスケーリングを回避する必要があります。72、96、200、145.8 ppiのどれを使用するかは関係ありませんが、すべての画像を同じに設定する必要があります。


あなたはケースで、それは便利ですが、画像の高DPIバージョンをロードするためにウェブサイトを指示することができNB:stackoverflow.com/a/43823483/32453
rogerdpack

2
実際には、@ rogerdpackを使用すると、ブラウザに大きな画像(ピクセル幅とピクセル高さ)を読み込むように指示できます。つまり、2倍または3倍です。ただし、まだPPI設定を読み取っていません。
スコット

5

「dpi」が実際に何を意味するのか、例を挙げて詳しく説明します。それで、あなたは自分で答えを見るかもしれません。

要するに、画像は色の点で構成されており、それらは互いに隣り合っています。しかし、物理的な意味でのサイズはありません。

これで、画面に画像を表示するとき、通常は画面に表示できる色付きの四角形のラスターに画像のドット色を入れるだけです。ここで私が「ドット」と呼ぶ長方形は「ピクセル」と呼ばれることに注意してください。しかし、よく見ると、それらは異なるものです。

この自然な方法で画面に画像を表示すると、そのサイズを測定できます。
たとえば、画像の幅は500ドットであり、これらを画面上の色付きの四角形に配置すると、幅が5インチであることがわかります。次に、1インチあたり100個の長方形があり、1インチあたり100個のドットが表示されます。
つまり、画面の画像は100dpiです。
しかし、画像ファイルのdpi値も確認しませんでした!

さて、ファイルを見ると、画像は200dpiであると言えます!dpi値は、画面の幅または高さのインチごとに表示されるカラードットの数です。そのため、画像のdpi値は、表示されるときに画像 2.5インチ幅になることを示しています- 事実ではなく、約束として

画面にイメージドットを割り当てたときは、それを表示しただけで、画面表示の実際の物理的なdpi測定したため、気にしませんでした。
それで、あなたが見るように、約束はただ間違っていましたそして誰も気にしない!それは単に関係ないからです。

ファイルは有望でした-200dpiと言って-それは「表示されたときに幅2.5インチ」になります。次に、5インチ幅として表示されている画面を使用しました。実際の画面が何であるかを知っているため、それを知ることができます。
通常、エンドユーザーがディスプレイとして何を使用するかさえわからないので、とにかく推測することしかできません。

だから、今では理にかなっています:

  • 画面を知らなかったため、画面に表示される画像のdpiがわかりませんでした。
  • しかし、「おおよそこのサイズ...わかりました。その後、約200dpi程度必要です。」「200dpi」をファイルに保存しました
  • その後、画面を見て、実際には100dpiであることを測定しました。

また、画像を表示できる画面は1つだけではありません。サイズが異なる可能性があるため、画像ファイルを作成するときに実際のdpi値を知ることすらできません。

「ピクセル」とは正確には何に関する私の回答も参照してください


上記に基づいて、質問に直接:

画像ファイルでdpiを指定した場合、最終的に表示される画像の品質には直接関係しません。
ただし、意図については、画質についてのコミュニケーションに使用できます。「この画像を200dpiの画面に表示したい」と言うことができます。

この画像を表示したい場合は、気をつけて200dpiの画面を探します。または、机の上にある古い75dpiの画面を使用しているだけかもしれません。画像はかなり大きくなり、スクロールする必要があります-しかし、それは私の問題です。実際に使用されているものを見つけることさえできません-200dpiの値は画質を制御しませんでした -それを表示する方法を伝えました気に入れば


画像に埋め込まれたDPIが違いを生むコンテキストがいくつかあります。たとえば、Microsoft Wordにインポートすると、印刷されたページで測定したときに、DPIで暗黙的に指定されたサイズになるように画像がスケーリングされます。あなたの答えは正しいのですが、DPIはより頻繁に無視されます。
マークランサム

いい視点ね。そのため、画像は出力デバイスのDPIに適合します。これは、理論的には正しいことです。実際には、適応されたdpi値は異なる出力デバイス(スクリーンとプリンター)を対象としており、互換性がありません。異なる単位で表される値のように、センチメートルとインチで長さの値を追加するのと同様
フォルカージーゲル

フラットベッドスキャナーのような一部のデバイスは、実際に意味のあるDPI値を提供できます。カメラだけではありません。
マークランサム

4

PPIは間違いなく重要ではありません。Webとアプリの設計にとって重要なのはピクセルサイズですが、設計アプリケーションの使用とPPI設定の混合には十分注意する必要があります。その理由は次のとおりです。

ただし、ドキュメントごとにPhotoshopと異なるピクセル密度を使用する場合、レイヤーをドラッグしてドキュメント間でレイヤースタイルをコピーすると、レイヤースタイルが拡大されます。326PPIRetina iPhoneドキュメントから264PPI Retina iPadドキュメントにレイヤーをドラッグすると、すべてのレイヤースタイルが拡大縮小されます20%(その後、最も近い整数に丸められます)。そして、それはおそらくあなたが望むものではありません。また、OS Xのプレビューでは、設定方法に関係なく、72PPI画像が正確なサイズで表示されます。

インチあたりのピクセル数は単なるタグです

これらの理由により、72PPIをすべての設計文書に割り当てています。同じことをお勧めします。画像データのサイズを変更せずにPhotoshopドキュメントのピクセル密度を変更するには、[イメージサイズ]ダイアログを開き、[イメージのサイズ変更]をオフにして、目的のピクセル密度を入力します。


0

Photoshopで作成した画像の2つのコピーをテストしました。ただし、1つを72 dpiに設定し、もう1つを720 dpiに設定して、使用しているブラウザーが画面上で異なるサイズをレンダリングするかどうかを確認します。

1つを除くすべてのブラウザで、サイズと品質の点で同一に見えました。ただし、Google Chromeを使用すると、72で作成されたものは問題なく見えましたが、720で作成されたものは非常に小さく、サイズが1/10でした。

深い悲しみ。これは、すべての独立した(Webページ内に制約されていない)画像を72に配置するための議論のように見えます。Chromeでまだ十分に大きく見えますが、おそらくそのブラウザを念頭に置いて、すべてを72に設定する必要があります。


1
このテストはどこかでオンラインにしましたか?または、HTMLのない純粋な画像でしたか?
マイケルシューマッハ14
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.