HTML画像フォーマット

ウェブサイトを構築する際、画像は視覚的な魅力と情報伝達のために不可欠な要素です。
しかし、すべての画像形式が同じように作られているわけではありません。異なる画像ファイルフォーマットを理解することは、ウェブサイトのパフォーマンスを最適化し、視覚的なクオリティを担保するために非常に重要です。

前章で学んだように、<img>タグとそのsrc、alt、width、height属性を使用して画像を埋め込みますが、これらの画像に適切なファイルフォーマットを選択することは、ロード時間、画質、さらには異なる背景下での表示効果に直接影響を与えます。

1. 画像圧縮の仕組みを理解する

具体的なフォーマットを深掘りする前に、まず圧縮（Compression）について理解する必要があります。
圧縮とは、画像ファイルのサイズを小さくするプロセスのことです。ファイルが小さいほどウェブページの読み込みが速くなり、ユーザーエクスペリエンス（UX）が向上します。圧縮には主に2つのタイプがあります。

1.1 有損失圧縮 (Lossy Compression)

有損失圧縮は、画像内の一部のデータを永久に削除することでファイルサイズを削減します。

• 仕組み： 人間の目では気づきにくいデータを破棄します。画像を見る際、脳が欠落した情報を自動的に「補完」します。
• 結果： 見た目はオリジナルとほぼ変わりませんが、ファイルサイズは劇的に小さくなります。ただし、有損失フォーマットで何度も保存を繰り返すと、画質が徐々に劣化します。
• 適したシーン： 写真、色彩が複雑な画像。

1.2 無損失圧縮 (Lossless Compression)

無損失圧縮は、画像データを一切破棄せずにファイルサイズを削減します。

• 仕組み： データ内のパターンを識別することで機能します。例えば、1行に100個の青いピクセルがある場合、「青、青、青...」と100回記録するのではなく、「青いピクセルが100個」と記録します。
• 結果： 画像を開いたとき、それはオリジナルの正確な複製となります。
• 適したシーン： ロゴ、アイコン、テキストを含むスクリーンショット。

2. JPEG (Joint Photographic Experts Group)

JPEGはウェブ上で最も一般的な画像フォーマットであり、写真や色彩が複雑な画像のために設計されています。

2.1 JPEGの主な特徴

• 有損失圧縮： 一部のデータを破棄します。圧縮レベル（例：0〜100のクオリティ）を選択でき、クオリティが高いほどファイルサイズは大きくなります。
• 数百万色のサポート： 1,670万色をサポートしており、現実世界の写真に最適です。
• 透明（透過）非対応： JPEGは透明な背景をサポートしていません。透明な領域は通常、白または黒で塗りつぶされます。

2.2 JPEGを使用すべきケース

• 写真： 風景、ポートレート、商品画像など。JPEGは色彩や色調の微妙なグラデーションを表現するのが得意です。
• 複雑なグラフィック： スムーズな色の変化やグラデーションを持つデジタルペインティング。

2.3 JPEGを避けるべきケース

• テキストや鋭いエッジを持つ画像： JPEGの圧縮は、鋭い線の周囲に「アーティファクト」（ぼやけやブロックノイズ）を発生させ、テキストを読みにくくします。
• ロゴやアイコン： これらには通常、クリアでシャープな線が求められます。
• 透明な背景が必要な場合： JPEGは絶対に使用しないでください。

3. PNG (Portable Network Graphics)

PNGはGIFの代替として開発され、その優れた機能（特に透明度のサポート）により急速に普及しました。

3.1 PNGの主な特徴

• 無損失圧縮： 保存時にデータが失われず、画質が完璧に再現されます。
• 透明度のサポート（アルファチャンネル）： これがPNGのキラー機能です。完全な透明だけでなく、半透明（ドロップシャドウなど）もサポートしています。
• カラー： 数百万色をサポートしています。

3.2 PNGを使用すべきケース

• ロゴとアイコン： エッジをシャープに保つことができます。特にロゴを異なる色の背景に配置する場合、透明度は不可欠です。
• テキストや鋭い線を含むグラフィック： スクリーンショット、図表、テキスト入りのバナーなど。
• 複雑な透明度が必要な画像： 影（シャドウ）がついたオブジェクトなど。

3.3 PNGを避けるべきケース

• 大きな写真： PNGでも写真は保存できますが、無損失であるため、ファイルサイズがJPEGよりはるかに大きくなり、ページの読み込み速度を著しく低下させます。

4. GIF (Graphics Interchange Format)

GIFは最も古いフォーマットの一つであり、アニメーション機能で知られています。

4.1 GIFの主な特徴

• 無損失圧縮（色数制限あり）： 無損失ではありますが、最大で256色しか保持できません。
• アニメーション対応： 1つのファイルに複数のフレームを保存し、簡単なアニメーションを作成できます。
• バイナリ透過： 透明をサポートしていますが、半透明はサポートしていません。ピクセルは「完全に透明」か「完全に不透明」のどちらかです（アンチエイリアス効果が得られません）。

4.2 GIFを使用すべきケース

• シンプルなアニメーション： ロード中のスピナー（回転アイコン）や簡単な装飾アニメーション。
• 極小のアイコン： 色数が非常に少ない小さなアイコン。

4.3 GIFを避けるべきケース

• 写真： 256色の制限により、写真に多くのノイズ（ポスタリゼーション）が発生し、古い新聞のような見た目になります。
• 高品質な透明度が必要な場合： 半透明の影をサポートしていないためです。

5. WebP：現代のオールラウンダー

Googleによって開発されたWebPは、ウェブにより優れた圧縮パフォーマンスを提供するために設計されたモダンな画像フォーマットです。
WebPは画像フォーマット界の「スイスアーミーナイフ」と言えます。高品質を維持しながらファイルサイズを劇的に削減し、JPEG、PNG、GIFのすべてを置き換えることを目標としています。

5.1 WebPの主な特徴

• 超強力な圧縮（より小さいサイズ）：
• WebPは有損失と無損失の両方の圧縮をサポートしています。
• Googleのデータによると、WebPの無損失画像はPNGより26%小さくなります。
• WebPの有損失画像は、同画質のJPEGより25-34%小さくなります。
• これはウェブページの読み込みが速くなり、ユーザーのデータ通信量を大幅に節約できることを意味します。
• フル機能サポート：
• 透明度をサポート（PNGのように）。
• アニメーションをサポート（GIFのように）。
• 豊かな色彩をサポート（JPEGのように）。
• ブラウザサポート：
• 現在、すべてのモダンブラウザ（Chrome, Firefox, Edge, Safari）がWebPを完全にサポートしています。
• 注意：Internet Explorerのような非常に古いブラウザのみがサポートしていません。

5.2 WebPを使用すべきケース

• ほぼすべてのシーン： サイトの読み込み速度を向上させたい場合、現在ほとんどの画像（写真、バナー、透過画像）においてWebPが第一候補となります。

5.3 WebPの使用方法

使い方は通常の画像と全く同じです。

<img src="images/photo.webp" alt="風景写真" width="600" height="400">

6. フォーマット選択の比較表

7. まとめ

JPEG、PNG、GIFは古典的な定番の3形式であり、今でもいたるところで見かけます。
一方で、WebPは現代の新しいスタンダードであり、各フォーマットの長所を一つに集約したものです（サイズはより小さく、機能はより万能）。
モダンなウェブデベロッパーとして、可能な限りWebPを優先的に使用することは、ユーザーエクスペリエンスを向上させるための最もシンプルな方法の一つです。