最適化

Web 用に最適化すると、インターネットでの表示に最適になるように、画像の圧縮や表示オプションの設定が行われます。画像をインターネットで配信する場合、ファイルサイズは重要です。ダウンロード時間が極端に長くならない程度に小さく、カラーやディテールを十分に保持できる程度に大きくなくてはなりません。Web で使用されるグラフィックファイルには、主に GIF、JPEG、PNGの 3 つの形式が使用されています。

画像を Web で配信するときは、ファイルサイズを考慮する必要があります。ダウンロード時間が極端に長くならない程度に小さく、カラーやディテールを十分に保持できる程度に大きくなくてはなりません。

Web で使用されるグラフィックファイルには、主に GIF、JPEG、PNG の 3 つの形式が使用されています。次のいずれかの方法を使用して、画像をこれらの形式で最適化します。

  • 画像を Adobe® Dreamweaver® などの Web オーサリングアプリケーションで使用できるように最適化するには、「Web 用に保存」コマンドを使用します。Web 用に保存ダイアログボックスでは、画像を異なるファイル形式と異なる最適化設定でプレビューできます。透明部分やアニメーション設定も変更できます。

  • 基本的な最適化を行う場合は、「別名で保存」コマンドを使用します。ファイル形式に応じて、画質、透明な背景またはマット処理、カラー表示、ダウンロード方法を指定できます。

Web 用に保存ダイアログボックスの使用

Web 用に保存ダイアログボックスを使用して、Web で共有する写真に対する異なる最適化オプションの効果をプレビューします。作業は簡単です。写真を開いて、ファイル/Web 用に保存を選択します。ファイル形式メニューから形式を選択し(GIF、JPEG、PNG‑8 または PNG‑24)、必要に応じてオプションを設定します(ファイル形式メニューはプリセットメニューの下にあります)。ファイルのコピーが保存されるので、元の画像が上書きされることはありません。

Web 用に保存ダイアログボックス
Web 用に保存ダイアログボックス

A. ツールボックス B. スポイトツールカラー C. 最適化設定とその他のオプションのメニュー D. 画像サイズ E. アニメーションオプション F. ズームレベルメニュー G. ブラウザープレビューメニュー H. 元の画像 I. 最適化した画像 

最適化オプションは、Web 用に保存ダイアログボックスの右側に表示されます。Web ファイル形式を選択するとともに、圧縮およびカラーオプションを選択したり、透明な背景またはマット処理を選択したり、画像のサイズを変更することができます。定義済みの設定を使用したり(プリセットメニューから形式を選択)、形式固有のオプションを選択して最適化を微調整することもできます。

画像ウィンドウには、元の画像(左)と最適化した画像のプレビュー(右)が表示されます。それぞれのウィンドウの下には、最適化の情報(現在の設定、最適化したファイルのサイズ、推定ダウンロード時間)が表示されます。調整を行うと、最適化した画像に新しい設定が反映され、画像の下の情報が変化します。

ダイアログボックスの左上隅には小さなツールボックスが表示されます。画像の別の部分を表示するには、手のひらツールを選択して画像をドラッグし、該当する部分が表示されるように移動します。画像をズームインするには、ズームツールを選択して表示領域内でクリックします。Alt キーを押しながらもう一度クリックすると、ズームアウトします(または、ダイアログボックスの下にある「ズーム」ボックスを使用します)。マットカラーを作成するには、スポイトツールカラーを使用します。

Web 用に最適化されたファイル形式

Web 用のファイルは 4 種類の形式から選択できます。Web 画像用の形式を選択するときは、次のガイドラインを参考にしてください。

JPEG

ほとんどの写真の保存に最適な形式です。

PNG‑24

JPEG と同様に、写真に適した形式です。画像に透明部分が含まれている場合のみ、JPEG ではなく PNG‑24 を選択します(JPEG は透明ピクセルをサポートしません。透明部分はマットカラーで塗りつぶす必要があります)。PNG‑24 ファイルは、同じ画像の JPEG ファイルよりサイズがはるかに大きくなります。

GIF

GIF は、ラインアート、広いべた塗り部分と鮮明なディテール部分を含むイラストレーション、テキストなどに適した形式です。また、アニメーション画像を書き出す場合は、GIF を使用する必要があります。

PNG‑8

PNG‑8 は、あまり知られていませんが GIF と同等の形式で、GIF と同じ用途で使用します(アニメーションを除く)。

GIF および PNG‑8 形式の画像(インデックスカラー画像と呼ばれる場合もあります)は、最大 256 色で表示することができます。画像をインデックスカラーに変換するために、Photoshop Elements はカラールックアップテーブルを作成します。元画像のカラーがカラールックアップテーブルに表示されていない場合は、テーブル内で最も近いカラーを使用するか、利用可能なカラーを用いてそのカラーをシミュレートします。

JPEG および PNG‑24 ファイルは 24 ビットカラーをサポートし、最大 1600 万色で表示することができます。形式に応じて、画質、透明な背景またはマット処理、カラー表示、ブラウザーが画像をダウンロードしているときの画像の表示方法を指定できます。

Web での画像の表示は、コンピュータープラットフォーム、オペレーティングシステム、モニター、ブラウザーで表示されるカラーによっても異なります。異なるブラウザーやプラットフォームで画像をプレビューして、Web でどのように表示されるか確認することもできます。

既定の最適化設定の適用

Web 用に保存ダイアログボックスの右上にあるプリセットメニューからあらかじめ定義された設定(プリセット)を選択することで、画像を Web 用にすばやく簡単に最適化できます。プリセットは、様々な種類の画像の最適化ニーズを満たすように定義されています。

各プリセットの名前から、そのプリセットが対象とするファイル形式と画質レベルがわかるようになっています。例えば、「JPEG 高」を選択すると、JPEG 形式の画像を高画質/低圧縮率で最適化します。「GIF 32 ディザ」を選択すると、GIF 形式の画像のカラー数を 32 色に減らし、ディザ処理を行って最適化します。

  1. Web 用に保存ダイアログボックスで、プリセットメニューから設定名を選択し、「OK」をクリックします。
  2. 最適化ファイルを別名で保存ダイアログボックスで、ファイル名を入力して「保存」をクリックします。

    注意:

    プリセットのオプションを変更した場合は、プリセットメニューに「[名称なし]」と表示されます。カスタム設定は保存できませんが、Web 用に保存ダイアログボックスを次に開いたときに現在の設定が表示されます。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー