WebP vs AVIF vs JPG — どの形式を使うべき？
形式を間違えると、互換性が崩れるか、必要以上に大きなファイルを配信することになります。JPGは依然として共有の最安全策、WebPは多くの現代サイトの実用的なバランス、AVIFはさらに圧縮できますがフォールバック計画が必要です。このガイドでは、メール添付、商品ギャラリー、ブログヒーロー画像など実際の判断を解説し、各パスに合う変換ツールへリンクします。
略語より、まず用途から
古いタブレットでメールを開く親に旅行写真を送る？JPGのまま。政府フォーム、銀行アップロード、JPEGのみの印刷店 — 互換性を賭ける価値はほとんどありません。
自分のサイト、ブログ、商品カタログで訪問者が現行ブラウザを使う？WebPはJPGに近い見た目でファイルサイズを大きく削減でき、JPEGと違い透過も持てます。
高トラフィックページで`<picture>`要素により複数ソースを配信できる？AVIFのテストは価値あり — ただしデコードできないクライアント向けにJPGまたはWebPのバックアップなしでAVIFだけ配信しないでください。
JPG：今も誰もが理解する写真形式
JPEGは写真向けの非可逆圧縮 — ポートレート、風景、イベント写真。スマホ、PC、CMS、SNSアプリがすべて問題なく開きます。
透過背景、フラットカラーのロゴ、文字をくっきり保つUIスクリーンショットには不向き。これらはPNGまたはWebP向けです。
「JPGとして保存」を繰り返すたびに世代が重なります。可能な限り最もきれいなソースから一度だけ書き出してください。
WebP：現代Webの主力
似た画質の写真では、WebPは通常JPGよりバイト数が少なく — 場合によっては大幅に。JPEGにはないアルファチャンネルもサポートします。
静的ホスト、CDN、多くのサイトフレームワークはWebP配信に対応済み。メールクライアントが例外で、添付画像をプレーンJPEGとして表示するものが多く、ニュースレター内の画像はJPGのままが多いです。
PNGスクリーンショットが重いと感じたら、WebPへの変換はPNG再保存より通常小さくなります。だからPNG圧縮はデフォルトでWebP出力です。
AVIF：小さく、ただし手間も増える
複雑な写真シーンでは、AVIFはWebPをさらに上回ることが多い — エンコードが遅く、古い端末やアプリ内WebViewで隙間がある代償付きで。
本番では`<picture>`内でAVIFを優先ソースにし、WebPまたはJPGをフォールバックにして、ブラウザが理解できる最良の形式を選ばせます。
ビルドパイプラインがAVIFエンコード時間で苦しんでいる、またはフォールバックが未整備なら、まずWebPを正しく使うだけで多くの利益が得られ、摩擦も少ないです。
チートシート（目安）
制御できない任意の端末で動かす必要 → JPG。
現代サイトのヒーロー・一覧画像（フォールバックあり） → WebP、またはAVIF＋WebP/JPGバックアップ。
Web上の透過 → WebPまたはPNG。レガシー透過互換が広いのはPNG。
メール本文内の画像 → 多くの場合JPG。
迷ったら → WebPとJPGを並べて書き出し、画像圧縮でサイズと目で許容できる画質を比較。
形式は半分 — サイズと画質も重要
4000px幅の写真をWebPにしてもリサイズしなければ重いまま。表示幅に縮小してから形式を選んでください。
形式と寸法が決まったら、圧縮で最後の数%を削れることがあります。非可逆出力ではオリジナルマスターを残し、世代を重ねないように。
形式に関する質問
- 変換で画質は落ちる？
- 非可逆形式間の変換、または同じファイルの繰り返しエンコードでアーティファクトが目立つことがあります。高画質オリジナルから一度だけ変換し、自分のプレビューで判断してください。
- SVGはどこに当てはまる？
- SVGはアイコンやシンプルなイラスト向けのベクター形式で、写真形式の代替ではありません。マークとUIアイコンにSVG、写真にJPG/WebP/AVIF。
- Apple HEIC写真は？
- HEICはiPhone保存に優れますが、WebとWindowsでは扱いにくい。公開前にJPGまたはWebPへ。Windowsで全く開けない場合はWindowsでHEICを参照。
- JPGで透過を維持できる？
- いいえ — JPEGにアルファチャンネルはありません。PNGまたはWebPを使うか、JPG出力前に透過PNG→JPGで背景を塗りつぶしてください。