Web 用に写真のサイズを調整する

私たちの多くは自分の写真をウェブに投稿しますが、サイズについてよく質問されます。 写真を使用する必要があります。ファイル サイズが大きすぎる写真を投稿すると、ウェブサイトの機能が低下し、ユーザー (および検索エンジン) が不快になります。同時に、写真の見栄えをできるだけ良くしたいと考えています。

良いニュースがあります。答えはとてもシンプルです。ただし、写真をアップロードする場所によって異なります。ほとんどの場合、サイズをまったく変更する必要はありません。そのプロセスは簡単です。この記事では、写真のサイズ変更について知っておくべきことと、写真のサイズを変更する必要がある場合に備えて、Photoshop と Lightroom で行う方法を紹介します。

ウェブ ギャラリーへのアップロード

SmugMug、SquareSpace、または Flickr などのサービスが提供する Web ギャラリーに写真を公開する場合、写真のサイズ変更についてまったく心配する必要はありません。サービスが写真のサイズを変更します。あなたが持っている最大の JPEG ファイルを Web サイトにアップロードするだけです。このサービスはサイズを変更し、サムネイル画像として使用したり、モバイル デバイスで使用するために、さまざまなサイズの写真を作成します。

Facebook や Instagram などのソーシャル メディア サイトでも同じことが言えます。彼らは写真を大幅に縮小してサイズを変更します（多くの場合、必要以上に縮小します）。フルサイズの JPEG をアップロードするだけで問題ありません。

これらのサービスのいずれかにアップロードする場合 (私が推奨する)、Web 用に写真のサイズを変更することを考える必要はありません。私は何年もの間、自分の写真を個人的に SmugMug にアップロードしていましたが、写真のサイズを変更することは考えたこともありませんでした。このウェブサイトに WordPress を使い始めるまで、その必要はありませんでした。

自分のウェブサイトへのアップロード

WordPress などのブログ プラットフォームを使用して独自の Web サイトを作成している場合は、写真のサイズを変更する必要があります。カメラから出力される JPEG のファイル サイズは (使用しているカメラに関係なく) 大きすぎて、Web サイトが動かなくなります。

Web サイトのファイルをどれくらい小さくする必要がありますか?おそらく、あなたが思っているよりもはるかに小さいです。制御する変数は 2 つあります (この記事の後半でそれらを制御する方法を説明します):

• サイズ – ピクセル単位で測定。そして
• 品質 - パーセンテージで測定

最初に、決定する方法を紹介します 写真の適切なサイズと品質を確認したら、設定の方法を説明します

1.サイズ

画像の適切なサイズを決定するには、まず Web サイトのコンテンツ領域の幅を決定する必要があります。サイトごとに幅が異なるため、これにはあなたの側で多少の掘り下げが必要になる場合があります。たとえば、この Web サイトでは、記事のメイン コンテンツ領域の幅は 1024 ピクセルです。したがって、それよりも広い写真を使用しても意味がありません。したがって、すべての画像を幅 1024 ピクセル以下に縮小する必要があることがすぐにわかりました。

他の Web サイトでは、通常、サイドバーやその他のコンテンツ領域が含まれているため、より小さいコンテンツ領域を使用します。たとえば、私は Digital Photography School のために書いていますが、そのメイン コンテンツ エリアは幅 750 ピクセルです (最近まで幅 600 ピクセルしかありませんでした)。したがって、DPS は幅が 750 ピクセルを超える画像を使用しません。

これらは最大値であることを忘れないでください。画像を実際のコンテンツ領域よりも小さくしたい場合があります。その場合は、コンテンツ領域の何パーセントを画像で埋めるかを決定し、そのコンテンツ領域のパーセントに基づいてサイズを設定してください。

2.品質

画像のサイズを決定したら、品質を制御できます 画像のサイズをさらに決定します。品質のパーセンテージを下げると、ファイルのサイズが小さくなります。これは良いことです。軽度から中程度の品質低下の影響は目立ちません。

