略語より、まず「誰が見るか」
古いタブレットでメールを開く家族に旅行写真を送るなら、JPGのままが安心です。官公庁のフォーム、銀行のアップロード、JPEGしか受けないプリント店などでも、互換性を賭ける意味はほぼありません。
自分のサイト・ブログ・商品カタログで、訪問者はだいたい現行ブラウザだ、という前提ならWebPが向きます。見た目はJPGに近く、容量はかなり減ることが多く、透過も扱えます。
アクセスの多いページで`<picture>`で複数ソースを出せるなら、AVIFを試す価値はあります。ただし読めない端末向けにJPGかWebPの控えなしで、AVIFだけ配るのは避けてください。
JPG:いちばん通じる写真形式
JPEGは写真向けの非可逆圧縮です。人物・風景・イベント写真など、スマホ・PC・CMS・SNSがほぼ例外なく開けます。
透過背景、単色ロゴ、文字をくっきり保ちたいUIのスクリーンショットには向きません。そちらはPNGかWebPです。
「JPGとして保存」を繰り返すたびに画質は少しずつ傷みます。できるだけきれいな原本から、一度だけ書き出しましょう。
WebP:いまのWebの本命
同じくらいの見た目なら、WebPはJPGより軽いことが多いです。JPEGにないアルファ(透過)も使えます。
静的ホスティングやCDN、多くのサイト用フレームワークはWebP配信に対応済みです。例外はメールクライアントで、添付をJPEG扱いするものが多く、ニュースレター内の画像はJPGのままにするのが無難です。
重いPNGのスクリーンショットは、PNGのまま再保存するよりWebPにした方が小さくなりやすいです。そのため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にしても、表示幅に合わせて縮めなければ重いままです。先に表示サイズへリサイズしてから形式を決めてください。
形式と寸法が決まったら、圧縮で最後の一押しができることもあります。非可逆で出すときは原本を残し、同じファイルを何度も再圧縮しないように。