GIF 形式

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

GIF 形式は、可逆圧縮方式の LZW 圧縮を使用します。ただし、GIF ファイルは 256 色に制限されるので、元の 24 ビット画像を 8 ビットの GIF として最適化すると、画像から一部のカラーが削除されます。

特定色域を使用した GIF 画像と Web カラーを使用した GIF 画像
特定色域を使用した GIF 画像(左)と Web カラーを使用した GIF 画像(右)

GIF 画像内のカラー数を選択して、ブラウザーでカラーをどのようにディザ処理するか制御できます。GIF は、透明な背景または背景のマット処理をサポートします。この場合、画像のエッジが Web ページの背景色とブレンドされます。

PNG‑8 形式

PNG‑8 形式は、8 ビットカラーを使用します。GIF 形式と同様に、PNG‑8 は、ラインアート、ロゴ、活字などのシャープなディテールを保持したまま、べた塗り部分を効率的に圧縮します。

PNG‑8 は、ブラウザーによってはサポートされていない場合があるので、画像を様々な人に配信するときは、この形式を避けることをお勧めします。

PNG‑8 形式は GIF より優れた圧縮スキーマを使用しているので、PNG‑8 ファイルのサイズは同じ画像の GIF ファイルより 10 %から 30%小さくなります(画像のカラーパターンによって異なります)。PNG‑8 圧縮は可逆方式ですが、元の 24 ビット画像を 8 ビットの PNG 画像として最適化すると、画像から一部のカラーが削除される場合があります。

注意:

一部の画像、特に単純なパターンと少ないカラーで構成された画像では、GIF 圧縮の方が PNG‑8 圧縮より小さくなる場合があります。GIF 形式と PNG‑8 形式で画像を最適化して、ファイルサイズを比較してください。

GIF 形式では、画像内のカラー数を選択して、ブラウザーでカラーをどのようにディザ処理するか制御できます。PNG‑8 形式 は、透明な背景または背景のマット処理をサポートします。この場合、画像のエッジが Web ページの背景色とブレンドされます。

we_04
ディザ処理していない 256 色の PNG‑8 画像(左)とディザ処理した 16 色の PNG‑8 画像(右)

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

GIF は、広いべた塗り部分とラインアート、ロゴ、活字などの鮮明なディテールを含む画像向けの標準的な圧縮形式です。GIF 形式と同様に、PNG‑8 は透明部分をサポートし、シャープなディテールを保持しながら塗りつぶし部分を効率よく圧縮します。ただし、PNG‑8 ファイルの表示に対応していない Web ブラウザーもあります。

  1. 画像を開いて、ファイル/Web 用に保存を選択します。
  2. 最適化ファイル形式メニューで、「GIF」または「PNG‑8」を選択します。
  3. フル解像度の画像をダウンロードしているときに低解像度の画像を表示するには、「インターレース」を選択します。インターレースによりダウンロード時間は短くなるように感じられますが、ファイルサイズは大きくなります。
  4. 最適化ファイル形式メニューの下で、カラールックアップテーブルを生成するための減色アルゴリズムを選択します。

    知覚的

    人間の目による知覚度の高いカラーを優先したカスタムカラーテーブルを作成します。

    特定

    知覚的カラーテーブルとよく似ていますが、より広範囲を占めるカラーと Web カラーの保全を主体にしています。通常このカラーテーブルが、最もカラーの保全性に優れています(「特定」が初期設定です)。

    割り付け

    画像に最もよく使用されているスペクトルからカラーをサンプルしてカスタムカラーテーブルを作成します。例えば、グリーンとブルーの濃淡だけで構成される画像からはグリーンとブルーが主体のカラーテーブルが作成されます。多くの画像は、スペクトルの特定領域のカラーを集中的に使用しています。

    制限(Web)

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

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

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

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

    注意:

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

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

    ループオプションを選択

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

    フレームディレイ

    Web ブラウザーで各フレームを表示する秒数を指定します。少数の値を使用すると、1 秒未満の単位で指定できます。例えば、「0.5」と指定すると、0.5 秒のディレイになります。

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

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