Webで使える各画像形式とその特徴

この記事は2024/12/05に作成されました。

Webデザインを始めたばかりの時に最初にぶつかる疑問のひとつに、「なぜ画像形式がこんなにたくさんあるの？」というものがあります。

JPEG、PNG、GIF、SVG、WebP、AVIF…選択肢が多すぎてどれを使えば良いのか戸惑ってしまうこともあるでしょう。

この記事では、Webで使える画像形式とその特徴についてまとめています。

この記事の目次

• ファイルサイズと画質
• 画像形式が複数あるのはなぜ
• ファイル形式と圧縮方法
• 画像形式とその特徴
• 次世代画像形式AVIF
• 画像形式変換ツール
• まとめ

ファイルサイズと画質

写真のファイルサイズと画質について

今回は元画像として、BMP形式の画像を使います。
この画像はファイルサイズが8.3MBもあります。

BMPは、現代のブラウザはBMP形式を表示可能です。
しかし、データ容量が非常に大きく、Web利用には向いていないため、変換して圧縮するのが一般的です。

画像形式BMP形式からJPEGに変換

JPEGに変換すると、ファイルサイズは251KBになりました。

画像形式BMP形式からWebPに変換

WebPに変換すると、ファイルサイズは134KBになりました。
同じ画質ならWebPの方がファイルサイズが小さいことがわかります。

同じファイルサイズ（写真）で画像を拡大

JPEGは人や籠の部分が少し劣化しているため、WebPの方が画質が良いですね。
これは、両形式の圧縮方法と設計に違いがあるためだと言われています。

イラストのファイルサイズと画質について

写真と同じ考え方で、BMPは、Web利用には向いていないので、変換して圧縮し、ファイルサイズを削減しましょう。

画像形式BMP形式からPNGに変換

PNGに変換すると、ファイルサイズは104KBになりました。

画像形式BMP形式からSVGに変換

SVGに変換すると、ファイルサイズは170KBになりました。
同じ画質ならPNGの方がファイルサイズが小さいことがわかります。

同じファイルサイズ（イラスト）で画像を拡大

PNGはピクセルベースの画像形式であり、ピクセルを増やすことで拡大されます
拡大すると、ピクセルが単純に増加し、画像がぼやけたりするため、画質が劣化します。

一方で、SVGは画像を点、線、曲線、ポリゴンなどの数学的な要素で表現するため、拡大しても画像が再計算されて、ピクセルが増えることなく、画質が劣化しません。

以上のことから、用途に応じて適切な画像形式を選ぶことが重要になってくると言えます。

画像形式が複数あるのはなぜ

昔は、多目的に使える画像形式がなかったため、複数の使い分けが必要とされていましたが、現在では、画像形式を複数使い分けすることで、容量を下げることができ、Webページの表示スピードをあげることができるようになりました。

例えば、写真には高圧縮率と画質のバランスが良いJPEG（最近ではAVIFが適している）が適しており、透明な背景が必要な画像にはPNGが向いています。

このように、適切な形式を選ぶことでWebサイトの見栄えやパフォーマンスが大きく向上することができるのです。

ファイル形式と圧縮方法

ファイル形式はデータの保存方法やその解釈方法を決定する規則や仕様を指し、圧縮方法はそのデータを効率的に保存するための技術です。

圧縮方法には大きく分けて2種類あり、一度圧縮した後でも圧縮前の状態に完全に戻すことができる可逆圧縮と、データの品質や内容が、圧縮の過程で情報の一部が永久に失われるため、一度圧縮すると元の状態には戻すことができない非可逆圧縮に分けられます。

画像形式とその特徴

JPEG（ジェイペグ）

現時点で写真画像のファイル形式として最も代表的なもので、一度圧縮するともう圧縮前の画質には戻せない。
圧縮をくり返した場合は画質が大きく劣化してしまう。

• 拡張子➡︎.jpg（.jpeg）
• 色数➡︎1677万7216色（フルカラー）
• 透過➡︎不可
• データ容量➡︎圧縮率の設定で任意に設定可

特徴

メリット:高圧縮率によりファイルサイズが小さくなるため、写真や高解像度の画像に適している

デメリット:圧縮時に品質が劣化する。透明色をサポートしない

使用例

写真、複雑なカラー画像

PNG（ピング）

可逆圧縮方式により、データ容量は重くなりやすいが、画質は維持される。

• 拡張子➡︎.png
• 色数➡︎260兆色
• 透過➡︎1色or256色の透明色
• データ容量➡︎重め

特徴

メリット:圧縮しても品質が劣化しない。透明色をサポート。高画質な画像が必要な場合に最適