さらに、品質のパーセンテージを下げると、ファイル サイズの削減率が高くなります。つまり、品質のパーセンテージを 5% (たとえば、100% から 95% に) 下げると、ファイル サイズが 5% 以上減少します。品質が 5% 低下するごとに、ファイル サイズは約 15% 減少しますが、この減少は品質を低下させるほど減少します。

画像の品質のパーセンテージをどの程度下げる必要がありますか?ここには決まったルールはありません。自分で判断する必要があります。

参考までに、デジタル写真学校のスタッフは、写真のサイズの設定方法についてある程度知っていますが、Web サイトに掲載できる写真は 200 キロバイト (KB) までしか許可していません。画像サイズを長辺 750 ピクセル (最大サイズ) に縮小した後でも、ファイル サイズを 200 KB 未満にするために、しばしば画質を 70 ～ 90% に下げる必要があります。

DPS ほどの量の写真 (またはトラフィック) がないため、自分の Web サイトではより寛容です。写真を少し大きくしてもかまいませんか。それでも、私はそれらを約 200 KB に保ち、決して 450 KB を超えないようにしています。私のページは今でもその方法で非常に速く開くことがわかりました.

繰り返しになりますが、品質パーセンテージに関する厳格なルールはありません。以下に、縮小後のファイルがどのように見えるかを示すいくつかの例を示します。縮小されたファイルにほとんど違いがないことに驚くと思います。

3.ファイルサイズ

ウェブに投稿する写真は キロバイト 単位で測定する必要があるということを忘れてはなりません。 (KB) であり、メガバイト ではありません (MB) それらが Web に投稿されたとき。私のカメラから出力される通常の Raw ファイルは約 24 MB で、ファイルを JPEG に変換しても、通常は 7 ～ 10 MB です。その通りです Web ファイルには大きすぎます。それはあなたに何の役にも立たず、あなたのシステムを行き詰まらせます。

例

このページで話していることの例として、同じ写真のいくつかの異なるバージョンを以下に示します.

大と特大

まず、出発点として、このページの上部は、私が最近カリフォルニア州のトーレ パインズ州立自然地域で撮った写真です。この Web サイトのコンテンツ領域 (幅 1024 ピクセル) に合わせて画像のサイズを変更しました。さらに、品質設定も 80% に下げました。その結果、ファイル サイズは 450 キロバイトになりました。

比較のために、同じ写真を下に掲載しましたが、サイズは 2 倍です。この画像は幅 2048 ピクセルで、画質設定は 100% に保っています。その結果、ファイルは 3.8 MB になり、画面上部の画像の約 8 倍のファイル サイズになります。

両方の写真を見てください。 (私はそれらが並んでいないことを知っていますが、以下にそのような例を示します)。下の写真と画面上部の写真の違いが分かりますか？あなたにはできないと思います.

ピクセル単位でサイズを大きくしても、明らかに何の効果もありません。画面の幅は 1024 ピクセルしかないため、画像を広くしても意味がありません。パーセンテージの増加も役に立ちません。そのさらなるデモンストレーションとして、異なる品質設定で同じ画像をチェックしてみましょう。

さまざまな品質設定

別の例を見てみましょう。今回は横に並べた写真を使用します。下の 4 つの写真はまったく同じサイズですが、品質が大きく異なります。具体的には、以下の各画像は幅 512 ピクセルですが、品質設定は次のとおりです:

• 100% 品質設定 (234 KB ファイル)
• 80% の品質設定 (115 KB ファイル)
• 60% の品質設定 (70 KB ファイル)
• 40% の品質設定 (44 KB ファイル)

私はそれらを混同しました。どれがどれだかわかりますか？推測ができたら、下のキャプションの答えと比較してください。

どれがどれか特定できましたか？あなたが私のようなら、あなたはできませんでした。これらの写真には大きな違いは見られません.

しかし、それらの最小のものは、最大の画像のファイル サイズの 25% しかありません。したがって、これらすべてのポイントは、Web に投稿する前に画像のファイル サイズを小さくすることについてあまり心配する必要がないということです。

それを念頭に置いて、写真のサイズを変更する方法を見ていきましょう。

写真のサイズを変更する方法

写真のサイズを変更する必要がある場合、どのようにしますか?それは、使用しているソフトウェアによって異なります。 Photoshop か Lightroom のどちらかがこれをうまく処理してくれるので、別のサイズ変更ソフトウェアは必要ありません。

各プログラムで行う方法は次のとおりです。

Photoshop での写真のサイズ変更

フォトショップで。 Web 用に保存機能を使用します。画像の辺の正確なピクセル長を設定できるようになり、必要に応じて品質のパーセンテージを設定することもできます.

[ファイル] メニューで、[Web 用に保存] を選択します。画像のサイズと品質を設定できるダイアログ ボックスが表示されます:

画像サイズの調整は下方向です。幅または高さのいずれかを希望の長さに設定するだけで、反対側が対応する長さに自動的に変更されます。ファイルのサイズは左下に表示されます。ファイル サイズが希望どおりになるまで、右上の品質設定を調整します。

プロセスは簡単で、完全に制御できます。唯一の制限は、各画像のサイズを個別に変更する必要があることです。 Lightroom の動作は少し異なり、一度に複数の写真を処理できます。

Lightroom での写真のサイズ変更

Lightroom では、エクスポート機能を使用して写真のサイズを変更します。エクスポート機能を表示するには、右クリックして [エクスポート] を選択し、もう一度 [エクスポート] を選択します。次のダイアログ ボックスが表示されます:

Lightroom では、幅、高さ、またはその両方を設定して画像サイズを設定できます。ピクセル、インチ、またはセンチメートルで設定することもできます。

ファイル サイズの決定に関しては、Lightroom では次の 2 つの方法のいずれかで行うことができます。

• ファイル サイズに特定の制限を設定する
• 品質を設定する (Photoshop のようにパーセンテージで)

しかし、両方を行うことはできません。ファイル サイズまたは品質のいずれかを選択します。

[エクスポート] をクリックすると、Lightroom は指定したフォルダーに画像の新しいコピーを作成します。

写真のサイズ変更に関しては、どちらのプログラムも優れていません。使いやすい方を使用してください。どちらの場合でも、写真のサイズ変更は簡単で、1、2 回実行すると非常に簡単になります。

結論

この時点で、写真のサイズを変更する方法と、Web に投稿するときにファイルをどれだけ小さくするかについてよく理解できているはずです。それを強化するために、そして簡単なことですが、この記事で説明されているプロセスは、いくつかのステップに要約できます。

• 画像のサイズ変更について心配する必要があるかどうかを判断します。 SmugMug、SquareSpace、Flickr、またはその他のサービスを使用して Web に写真を投稿している場合は、そうではありません。それらをそのまま投稿するだけで、サービスプロバイダーがすべてを処理します.ただし、独自の Web サイトまたは WordPress サイトを作成している場合は、画像のサイズを適切に設定する必要があります。
• 画像のサイズを変更する必要がある場合は、ウェブサイトのコンテナーのサイズと、そのコンテナーのどのくらいの量を画像で埋めるかに基づいて、画像のサイズ (ピクセル単位) を決定してください。
• Photoshop の [Web 用に保存] 機能または Lightroom の [エクスポート] 機能を使用して、手順 2 で決定したサイズを設定することから始めて、画像のサイズを変更します。
• 品質のパーセンテージを設定して、画像のファイル サイズをさらに小さくします (または、Lightroom で最大ファイル サイズを使用できます)。画像サイズは最大でも 250 KB 程度に抑えてください。
• 50% という低い品質パーセンテージを使用することを恐れないでください。

このプロセスにより、Web サイトでの写真の見栄えが良くなりますが、動きが鈍くなることはありません。