72 PPI Web 解像度の神話

スティーブ パターソンによって書かれました。

コンピューターとデジタル画像をしばらく使用している場合、特に Web デザイナーやオンラインで写真を公開している写真家であれば、Web に表示される画像の正しい解像度、または一般に、コンピューター画面では、1 インチあたり 72 ピクセル (ppi) です。



Mac で表示される画像には 72 ppi が適切ですが、Windows ベースの PC では解像度を 96 ppi に設定する必要があると聞いたことがあるかもしれません。

「ppi」だと言う人もいます( ピクセル インチあたり)、他の人はそれが「dpi」であると主張します( ドット 1 インチあたり) であり、1 つの小さな事実がなければ、全体が非常に混乱することになります。それはすべて完全にナンセンスです!このチュートリアルでは、標準の Web 解像度や画面解像度などというものがない理由と、画像が Web 用である場合、画像の解像度についてまったく心配する必要がない理由を学びます。





少し歴史...

72 ppi の画面解像度の起源は、Apple が最初の Macintosh コンピュータをリリースした 1980 年代半ばまでさかのぼります。これらのコンピュータには、画面解像度が 72 ピクセル/インチの 9 インチ ディスプレイが組み込まれていました。なぜ 1 インチあたり 72 ピクセルなのか?これは、Macintosh の画面が Apple の ImageWriter プリンタと完全に調和して動作するように特別に設計されているためです。このプリンタの印刷解像度は 1 インチあたり 144 ドットで、画面の解像度のちょうど 2 倍です。これにより、画面表示を印刷ページに合わせて簡単にスケーリングできるようになりました。つまり、テキストとグラフィックスを印刷時に表示される正確なサイズで画面にプレビューできました。その後、Apple が Macintosh 用のより大きなディスプレイの製造を開始したとき、ユーザーが常に正確な印刷ドキュメントの画面上のプレビューを表示できるように、画面の解像度を同じ 72 ピクセル/インチに維持するようにしました。 ImageWriter プリンターを使用します)。

しかし、1 インチあたり 72 ピクセルの画面解像度は Apple だけの標準であり、長続きしませんでした。 Macintosh 用のモニターを販売しているサードパーティ企業は標準に固執せず、競合する PC モニターも同様でした。それから 30 年近くが経過した今日、テクノロジーは大幅に改善され、解像度が 72 ppi しかない画面の時代はとうの昔に過ぎ去りました。すべてを始めた会社である Apple でさえ、今でははるかに高い解像度のディスプレイを販売しています。もう誰も 72 ppi の画面を作っていません。誰もいない 使用して もう72 ppiのスクリーン。それでも、その古いテクノロジーは私たちの時代からはるかに遅れていますが、Web にアップロードする前に、Photoshop で画像の解像度を 72 ピクセル/インチに設定する必要があると信じ続けている人がたくさんいます。ほとんどの人は、その理由は画像が画面上で適切に表示されるためだと考えています。そのため、コンピュータ モニタが、最新のすべてのコンピュータ モニタと同様に、実際に 72 ppi よりもはるかに高い解像度であることを証明する簡単な方法を学ぶことから始めましょう。



72 PPI 標準をテストする

最近の誰もがそうであるように、あなたのコンピュータのディスプレイ (スタンドアロン モニタ、iMac のようなオールインワン システム、ラップトップの一部など) は、1 インチあたり 72 ピクセルを超える画面解像度を持っています。私の言葉を信じてください。自分で簡単にテストできます。必要なのは、定規または巻尺だけです。さて、店がコンピュータ モニタを販売するとき、彼らは通常、そのサイズに基づいてそのサイズを教えてくれます。 対角幅 、いくつかの一般的なサイズは 17 インチ、19 インチ、24 インチなどです。それは問題ありませんが、ここでのテストでは、その数を気にする必要はありません。私たちが知る必要があるのは、 実際の幅 、画面のインチ。これを行うには、定規または巻尺をつかみ、画面の領域を左から右に測定します。画面領域自体のみを測定していることを確認してください。画面の周囲に境界線を含めないでください。画面の実際の幅が必要です ( パソコンモニターの写真 シャッターストックから):

  コンピューター画面の実際の幅を測定します。 Photoshop Essentials.com によって Shutterstock からライセンス供与された画像 画面の幅を測定します (外側の境界線は含みません)。

