GIF や PNG-8 形式として最適化

最終更新日 : 2022年5月17日

GIF 形式

GIF形式では8ビットカラーを使用し、線画、ロゴ、文字などのシャープなディテールを保持しながら、べた塗り領域を効率的に圧縮します。また、GIF形式を使用してアニメーション画像を作成し、画像内の透過を保持することもできます。GIF はほとんどの\nブラウザーでサポートされています。

GIF 形式では、可逆圧縮方式である LZW 圧縮を使用します。ただし、GIF ファイルは 256 色に制限されているため、元の 24 ビット画像を 8 ビット GIF として最適化すると、画像から色が失われることがあります。

選択カラーを使用したGIF画像(左)と、Webカラーを使用したGIF画像(右)

GIF 画像内のカラー数を選択し、ブラウザー内でのカラーのディザリング\nを制御できます。GIFでは背景の透明化または背景のマッティングをサポートしており、画像のエッジをWebページの背景色とブレンドできます。

PNG‑8 形式

PNG-8形式では8ビットカラーを使用します。GIF 形式と同様に、PNG‑8 は線画、ロゴ、\n文字などのシャープなディテールを保持しながら、べた塗り領域を効率的に圧縮します。

PNG‑8 はすべてのブラウザーでサポートされているわけではないため、\n幅広いオーディエンスに画像を配布する場合は、この形式の使用を\n避けることをお勧めします。

PNG‑8 形式では GIF よりも高度な圧縮方式を使用しており、\n画像のカラーパターンによっては、PNG‑8 ファイルは同一画像の GIF ファイル\nよりも 10% ~ 30% 小さくなる場合があります。\nPNG‑8 圧縮は可逆圧縮ですが、元の 24 ビット画像を 8 ビット PNG ファイル\nとして最適化すると、画像からカラーが減算される可能性があります。

メモ

特にシンプルなパターンでカラー数の少ない画像では、\nGIF 圧縮の方が PNG‑8 圧縮よりも小さいファイルを作成できる場合があります。GIF 形式と PNG‑8 形式で最適化された画像を表示して、\nファイルサイズを比較してください。

GIF 形式と同様に、画像内のカラー数を選択し、\nブラウザー内でのカラーのディザリングを制御できます。PNG‑8 形式\nでは背景の透明と背景のマッティングをサポートしており、画像の\nエッジを web ページの背景色とブレンドできます。

256 色でディザなしの PNG‑8(左)と、\n16 色でディザリングありの PNG‑8(右)

GIF や PNG-8 形式として最適化

GIF\nは、線画、ロゴ、文字などのべた塗りの大きな領域とシャープな\nディテールを持つ画像を圧縮する標準形式です。GIF 形式と同様に、PNG‑8 は透明をサポートし、シャープな\nディテールを保持しながらべた塗り領域を効率的に圧縮しますが、\nすべての web ブラウザーで PNG‑8 ファイルを表示できるわけではありません。

画像を開き、ファイル>Web用に保存を選択します。
最適化ファイル形式メニューで、「GIF」または「PNG‑8」を選択します。
フル解像度画像のダウンロード中に低解像度で画像を\n表示するには、「インターレース」を選択します。インターレースにより、ダウンロード時間が短縮されたように感じられ、ダウンロードが進行中であることを視聴者にフィードバックすることができます。
最適化形式メニューから、カラールックアップテーブルを生成するためのカラー減色アルゴリズムを選択します:

知覚的

人間の目の感度が高い色を優先してカスタムカラーテーブルを作成します。

特定

知覚的カラーテーブルと似ているカラーテーブルを作成しますが、色の広い領域とWebカラーの保持を優先します。このカラーテーブルは通常、最も色の整合性が高い画像を生成します。(「特定」が初期設定です)。

割り付け

画像で最も頻繁に現れるスペクトラムから色をサンプリングしてカスタムカラーテーブルを作成します。たとえば、緑と青の濃淡のみの画像では、主に緑と青で構成されたカラーテーブルが生成されます。ほとんどの画像では、スペクトラムの特定の領域に色が集中しています。

制限(Web)

WindowsとMac OSの8ビット(256色)パネルに共通の通常の216色のWebセーフカラーテーブルを使用します。このオプションを選択すると、8ビットカラーを使用して画像を表示する際に、色にブラウザーディザが適用されなくなります。画像の色が216色未満の場合、使用されていない色はテーブルから削除されます。

カラーパネルの最大色数を指定するには、カラーメニューから数値を選択するか、テキストボックスに値を入力するか、矢印をクリックして色数を変更します。画像に含まれる色数がパネルよりも少ない場合、カラーテーブルは画像内の色数を反映します。
色数削減アルゴリズムで制限(Web)を選択した場合は、カラーメニューから自動を選択できます。画像内の色の頻度に基づいてPhotoshop® Elementsにカラーテーブルの最適な色数を決定させる場合は、「自動」を選択します。
ディザテキストボックスにパーセンテージを入力するか、ディザメニューの矢印をクリックして表示されるスライダーをドラッグしてディザのパーセンテージを選択します。
画像に透明部分が含まれている場合は、「透明」を選択して透明ピクセルを保持します。「透明」の選択を解除すると、完全および部分的に透明なピクセルがマット色で塗りつぶされます。
アニメーション GIF を作成するには、「アニメーション」を選択します。
最適化した画像を保存するには、「OK」をクリックします。 Web用に保存ダイアログボックスで、ファイル名を入力して保存をクリックします。

アニメーション GIF ファイルの作成

アニメーションの各フレームに表示する画像を、レイヤーパネルの別々のレイヤーに配置します。たとえば、まばたきする目のアニメーションを作成するには、開いた目の画像を1つのレイヤーに、閉じた目の画像を別のレイヤーに配置します。
ファイル/Web 用に保存を選択します。
メモ

画像に複数のレイヤーがある場合は、「別名で保存」ダイアログボックスから「CompuServe GIF形式」を選択し、「フレームとしてレイヤー」を選択することで、「Web用に保存」ダイアログボックスを開くこともできます。

画像を GIF 形式で最適化します。
「アニメーション」を選択します。
ダイアログボックスのアニメーションセクションで追加オプションを設定します。

ループオプションを選択

Webブラウザーでアニメーションを連続して繰り返すか、1回のみアニメーション化します。その他を選択してアニメーションをループする回数を指定することもできます。

フレームディレイ

Webブラウザーで各フレームが表示される秒数を指定します。小数値を使用して秒の端数を指定します。例えば、「0.5」と指定すると、0.5 秒のディレイになります。