写真のサイズを縮小して、写真がWebページ上でより速く読み込まれるようにする
大きすぎる画像はウェブページに素早く読み込まれず、画像が読み込まれないとページを離れる可能性が高くなります。 しかし、細部を失うことなく、どのように写真を小さくするのですか？ この記事では、このプロセスを説明します。
画像サイズを小さくする方法
Web用に画像のサイズを変更する前に、画像を切り抜いて不要な部分を削除する必要があります。 トリミング後、全体のピクセルサイズをさらに小さく変更できます。
すべての写真編集ソフトウェアには、画像のピクセルサイズを変更するコマンドがあります。 Image Size 、 Resize 、またはResampleというコマンドを探します。 これらのコマンドのいずれかを使用すると、使用する正確なピクセルを入力するためのダイアログボックスが表示されます。 ダイアログ内に他のオプションがあります：
- リサンプル：画像がDSLRで撮影されている場合、オッズは300ピップ/インチ（ppi）の解像度であることがかなり良いです。 このような場合は、値を72または100に減らし、画像の物理的な大きさも減少します。 Web上で画像を使用するときに値を増やすことは決してありません。
- 比率を維持するか縦横比を維持する：このオプションを有効にします。 Photoshopで幅と高さの値をリンクするオプションをクリックします。 画像の伸びや歪みを防止します。 このオプションを有効にすると、1つの値（高さまたは幅）を入力するだけで、他の値は自動的に調整されます。
- 解像度の値を変更する：幅と高さの値を変更する前に、解像度を低い数値に変更します。これはダウンサンプリングと呼ばれます。 これにより、幅と高さの値も小さくなるため、ダウンサンプリング前にこれらの値を変更すると、意図したよりも画像が小さくなる可能性があります。
ファイル形式はキーです
オンライン画像は、通常、 .jpgまたは.png形式です。 .png形式は.jpg形式よりも少し正確ですが、.pngファイルもファイルサイズがやや高い傾向があります。 画像に透明度が含まれている場合は、.png形式を使用し、 透明度オプションを選択する必要があります。
JPG画像は、 損失のあるものとみなされます。 緩やかな説明は、連続した色の領域が1つの領域にグループ化されているため、画像内の各ピクセルの色を覚える必要がないため、色が非常に小さいことです。 圧縮の量は、Photoshopの品質スライダを使用して決定されます。 値の範囲は0〜12で、数値が小さいほどファイルサイズが小さくなり、失われる情報が増えます。 ウェブを対象とする画像では、8または9の値が一般的です。
Sketch 3ユーザの場合は、[ プロパティ]パネルの [ エクスポート ]ボタンをクリックすると、 品質を設定できます。 0〜100％の品質スライダが表示されます。 一般的な品質値は80％です。
圧縮レベルを選択するときは、圧縮アーチファクトを避けるために、中音域から高音域に品質を保ちます。
決してjpgイメージを再圧縮しないでください。 すでに圧縮されたjpg画像を受け取った場合は、画質をPhotoshopで12、Sketch 3で100％に設定します。
イメージが小さいか、または単色が含まれている場合は、GIFイメージの使用を検討してください。 これは、単色のロゴや色の濃淡を含まないグラフィックスに特に便利です。 ここでの利点は、ファイルサイズに大きな影響を及ぼすカラーパレットの色数を減らすことができることです。
オリジナルファイルのサイズを変更したり上書きしたりしないでください！
イメージのサイズを変更した後、元の高解像度ファイルを上書きしないように名前を付けて保存を実行してください。 ここにいくつかのヒントがあります：
- 画像あたり50〜250 KBのファイルサイズで撮影したいとします。 同じページに複数のファイルを置いたり、1つの電子メールで送信する場合は、小さくしてください。
- すべての画像の合計について、Webページごとに1000 KBを超えないようにしてください。
これは時間のかかるプロセスのように聞こえるかもしれません。特に、写真をたくさん共有している場合は、幸いなことですが、今日のソフトウェアのほとんどは、バッチの写真をすばやくサイズ変更して圧縮することを容易にしました。 ほとんどの画像管理や写真編集ソフトウェアには、画像をサイズ変更して圧縮する「電子メール写真」コマンドがあります。 一部のソフトウェアでは、Web上に投稿するための完全なフォトギャラリーをサイズ変更、圧縮、生成することさえできます。 これらのタスクの両方に特化したツールがあります。その多くはフリーソフトウェアです。
バッチ画像のサイズ変更
バッチでイメージのサイズを変更する場合に使用するリソースは次のとおりです。
- Photoshop Elementsで複数のファイルをサイズ変更する
- Picasaで複数の画像ファイルのサイズを変更する
- XnViewを使ってバッチ画像のサイズを変更する方法
- バッチサイズ変更とトリミング：ツールとヒント