JPG vs PNG vs WebP vs AVIF — どの画像フォーマットを選ぶべきか
写真・スクリーンショット・SNS・Web 配信で「結局どれが正解か」を、圧縮方式 / ファイルサイズ / 互換性 / 透過対応 の 4 軸で比較。ブラウザ完結変換でフォーマットを切り替える手順も。
どの軸で選ぶか — 4 つの判断基準
画像フォーマット選びは「結局どれが一番いいか」ではなく「何を犠牲にできるか」で決まります。判断の基準は 4 つです。圧縮方式 (可逆 / 非可逆) は写真とイラストの向き不向きを左右します。ファイルサイズ は配信コスト・ページ表示速度・ストレージに直結します。互換性 はそのファイルを開く相手 (古いブラウザ / Word / 旧 OS / 印刷会社) によって急に厳しくなります。透過対応 はロゴ・UI 素材・合成素材で必須になります。
「JPG が古い」「AVIF が最新で最強」のような一次元の比較ではなく、この 4 軸のどれを優先するかで答えが変わります。SNS 投稿なら互換性、スマホ向け Web なら容量、ロゴ配布なら透過、社内 Word 添付なら互換性、というように。
4 フォーマットの比較表
| 項目 | JPG | PNG | WebP | AVIF |
|---|---|---|---|---|
| 圧縮方式 | 非可逆 | 可逆 | 可逆 + 非可逆 | 可逆 + 非可逆 |
| 写真の容量 | 基準 (100%) | 200-400% | 70-80% | 50-65% |
| 透過 (アルファ) | 不可 | 可 (8bit) | 可 (8bit) | 可 (10bit/12bit) |
| アニメーション | 不可 | 不可 (APNG 拡張) | 可 | 可 |
| 互換性 | ほぼ全て | ほぼ全て | モダン全部 + IE 非対応 | モダンのみ、Safari 16+ |
| 印刷向け | OK | OK | △ (印刷会社次第) | × |
| 編集ソフト | Photoshop / Illustrator / 全て | 同上 | やや限定的 | 限定的 |
| 開発年 | 1992 | 1996 | 2010 (Google) | 2019 (AOMedia) |
写真の容量比は JPEG 品質 80 を基準にした目安です。WebP は同じ見た目で JPEG の 7 割前後、AVIF は 5-6 割 まで小さくなります。逆にスクリーンショットやロゴのような色数の少ない画像では PNG の可逆圧縮が JPEG の非可逆より小さくなる場合があり、フォーマット選びは中身の性質にも依存します。
ユースケース別のおすすめ
SNS 投稿・メール添付・社内共有: JPG。プラットフォームの自動変換と互換性を考えると、変換コストをかけて WebP/AVIF にしても受け側で再エンコードされて結局意味がない、というケースが多い。
自分のサイトに埋め込む写真: AVIF を <picture> で第一選択、WebP をフォールバック、JPG を最終フォールバックにする 3 段構成。Safari 古いバージョンは WebP しか食えないので 3 段が安全。サイズ削減は最大で 50% 以上、LCP (Largest Contentful Paint) の改善効果は大きい。
ロゴ・スクリーンショット・透過素材: PNG。可逆で透過を保てる。WebP/AVIF も可逆 + 透過に対応するが、編集ソフトやデザインツールの import 経路がまだ PNG ほど安定していない。「相手が PNG しか読めない可能性が高い」を前提にした方が事故が少ない。
印刷入稿: JPG (写真) または PNG (ロゴ・図版)。印刷会社のワークフロー (CMYK 変換含む) は AVIF/WebP を受け付けていないことが多い。
ブラウザだけで相互変換する方法
フォーマットの選択は決まっても、手元の画像が違うフォーマットだと変換が必要になります。image-convert は JPG / PNG / WebP / AVIF / GIF / BMP / TIFF を相互に変換し、品質パラメータの調整もできます。アップロード型のオンライン変換と違って、写真や社内資料を外部サーバーへコピーする経路がコードに存在しません。
注意点は 非可逆 → 非可逆の再エンコード。JPG → WebP → AVIF を繰り返すと、見た目に分からなくても圧縮アーティファクト (ブロックノイズや偽輪郭) が徐々に蓄積します。元画像が手元にあるなら、可能な限り 元画像から 1 回の変換で目的フォーマットを生成する のが基本ルールです。EXIF を一緒に消したい場合は変換後に image-exif-strip を、サイズだけ落としたい場合は image-compress を組み合わせます。実装は GitHub で公開しており、DevTools の Network タブで「変換中にどこにも送信されていない」ことを目視確認できます。