幅を測定したら、モニターがその幅に設定されていることを確認する必要があります。 ネイティブのディスプレイ解像度 、これは、画面が左から右、上から下に表示できる実際のピクセル数です。たとえば、ネイティブ表示解像度が 1920 x 1080 (最近では一般に「フル HD」と呼ばれます) のモニターには、左から右に 1920 ピクセル、上から下に 1080 ピクセルが含まれます。現在、ネイティブ ディスプレイ解像度が 2560 x 1440 のモニターを使用していますが、私のラップトップのネイティブ ディスプレイ解像度は 1920 x 1200 であるため、さまざまです。つまり、特定のモニターのネイティブ ディスプレイ解像度を知る必要があります。オペレーティングシステムの表示オプションでモニターが設定されているものであることを確認してください。



画面の実際の幅を測定し、モニターがネイティブのディスプレイ解像度で実行されていることを確認したので、実際の画面解像度 (1 インチあたりのピクセル数) を調べるには、ネイティブから最初の数値を取得します。画面の幅をピクセル単位で示し、それを画面の幅 (インチ) で割ります。たとえば、私のネイティブ ディスプレイ解像度は 2560 x 1440 なので、最初の数値 2560 (ピクセル単位の画面の幅) を取り、それをインチ単位の幅 (私の場合は) で割ります。 23.4 (とにかくかなり近い)。オペレーティング システムに組み込まれている便利な電卓を使用すると、2560 ÷ 23.4 = 109.4 となり、四捨五入して 109 になります。この簡単なテストから、画面の解像度が 1インチあたり109ピクセル いいえ 1 インチあたり 72 ピクセル。あなたの画面での独自のテストでは、私の結果とは異なる結果が得られるかもしれませんが、80 年代半ばのオリジナルの Macintosh コンピューターをまだ使用していない限り、72 ppi よりもはるかに高くなります。

必要に応じて、画面の高さで同じことを行うことができます。定規または巻尺を使用して、画面の実際の高さをインチで測定します (ここでも境界領域を避けてください)。

  コンピューター画面の実際の高さを測定します。 Photoshop Essentials.com によって Shutterstock からライセンス供与された画像 画面の高さを測定します (外側の境界線は含みません)。

次に、画面のネイティブ ディスプレイ解像度から 2 番目の数値を取得します。これにより、ピクセル単位の高さが得られ、インチ単位の高さで割ります。繰り返しますが、私のネイティブ ディスプレイ解像度は 2560 x 1440 なので、2 番目の数値 1440 を、測定した画面の高さである 13.2 インチで割ります。計算機を使用すると、1440 ÷ 13.2 = 109.09 となり、ここでも 109 に丸めます。ご覧のとおり、画面の幅または高さのどちらを使用してもほぼ同じ結果が得られるはずです。私の場合、どちらも 1 インチあたり 72 ピクセルではなく、1 インチあたり 109 ピクセルになりました。



比較のために、私のラップトップの実際の画面解像度を確認してみましょう。それは MacBook Pro です (もちろん、何年も前にオリジナルの 72 ppi 標準を提供した Apple 製です)。私の MacBook Pro のネイティブ ディスプレイ解像度は 1920 x 1200 なので、前と同じように、最初の数字 1920 を取得します。これにより、画面の幅がピクセルで表示され、それを画面の幅で割ります。この場合は 14.4 インチです。したがって、1920 ÷ 14.4 = 133.3 で、四捨五入します。 133 ピクセル/インチ .それは 多く 72 よりも高く、スタンドアロン モニターよりもさらに高くなります。高さについても同じことを行います。高さをピクセル単位 (1200) で、高さ (9) で割ります。 1200 ÷ 9 = 133.3、ここでも 1 インチあたり 133 ピクセルに丸められます。

2 つの異なる画面解像度 (109 ppi と 133 ppi) を持つ 2 つの異なるディスプレイは、どちらも 72 ppi よりもかなり高く、多くの人が Web 上や画面上で画像を表示するための業界標準の解像度であり続けています。私の画面、あなたの画面、および他のすべての画面の解像度が 72 ppi を超えている場合、私の画面の解像度が互いに大きく異なり、あなたの画面の解像度も異なる可能性があるという事実は言うまでもありません。画面解像度の公式基準がなくなっただけですが、あったとしても 72 ppi ではなくなります。当時は、それが設計された元の Macintosh コンピュータのように、歴史です。

画像の解像度は、画面サイズではなく、印刷サイズに影響します

今日のすべてのコンピューター モニターの画面解像度が 72 ppi を超えているという事実から、72 ppi の画面解像度標準などというものはもう存在しないと確信できない場合は、考慮すべき重要な事実がもう 1 つあります。以前に私たちを読んだ場合 画像解像度、ピクセル寸法、およびドキュメント サイズ チュートリアルでは、画像の解像度が絶対にあることをすでに知っています なし 画像が画面にどのように表示されるかを指定します。実際、デジタル画像自体には固有の解像度がまったくありません。それはただのピクセルです。左から右に特定の数のピクセルがあり、上から下に特定の数があります。画像の幅と高さ (ピクセル単位) は、 ピクセル寸法 、そしてそれがコンピューター画面が気にするすべてです。



