フロントエンド開発で知っておくべき画像の知識

1. 画像用語

グラフィックと写真

• グラフィック

  ウェブサイトのロゴ、スケッチ、図表、ほとんどのアニメーションやアイコンはグラフィックに属します。これらの画像は通常、連続した線や急峻な色の遷移で構成され、色の数は比較的少ないです。

• 写真

  写真は通常、数百万色の色を持ち、滑らかな色の遷移やグラデーションを含みます。カメラで撮影された夕日の写真を想像してください。絵画作品の画像（例：モナ・リザの微笑み）は、グラフィックよりも写真に近いと言えます。

画像形式としては、GIFは通常グラフィックの表示に使用され、JPEGは写真の表示に適しています。PNGは両方に適しており、パレット形式のPNG（palette PNG）を使用してグラフィックを表示することは、GIFよりも優れている場合さえあります。

ピクセルとRGB

画像はピクセルで構成されており、ピクセルは画像内の最小の情報単位です。ピクセルを記述するために異なるカラーモデルを使用できますが、コンピュータ画像処理においては、RGBカラーモデルが最も一般的に使用されます。

RGBカラーモデルでは、赤（R）、緑（G）、青（B）の量によって1つのピクセルを記述します。R、G、Bは成分（またはチャネル）と呼ばれ、各成分の強度値の範囲は0〜255です。HTMLやCSSでは16進数の値（00〜FF）がよく使われます。異なる強度の成分を組み合わせることで、異なる色を得ることができます。例えば：

• 赤は rgb(255, 0, 0) または16進数の #FF0000 です。

• 青は rgb(0, 0, 255) または16進数の #0000FF です。

• グレーの影は、3つの成分値が同じである可能性が高いです。例えば、rgb(238, 238, 238) または16進数の #EEEEEE です。

トゥルーカラー画像とパレット画像形式

RGBカラーモデルを使用して、一体どれほど多くの異なる色を表現できるのでしょうか？答えは1600万種です。256 * 256 * 256（または2の24乗）により、16,777,216通りの組み合わせが得られます。これほど多くの色をサポートできる画像形式をトゥルーカラー画像形式と呼び、JPEGやトゥルーカラータイプのPNGなどがこれに該当します。

画像情報を保存する際にスペースを節約するために、画像内の様々な色を抽出して表を作成する技術があります。この表は通常、パレット（またはインデックス）と呼ばれます。このカラーテーブルがあれば、パレット内のエントリと各ピクセルを再照合することで、画像全体を再描画することができます。

パレットには任意のRGBカラー値を含めることができますが、最も頻繁に使用されるパレット画像形式であるGIFとPNG8は、パレットに含めることができる色数を最大256色に制限しています。これは、定義済みの256色からしか選べないという意味ではありません。逆に、1600万以上の色から必要な値を選択できますが、1つの画像に含めることができるのは最大256色までということです。

透明度とアルファチャネル（RGBA）

RGBAは全く別のカラーモデルではなく、RGBを拡張したものです。追加の成分Aはアルファ透明度を表し、値の範囲も0〜255ですが、実際には異なるプログラムやライブラリによって、0%〜100%のパーセンテージ、または0〜127の値として定義されることがあります。アルファチャネルは、画像ピクセルを通して下の内容がどの程度見えるかを記述します。

ウェブページを作成し、背景を設定して、その上に青い画像を配置したと仮定します。画像上の特定のピクセルの透明度が0に設定されている場合、そのピクセルの下の背景は見えません。アルファ透明度が最大値の100%に設定されている場合、画像上のピクセルは隠れ、背景が「浮き出て」きます。50%などの中間値に設定すると、背景と画像上のピクセルの両方を同時に見ることができます。

インターレース

ネットワーク速度が遅いとき、大きな画像はダウンロードの進行に合わせて1行ずつ表示されます。上から下へ1行ずつ表示され、ゆっくりと下に進んでいきます。ユーザーエクスペリエンスを向上させるために、一部の画像形式は連続サンプリングされた画像のインターレースをサポートしています。インターレースを使用すると、画像を完全にダウンロードする前に、ユーザーに画像の粗いバージョンを見せることができ、ページの読み込みが遅れているという感覚を心理的に和らげることができます。

2. 各画像形式の特性

GIF、JPEG、PNGの3つの形式の違い：

GIF

Graphics Interchange Formatの略で、パレット画像形式の一種です。以下の特性があります：

• 透明度

  GIFはバイナリ（はい/いいえ）タイプの透明度を許可します。各ピクセルは、完全に透明（色を含まない）か、完全に不透明（単色を含む）かのどちらかです。これは、アルファ（可変）透明度をサポートしていないことを意味します。その代わりに、パレット内の特定のカラーを透明としてマークし、透明ピクセルにはそのカラー値が割り当てられます。したがって、GIFに透明ピクセルを設定すると、パレットのエントリを1つ「消費」することになります。

