WebP vs PNG vs JPEG：どの画像形式を使うべきか
画像形式の選択は小さな決断に見えますが、放っておくとページ速度・画質・互換性を静かに蝕みます。ウェブを支配する 3 つの形式について、実務的な考え方とそれぞれが正解となる場面を整理します。
30 秒での結論
- 写真や複雑なグラデーション → JPEG。モダンブラウザーの読者なら WebP。
- アイコン・ロゴ・スクリーンショット・シャープな文字 → PNG。
- 同じ見た目で最小のファイル → WebP。
- 極限の節約と、遅いエンコードの許容 → AVIF（WebP の新ライバル）。
JPEG：万能の定番
JPEG は 1992 年から存在し、地球上のすべてのデバイス・ブラウザー・エディター・CMS が表示できます。人間の視覚の仕組みに合わせた非可逆圧縮を使い、私たちが気づきにくいディテール —— 特に色彩が込み入った領域のそれ —— を捨てます。
長所：
- 数十年前のソフトウェアを含む万能の互換性
- 写真に対する優れた圧縮効率
- 品質パラメータでサイズを直接制御
短所：
- 透非対応 —— 透過部分は白か黒になる
- シャープな輪郭や文字に「モスキートノイズ」と呼ばれる偽影が出る
- 繰り返しの編集・保存で品質が急速に劣化（世代劣化）
ウェブ写真のスイートスポットは品質 75〜85 です。60 を下回るとブロックノイズが目立ち始め、90 を超えると目に見えない改善のためにファイルが急増します。
PNG：正確さと透過
PNG は可逆圧縮です。すべてのピクセルが完全に保持されます。そのためスクリーンショット、UI 要素、ピクセルアート、図表、文字が完全にシャープでなければならないあらゆる画像にとって、唯一のまともな選択肢になります。
長所：
- 完全な忠実度 —— 偽影は一切なし
- 滑らかなエッジの完全なアルファ透過
- フラットな色のグラフィックは極めてよく圧縮される
短所：
- 写真では巨大化 —— 同等の JPEG の 5〜10 倍になることも
- 品質調整ができない。可逆か、形式を変えるかの二択
少色数の画像を 8 ビットの「PNG-8」で書き出すと劇的に小さくなる定番テクニックがありますが、これは色数の少ない画像でしか機能しません。
WebP：現代のデフォルト
Google が開発した WebP は、可逆・非可逆両方の圧縮に加えてアルファチャンネルをサポートします。写真では同等の見た目で JPEG より通常 25〜35% 小さく、透過と高効率圧縮を両立できます —— JPEG には絶対にできない組み合わせです。
長所：
- 写真は JPEG 比 25〜35% 小さく、グラフィックでも PNG より小さい
- 可逆・非可逆の両モードで透過対応
- 現行ブラウザーすべてが対応（Chrome、Firefox、Edge、Safari 14 以降）
短所：
- 一部の古いデスクトップアプリや CMS パイプラインはまだつまずく
- エンコードにはライブラリやツールが必要（ブラウザーはネイティブで WebP を生成できず、Safari はエンコード自体が不可能 —— だからこそブラウザーベースのコンバーターは WebAssembly エンコーダーにフォールバックする）
AVIF：新しいフロンティア
AVIF は同程度の品質で WebP より 20〜30% 小さくなり、対応も急速に広がっています。難点はエンコードコストです。AVIF の生成は計算量が大きく、高性能なマシンでも 1 枚に数秒かかることがあります。帯域の節約が待ち時間に見合う場面 —— ヒーロー画像や高トラフィックページ —— で使い、WebP か JPEG のフォールバックを用意しましょう。
シンプルな判断表
| コンテンツ | 最適解 | 次点 |
|---|---|---|
| ウェブ用写真 | WebP（品質 ~80） | JPEG（品質 ~80） |
| 文字入りのスクリーンショット | PNG | WebP 可逆 |
| 透過ロゴ | PNG | alpha 付き WebP |
| アイコンセット | PNG または SVG | WebP |
| メール添付 | JPEG | PNG |
| 最大節約・モダンな読者 | AVIF | WebP |
形式変換について
形式の切り替えは安価ですが、二度の切り替えはそうではありません。必ず最良のオリジナルから変換してください —— 非可逆での再保存は損傷を積み重ねます。今すぐバッチ変換が必要なら、当サイトの画像形式変換ツールをどうぞ。PNG・JPEG・WebP・AVIF の入出力が完全にブラウザ内で完結し、ファイルはどのサーバーにも送られません。