Webページで使用される画像形式の特徴と使い分け

あまりフロントエンドに携わることはないものの、最近見かけない画像の拡張子が増えているなということで、Webページで使用される様々な画像形式について調べた内容をその特徴や使い分けのポイントをまとめてみました。

はじめに：ビットマップとベクター

画像形式を理解する上で、まず押さえておきたいのが「ビットマップ形式」と「ベクター形式」の違いです。

ビットマップ形式

ビットマップ形式は、画像を小さな点（ピクセル）の集合として表現します。JPEGやPNG、GIFなどがこれに該当します。拡大すると画質が粗くなるといった特徴があります。

ベクター形式

ベクター形式は、数学的な曲線や直線を用いて画像を表現します。SVGがこれに該当します。拡大しても画質が劣化しないといった特徴があります。

それでは、各画像形式について詳しく見ていきましょう。

1. JPEG (.jpg, .jpeg)

JPEGは、おそらく最も広く使われている画像形式の一つでしょう。

特徴

• フルカラー（1677万色）対応
• 非可逆圧縮で高圧縮率
• 写真やグラデーションの多い画像に適している
• 透過非対応
• 繰り返し保存すると画質が劣化する
• ビットマップ形式

使い所

JPEGは写真やリアルな画像の表示に最適です。高い圧縮率を持つため、ファイルサイズを小さく抑えつつ、十分な画質を維持できます。

注意点

ただし、JPEGの圧縮は非可逆的です。つまり、一度圧縮すると元の画質には戻せません。また、透過（透明部分）には対応していないので、背景を透明にしたい場合は使えません。

2. PNG (.png)

PNGは、高品質な画像を扱う際によく使用される形式です。

特徴

• フルカラー対応（PNG-24）と256色対応（PNG-8）がある
• 可逆圧縮で画質劣化なし
• 透過対応
• ロゴやイラストなどに適している
• JPEGより圧縮率は低い
• ビットマップ形式

使い所

PNGは、ロゴやアイコン、テキストを含む画像など、シャープな輪郭が必要な画像に適しています。また、透過対応なので、背景を透明にしたい場合にも使えます。

注意点

JPEGと比べるとファイルサイズが大きくなりがちです。特に写真のような複雑な画像の場合、PNGを使うとファイルサイズが膨大になることがあります。

3. GIF (.gif)

GIFは、シンプルな画像やアニメーションに適した形式です。

特徴

• 256色までの制限あり
• 可逆圧縮
• 透過対応（1色のみ）
• アニメーション対応
• 単純なイラストやアイコンに適している
• ビットマップ形式

使い所

GIFは、色数の少ないシンプルなイラストやアイコン、そしてアニメーション画像に適しています。特に、ループするシンプルなアニメーションを作成する際によく使われます。

注意点

256色という制限があるため、写真やグラデーションのある画像には適していません。また、透過は1色（完全に透明か不透明か）のみなので、半透明の表現はできません。

4. WebP (.webp)

WebPは、Googleが開発した比較的新しい画像形式です。

特徴

• フルカラー対応
• 非可逆圧縮と可逆圧縮に対応
• 透過対応
• アニメーション対応
• JPEGやPNGより高い圧縮率
• ビットマップ形式

使い所

WebPは、JPEGやPNGの代替として使用できます。特に、ファイルサイズを小さく抑えつつ高品質な画像を提供したい場合に適しています。

注意点

比較的新しい形式のため、一部の古いブラウザでは対応していない可能性があります。そのため、代替画像（JPEGやPNG）も用意しておく必要があるかもしれません。

5. SVG (.svg)

SVGは、ベクター形式の画像形式です。

特徴

• ベクター形式
• 拡大縮小しても画質が劣化しない
• ファイルサイズが小さい
• アニメーション対応
• ロゴやアイコンに適している

使い所

SVGは、ロゴ、アイコン、図形など、シンプルな形状の画像に最適です。特に、レスポンシブデザインで様々な画面サイズに対応する必要がある場合に威力を発揮します。

注意点

複雑な画像や写真には適していません。また、SVGはXMLベースのテキストファイルなので、編集や最適化にはある程度の技術知識が必要です。

6. TIFF (.tif, .tiff)

TIFFは、主に印刷用途で使用される高品質な画像形式です。

特徴

• 高画質
• 可逆圧縮
• 印刷用途に適している
• ファイルサイズが大きい
• Web表示には向かない
• ビットマップ形式

使い所

TIFFは、印刷物や専門的な画像編集作業に適しています。特に、高品質な写真や複雑なグラフィックを扱う場合に使用されます。

注意点

ファイルサイズが非常に大きくなる傾向があり、Web上での使用には適していません。また、一般的なWebブラウザではTIFF形式を直接表示できないことが多いです。

7. BMP (.bmp)

BMPは、Windowsの標準画像形式として知られています。

特徴

• 無圧縮または可逆圧縮
• 画質劣化なし
• ファイルサイズが大きい
• Windowsの標準画像形式
• ビットマップ形式

使い所

BMPは、画質劣化を避けたい場合や、Windows環境での互換性を重視する場合に使用されることがあります。

注意点

圧縮率が低いため、ファイルサイズが非常に大きくなります。そのため、Web上での使用には適していません。

8. AVIF (.avif)

AVIFは、最新の画像形式の一つで、高い圧縮率と品質を両立しています。

特徴

• 新しい画像フォーマット
• 高い圧縮率
• フルカラー対応
• 透過対応
• アニメーション対応
• ブラウザ対応がまだ限定的
• ビットマップ形式

使い所

AVIFは、WebPと同様に、高品質な画像をより小さいファイルサイズで提供したい場合に適しています。特に、帯域幅が制限されている環境でのパフォーマンス向上に役立ちます。

注意点

新しい形式のため、ブラウザの対応状況が限定的です。使用する際は、必ずフォールバック（代替画像）を用意する必要があります。

まとめ：適切な画像形式の選択

以上、主要な画像形式について詳しく見てきました。適切な画像形式の選択は、Webサイトのパフォーマンスと見た目の両方に大きな影響を与えます。

各画像形式の仕様と用途を考えると、以下のような基準で選択してもいいのかもしれません。

1. 写真やグラデーションのある画像 → JPEG
2. ロゴ、アイコン、透過が必要な画像 → PNG
3. シンプルなアニメーション → GIF
4. 高品質かつ小さいファイルサイズが必要 → WebP（フォールバック付き）
5. 拡大縮小が必要なロゴやアイコン → SVG
6. 最新技術を活用したい場合 → AVIF（フォールバック付き）

ただし、これはあくまで一般的な指針で、実際の使用では対象となるユーザーの環境やプロジェクトの要件に応じて、適切な形式を選択する必要があるでしょう。

また、画像の最適化ツールを使用することでファイルサイズを削減できるため、Webパフォーマンスなどを考慮する場合は画像を最適化するImageOptimやSquooshといったツールを使うことによってユーザービリティの向上をはかることができます。

関連記事