画面に表示される画像のサイズは、画像のピクセル寸法と画面の表示解像度の 2 つだけに依存します。前に説明したように、画面をネイティブのディスプレイ解像度に設定している限り、画像はピクセル単位で表示されます。つまり、画像の各ピクセルは、画面上で正確に 1 ピクセルを占有します。たとえば、640x480 ピクセルの画像は、画面の 640x480 ピクセル領域を埋めます。 Web サイトの幅 800 ピクセルのバナーは、画面上では幅 800 ピクセルで表示されます。それ以上でもそれ以下でもありません。また、Photoshop で画像の解像度を設定しても、72 ppi、300 ppi、3000 ppi のいずれであっても、画面に表示される画像の大きさにはまったく影響しません。

これは、画像の解像度が 1 つのことにのみ影響するためです。 印刷された . Photoshop で解像度を設定することにより、 プリンター 、画面ではなく、画像内の何ピクセルを 1 インチの紙に詰め込むかを指定します。紙の 1 インチあたりに詰め込むピクセルが多いほど、印刷時に表示される画像は小さくなります。一般的に言えば、1 インチあたりの印刷ピクセル数が多いほど、 印刷品質 .



特定の画像解像度に基づいて、写真がどのくらいの大きさで印刷されるかを簡単に把握できます。写真の幅をピクセル単位で取り、画像の解像度で割ります。次に、写真の高さをピクセル単位で取り、同様に画像の解像度で割ります。例として、640 x 480 ピクセルの画像を取り、その解像度を Photoshop で 72 ppi に設定すると、写真の幅と高さをその解像度で割って、紙に約 8.9 x で印刷されると判断できます。 6.7インチ。たとえば、Photoshop で解像度を 240 ppi (より一般的な印刷解像度) に上げると、ピクセルの幅と高さを 240 ppi で割って計算すると、写真が特定のサイズで印刷されることがわかります。 2.7 x 2 インチで、72 ppi で印刷した場合よりもはるかに小さくなりますが、全体的な印刷品質ははるかに向上します。しかし、ここで理解しておくべきより重要なことは、解像度を変更しても、画面上の画像の外観にはまったく影響しないということです。

解像度が画面サイズではなく印刷サイズにどのように影響するかをより明確に確認するために、Photoshop で開いた画像を次に示します。この小さな男は、この 72 ppi の Web 解像度のすべてを理解しようとしていますが、少し考えすぎているようです ( 考える子供の写真 シャッターストックから):



  バック グラウンドで黒板と考える子供。 Photoshop Essentials.com によって Shutterstock からライセンス供与された画像 画像の解像度は実際にはそれほど複雑ではありませんが、間違いなく努力の A です。

上に移動して、Photoshop の [画像サイズ] ダイアログ ボックスを開きます。 画像 画面の上部にあるメニューバーのメニューと選択 画像サイズ :

  Photoshop で画像サイズ コマンドを選択します。画像 © 2013 Photoshop Essentials.com [画像] > [画像サイズ] に移動します。

[画像サイズ] ダイアログ ボックスの上部には、 ピクセル寸法 画像の幅と高さをピクセル単位で示すセクション。ここで、私の写真の幅と高さの両方が 500 ピクセルであり、Web での表示に適したサイズになっていることがわかります。これは、コンピュータ画面が気にする画像サイズダイアログボックスの唯一の部分です - 画像の実際のピクセル寸法:

  [画像サイズ] ダイアログ ボックスの [ピクセル寸法] セクション。画像 © 2013 Photoshop Essentials.com [ピクセル寸法] セクションには、幅と高さがピクセル単位で表示されます。

ピクセル寸法の下には、 原稿サイズ セクションは、印刷した場合に画像が現在紙に表示される大きさを示しています。このセクションでは、印刷サイズのみを扱い、画像が画面にどのように表示されるかについてはまったく影響しません。それはまた、非常に重要なものの本拠地でもあります 解像度 解像度は画面サイズではなく印刷サイズに影響するため、これは理にかなっています。ご覧のとおり、Photoshop は私の写真の解像度を 1 インチあたり 72 ピクセルに設定し (そうです、Photoshop でさえ 72 ppi 神話に貢献しています)、[解像度] オプションのすぐ上にある [幅] ボックスと [高さ] ボックスに、 72 ppi では、500 x 500 ピクセルの写真が紙に 6.944 x 6.944 インチで印刷されることがわかります (500 ÷ 72 = 6.944):

  [画像サイズ] ダイアログ ボックスの [ドキュメント サイズ] セクション。画像 © 2013 Photoshop Essentials.com [ドキュメント サイズ] セクションには、現在の解像度に基づく印刷サイズが表示されます。画面サイズには影響しません。