• アニメーション

  GIF形式はアニメーションをサポートしており、アニメーションを含む画像は複数のフレームで構成されます。まるで複数の画像が1つのファイルに含まれているかのようです。GIFアニメーションは煩わしいと一般的に思われがちですが、これはウェブの黎明期に乱用されたためです。当時は点滅する文字や回転する@マークなどを作るためにGIFが使われていました。現在でもGIFアニメーションは、バナー広告（現在は主にFlashの天下ですが）や、リッチインターネットアプリケーション（RIAs）の「読み込み中」インジケーターなどで使用されています。

• ロスレス（無劣化）

  GIFはロスレスです。つまり、任意のGIFファイルを開いて修正を加えても、保存して閉じる際に品質が損なわれることはありません。

• プログレッシブスキャン（順次走査）

  GIFファイルを生成する際、LZWと呼ばれる圧縮アルゴリズムを使用してファイルサイズを小さくします。GIFを圧縮するときは、上から下へ1行ずつピクセルをスキャンします。このため、画像が水平方向に多くの重複する色を持っている場合、より良い圧縮効果が得られます。例えば、500 * 10ピクセルの画像（幅500px、高さ10px）があり、水平方向に同じ色の線で構成されているとします。この画像を90度回転させた場合（幅10px、高さ500px）、垂直方向が同じ色の縞模様で構成されることになり、後者のファイルサイズは前者よりも大きくなります。

• インターレース

  GIFはオプションでインターレースをサポートしています。

GIFには256色の制限があるため、写真の表示には適していません。写真に必要な色数は、このオーダーよりもはるかに大きいです。GIFはグラフィック（アイコン、ロゴ、図表）の表示に適していますが、PNG8の方がグラフィック表示には最適な形式です。したがって、アニメーションが必要な場合にのみGIFを使用すべきです。

GIF形式で使用されているLZWロスレスデータ圧縮アルゴリズムは、かつて特許で保護されていましたが、その特許は2004年に期限切れとなりました。現在、GIFは自由に使用できます。

JPEG

JPEGはJoint Photographic Experts Groupの略で、この標準を策定した組織の名称でもあります。JPEGは写真保存の事実上の標準です。人間の目が色や光の強弱を感知する仕組みを考慮し、この形式は様々な技術を使用して画像の表示に必要な情報を削減します。そのため、高度に圧縮されたファイルの中に高解像度の画像を保存できます。以下の特性があります：

• ロスジー（有劣化）

  JPEGはロスジーな形式であり、ユーザーはカスタムの品質レベルを設定できます。このレベルによって、どれだけの画像情報が破棄されるかが決まります。品質レベルの値は0から100までですが、100に設定したとしても、ある程度の品質劣化は発生します。

  画像に対して複数の編集操作を行う場合は、ロスレスの画像形式を使用して中間結果を保存し、すべての修正が完了した後にJPEG形式で別名保存するのが最善です。そうしないと、保存するたびに品質が損なわれてしまいます。

  ただし、以下のような少数の操作はロスレスで行えます：

  • 回転（90度、180度、270度の場合のみ）

  • 切り抜き

  • 反転（水平または垂直）

  • 標準モードからプログレッシブモードへの切り替え（およびその逆）

  • 画像のメタデータの編集

• 透明度とアニメーション

  JPEGは透明度やアニメーションをサポートしていません。

• インターレース

  デフォルトの標準JPEG（Baseline JPEG）の他に、インターレースをサポートするプログレッシブJPEG（Progressive JPEG）があります。Internet ExplorerはプログレッシブJPEG画像を段階的にレンダリングせず、画像が完全にダウンロードされた時点で即座に全体を表示します。

JPEGはウェブ上で写真を保存するための最適な形式であり、デジタルカメラでも広く採用されています。しかし、この形式はグラフィックの保存には適していません。ロスジーな圧縮方法によって、線や明快な色の遷移が「ブロックノイズ」になってしまうからです。

PNG

GIF形式の欠点を補い、LZWアルゴリズムの特許問題を回避するために、PNG（Portable Network Graphics）が誕生しました。実際、PNGは「PNG is Not Gif」の再帰的な略称であるとよく冗談で言われます。以下の特性があります：

• トゥルーカラーとパレットPNG形式

  PNG形式にはいくつかのサブタイプがありますが、大きく分けるとパレットPNG形式とトゥルーカラーPNG形式の2つに分類できます。GIF形式の代わりにパレットPNG形式を使用し、JPEG形式の代わりにトゥルーカラーPNG形式を使用できます。