デメリット:JPEGよりもファイルサイズが大きくなる

使用例

ロゴ、アイコン、グラフ、イラスト、透明背景が必要な画像

GIF（ジフ）

ファイルサイズを抑えつつアニメーションを作成したい場合によく使われるファイル形式で、色数は少ないが、ファイルサイズを小さくすることができる。

• 拡張子➡︎.gif
• 色数➡︎256色
• 透過➡︎1色
• データ容量➡︎軽め

特徴

メリット:256色までのパレットを使用しているため、簡単なグラフィックスに適している

デメリット:色数が制限されているため、複雑な画像には向かない

使用例

アニメーション、シンプルなグラフィック、バナー広告

SVG（エスブイジー）

画像を拡大・縮小しても品質が劣化せず、自由にカスタマイズができる。

• 拡張子➡︎.svg
• 色数➡︎SVGの色数は指定するカラースペースに依存しているため、具体的な数はない
• 透過➡︎可能
• データ容量➡︎軽め

特徴

メリット:ベクター形式のため、拡大・縮小しても品質が劣化しない。編集が容易。ファイルサイズが小さい

デメリット:複雑な写真や多色の画像には向かない

使用例

アイコン、ロゴ、インフォグラフィック

WebP（ウェッピー）

WebPはGoogleによって開発された画像ファイル形式で、JPEGやPNGと比較して高い圧縮率を実現し、現在では、ほぼ全ての主要なブラウザ（Chrome、Firefox、Edge、Safariなど）でサポートされています。

また、WebPは、透明色をサポートする機能があるため、PNGよりも小さなファイルサイズで同等またはそれ以上の画質を実現することができます。

• 拡張子➡︎.webp
• 色数➡︎1677万7216色（フルカラー）
• 透過➡︎可能
• データ容量➡︎軽め

特徴

メリット:高い圧縮率と高品質を両立。JPEG、PNG、GIFの長所を併せ持つ。透明色とアニメーションをサポート

デメリット:一部の古いブラウザではサポートされていない

使用例

写真、透明背景の画像、アニメーション

AVIF（エーブイアイエフ）

AVIFは、2019年にリリースされた比較的新しいファイル形式で、可逆圧縮と非可逆圧縮のどちらかを選択することができる。

• 拡張子➡︎.avif
• 色数➡︎AVIFの色数は指定するカラースペースに依存しているため、具体的な数はない
• 透過➡︎可能
• データ容量➡︎軽め

特徴

メリット:JPEG、PNG、WebPといった従来の画像フォーマットに比べて、圧倒的に圧縮効果が高い

デメリット:一部の古いブラウザではサポートされていない

使用例

フォトギャラリー、広告バナー

次世代画像形式AVIF

近年新たに注目されている画像ファイルフォーマット、AVIFについて詳しく見てみましょう。

AVIFは非営利団体「Alliance for Open Media（AOM）」が開発した次世代画像フォーマットで、JPEGと比較して20-50％程度のファイルサイズ削減が可能です。

透明色にも対応しており、透明色を持つ画像をAVIF形式で保存することで、高い圧縮率と高画質を両立させています。

2024年の時点でまだ完全な普及には至っていませんが、一部の主要ブラウザ（Chrome、Firefoxなど）はAVIF形式をサポートしています。

※他のブラウザや古いバージョンではサポートされていない場合があります。

AVIFはWeb画像の最適化において強力なツールであり、透明色やアニメーションなどの多彩な機能をサポートしています。
そのため、AVIFを上手に活用すれば、Webパフォーマンスを向上させることができます。

画像形式変換ツール

複数画像の画像形式を一括変更ができる便利なツール「squoosh」を紹介します。

squooshはGoogleが提供するブラウザ上で画像の圧縮できる無料ツールです。

メリット:境界線を動かしたり、画像を拡大したりすることで圧縮前と圧縮後の画質を比較できる

デメリット:一括で変換できない

使い方

1. サイトにアクセスhttps://squoosh.app/
2. 圧縮したい画像をアップロード
3. 画像フォーマットを選択
   フォーマットを変更する場合はCompressから選択する
4. 画像を比較する
   画面の左側は元画像、右側が変更後の画像
5. Compressの「Quality」で画質を調整をする
6. 右下の「ダウンロード」をクリックして完了

まとめ

各画像形式にはそれぞれの強みと弱みがあり、用途に応じて適切な形式を選ぶことが重要です。
Webデザインやコンテンツ制作において、これらの知識を活用して最適な画像形式を選ぶことが大事になってくると言えるでしょう。