どの画像形式も、ファイルサイズ、品質、そして透過やアニメーションといった機能のあいだの取捨選択の集まりです。間違ったものを選ぶと、肥大したファイル、ぼやけた文字、あるいは表示されないグラフィックになります。ここでは、よく使う各形式をわかりやすい言葉で説明し、手元に置いておける表を添えます。
2つの大きな系統
個々の形式に入る前に、その大半を説明する区別が一つあります。
- ラスター画像はピクセルの格子です。写真はラスターです。十分に拡大すると四角が見えます。PNG、JPG、WebP、AVIF、GIFはすべてラスターです。
- ベクター画像は数式です。座標で定義された線、曲線、図形。どんなサイズにも拡大してぼやけません。ウェブ上のベクター形式はSVGです。
もう一つの重要な考え方が非可逆と可逆です。非可逆形式（JPG、たいていのAVIF/WebP）は一部のディテールを捨ててファイルを縮めます。可逆形式（PNG、GIF、可逆WebP）はすべてのピクセルをそのまま保ちます。
各形式を一つずつ
JPG（JPEG） — 写真の主役。非可逆で、小さく、文字どおりどこでも読めます。透過なし、アニメーションなし。繰り返し保存し直すと少しずつ劣化します。写真や、最大限の互換性が必要なあらゆる場所に。
PNG — 可逆で、透過に対応。スクリーンショット、ロゴ、アイコン、図——文字やくっきりした縁を持つあらゆるものに最適です。PNGの写真は大きくなるので、それには使わないでください。
WebP — 両方の仕事をこなす最新形式です。非可逆モードはサイズでJPGを上回り（約25〜35%小さい）、可逆モードは透過に対応しつつコンパクトを保ちます。アニメーションも扱えます。今やブラウザで広くサポートされています。ウェブには理想的ですが、メールや古いソフトにはそれほど向きません。
AVIF — ここで最も新しく最も優れた圧縮器で、同程度の品質でJPEGのおよそ半分のサイズ、透過とHDRに対応します。ブラウザはこれをうまく表示できますが、Canvasから確実にエンコードすることはできません。そのため、AVIFを要求するとブラウザベースのツールはWebPにフォールバックします。本物のAVIFエンコードにはサーバーかネイティブアプリが必要です。
GIF — 古く、256色に限られますが、簡単なアニメーションの定番です。短いループを超えるものには、WebP（または動画）のほうが小さくくっきりします。小さなアニメアイコンには十分、写真には不向きです。
SVG — ベクターなので、無限に拡大してもぼやけず、単純なグラフィックなら極小のままです。ロゴ、アイコン、イラストに最適。ピクセルではなくコードなので、写真を表現することはできません。
比較表
| 形式 | 種類 | 圧縮 | 透過 | アニメーション | 得意なもの |
|---|---|---|---|---|---|
| JPG | ラスター | 非可逆 | なし | なし | 写真、最大限の互換性 |
| PNG | ラスター | 可逆 | あり | なし | スクリーンショット、ロゴ、文字 |
| WebP | ラスター | 両方 | あり | あり | ウェブ画像、小さく透過あり |
| AVIF | ラスター | 非可逆/可逆 | あり | あり | 最大圧縮（サーバー側） |
| GIF | ラスター | 可逆 | 1ビットのみ | あり | 簡単なアニメーション |
| SVG | ベクター | 該当なし | あり | あり（CSS/JSで） | ロゴ、アイコン、イラスト |
手早い選び方
- 写真？ 互換性ならJPG、ウェブならWebP。
- スクリーンショット、ロゴ、文字？ PNG（ラスター）またはSVG（本物のベクターグラフィックなら）。
- 透過が必要？ PNG、WebP、AVIF、SVG——JPGは決して選ばない。
- アニメーション？ 品質とサイズならWebP、レガシー用の手軽さならGIFだけ。
- ウェブサイトに公開？ たいていWebPが賢い既定値。
形式どうしの変換
間違った形式を持っていても、直すために何かをアップロードする必要はありません。画像変換は、Canvasを使ってPNG、JPG、WebPのあいだをブラウザ内で切り替えます。アカウント不要、何も送信されず、初回訪問後はオフラインで動きます。バッチにも対応し、AVIFを要求するとWebP（JPG/PNGより小さく、どこでもサポートされる）にフォールバックします。ブラウザがAVIFを確実にエンコードできないためです。
上の表を頭に置いておけば、形式選びは当てずっぽうでなくなります。形式を内容（写真かグラフィックか）に合わせ、次に届け先（ウェブ、メール、印刷）に合わせれば、ほぼ毎回正しく選べます。