• 透明度

  PNGは完全なアルファ透明度をサポートしています。Internet Explorer 6でこの機能を使用すると問題が発生することがありました（透明領域がピンクがかった青になる、ジャギーが出るなど。詳細は IE6におけるPNG背景の非透過問題の総合解説 を参照してください）。

• アニメーション

  関連する実験や実際の応用は存在しますが、現時点では、アニメーションPNG形式に対するクロスブラウザな解決策は確立されていません。

• ロスレス

  JPEGとは異なり、PNGはロスレス画像形式です。何度編集しても品質が低下することはありません。このため、JPEGの修正プロセスの中間生成物を保存するのにトゥルーカラーPNGを使用するのが非常に適しています。

• プログレッシブスキャン

  GIF形式と同様に、垂直方向に重複する色がある画像と比較して、水平方向に重複する色がある画像の方が圧縮率が高くなります。

• インターレース

  PNGはインターレースをサポートしており、GIFよりも優れたアルゴリズムを使用しています。これにより、実際の画像をより良く「プレビュー」することができますが、インターレースをサポートするPNG画像はファイルサイズがわずかに大きくなります。

3. PNG

PNGの分類

PNGはPNG8、PNG24、PNG32に分けられます：

• PNG8

  パレット形式のPNG

• PNG24

  トゥルーカラーのPNGですが、アルファチャネルは含みません

• PNG32

  トゥルーカラーのPNGで、アルファチャネルを含みます

PNGとGIF

アニメーションをサポートしていないことを除けば、パレットPNGはGIFのすべての機能を備えています。さらに、アルファ透明度をサポートし、通常は圧縮率が高くファイルサイズも小さいため、可能な限りGIFの代わりにPNG8を使用すべきです。

例外として、色数が極端に少ない小さな画像の場合、GIFの方が圧縮率が高くなることがありますが、そのような小さな画像は本来CSSスプライトにまとめるべきです。HTTPリクエストのオーバーヘッドは、節約できるわずかな帯域幅をはるかに上回ります。また、スプライト画像をPNG形式で保存することで、より高い圧縮率を得ることができます。

PNGとJPEG

画像内の色数が256色を超える場合は、トゥルーカラー画像形式（トゥルーカラーPNGまたはJPEG）を使用する必要があります。JPEGの方が圧縮率が高く、一般的に JPEGは写真保存の事実上の標準 です。しかし、JPEGはロスジーであり、明快な色の遷移の周囲にブロックノイズが発生するため、以下のような場合にはPNGの方が適しています：

• 画像の色数が256色をわずかに超える程度であれば、目に見える品質を損なうことなく画像をPNG8形式に変換できます。驚くべきことに、1000色以上の色を削減したとしても、画像の変化に気づかないことがよくあります。

• 多くの色を含む画像やソフトウェアメニューのスクリーンショットなど、ブロックノイズが許容できない場合は、PNGの方が適した選択肢となります。

4. CSSスプライトの最適化

スプライトをより小さくするための最適化原則がいくつかあります：

• 色による結合

  例えば、カラーパレットが似ているアイコン同士を組み合わせます。

• 不要な空白を避ける

  モバイルデバイスでの処理を容易にします。

• 要素を水平に並べる

  垂直に並べるよりも、スプライトのサイズがわずかに小さくなります。

• 色数を256色以内に制限する

  これはPNG8形式の色数の上限です。

• 個別の画像を先に最適化してから、スプライトを最適化する

  パレットの値が制限されている場合、色数をより簡単に削減できます。

• サイズと配置の制御により、アンチエイリアス・ピクセルの数を減らす

  アイコンが正方形に近い場合、通常、水平方向または垂直方向に整列させることでアンチエイリアス・ピクセルの数を減らすことができます。

• 対角線グラデーションを避ける

  この種のグラデーションはタイル状に並べることができません。

• IE6でアルファ透明画像を使用するのを避ける

  トゥルーカラーのアルファ透明度が必要な画像は、別のスプライトに保存してください。

• グラデーションの色を2〜3ピクセルごとに変える

  毎ピクセル変えるのではなく、少し間隔を空けます。

• ロゴの取り扱いに注意する

  ロゴは認識されやすいため、非常に小さな修正でも気づかれやすいです。

5. まとめ

上記の説明に従うと、一般的にはPNGが最良の選択肢であり、アニメーションにはGIF、高精細な写真にはJPEGを使用するのが良いでしょう。

実際には WebP 形式もかなり前から（2010年）登場しています。現在の 互換性 はまだ完全ではありませんが、対応する解決策が存在します。詳細は WebP 探求の道 を参照してください。

参考文献

• 『続・ハイパフォーマンスWebサイト ― ウェブ高速化のベストプラクティス』