画像の解像度を上げるとどうなるか見てみましょう。ただし、その前に、すぐにチェックを外します 画像のリサンプル ダイアログボックスの下部にあるオプションを使用して、解像度を変更したときに画像が元のピクセル寸法を維持するようにします。

  [画像サイズ] ダイアログ ボックスの [画像の再サンプル] オプションのチェックを外します。画像 © 2013 Photoshop Essentials.com [画像の再サンプル] オプションのチェックを外します。

[画像のリサンプル] をオフにして、解像度を 1 インチあたり 72 ピクセルから 240 ピクセル/インチ .上部の [ピクセル寸法] セクションで、解像度を上げても実際のピクセル寸法が変わらないことがわかります。 500 x 500 ピクセルのままです。つまり、画面上で 500 x 500 ピクセルの領域を占めることになります。しかし、240 ppi では、 紙に印刷する わずか 2.083 x 2.083 インチ (500 ÷ 240 = 2.083) のサイズで。解像度を変更すると、写真の印刷サイズが変更されましたが、他には何もありません:

  画像の解像度を 240 ピクセル/インチに変更します。画像 © 2013 Photoshop Essentials.com 画像は小さく印刷されますが、画面上ではまったく同じ 500 x 500 ピクセル サイズのままです。

もう一度画像の解像度を上げます。今度はクレイジーなものにします 500 ピクセル/インチ 、数学を本当に簡単にするためです。 1 インチあたり 500 ピクセルの解像度に設定された 500 x 500 ピクセルの画像は、紙に 1 x 1 インチの画像として印刷されます (500 ÷ 500 = 1)。繰り返しますが、画像の実際のピクセル寸法は変更されていません。 500 ppi でも、72 ppi、240 ppi、または任意の解像度の場合と比べて、私の画像は画面上で大きくも小さくも見えません。これは、解像度の設定に関係なく 500 x 500 ピクセルの画像であり、そのピクセル寸法があなたのコンピュータ画面が気にするすべて:

  画像の解像度を 500 ピクセル/インチに変更します。画像 © 2013 Photoshop Essentials.com 500 ppi では、画像は非常に小さく印刷されますが、画面上では 500 x 500 ピクセルの画像として表示されます。

最後に、上記の 3 つの解像度すべてで表示される画像を並べて比較します。画像を小さくしました (現在は 200 x 200 ピクセルしかありません) ので、3 つのバージョンすべてを並べて表示できますが、左側の最初のバージョンは 72 ppi で保存されています。中央のバージョンは 240 ppi で保存され、右側のバージョンは 500 ppi で保存されました。

  72 ppi で保存された画像の 200x200 ピクセル バージョン。画像 © 2013 Photoshop Essentials.com  240 ppi で保存された画像の 200x200 ピクセル バージョン。画像 © 2013 Photoshop Essentials.com  500 ppi で保存された画像の 200x200 ピクセル バージョン。画像 © 2013 Photoshop Essentials.com 画像の 72 ppi (左)、240 ppi (中央)、および 500 ppi (右) バージョン。

はっきりとわかるように、解像度は画像が画面上でどのように見えるかにまったく影響しません。 3 つのバージョンはすべて、解像度の設定に関係なく、それぞれ正確に 200 x 200 ピクセルのスペースを占有します。各バージョンの品質もまったく同じです。各バージョンは 印刷する 解像度設定が異なるため、サイズは大きく異なりますが、画面サイズや画質にはまったく違いはありません。

この 72 ppi の Web および画面解像度のナンセンスがすぐになくなるかどうかは疑わしいですが、このチュートリアルで少なくとも、現時点でそれが実際にナンセンスである理由を簡単に理解できることを願っています.最近のコンピューター モニターはすべて 72 ppi を超える画面解像度を備えており、Photoshop の画像解像度オプションは写真の印刷サイズにのみ影響し、画面サイズには影響しません。

Web 上で表示するのに十分小さいピクセル寸法の写真は小さすぎて、高品質のバージョンを実用的なサイズでダウンロードして印刷することはできません。それが Web 上にあるか、電子メールにあるか、またはどのような場合であっても、Photoshop で解像度を 72 ppi に設定する必要がある論理的な理由はまったくありません。写真を印刷する場合を除き、画像の解像度を気にする必要はまったくありません。そして、ここにあります!

すべての Photoshop チュートリアルを PDF として入手してください。 今すぐダウンロードしてください!