本文へスキップ

WebP・AVIF・JPG — どれを選ぶ?

画像形式を間違えると、「開けない」か「必要以上に重い」かのどちらかになりがちです。共有や提出なら今もJPGが一番無難。自分で配信するサイトならWebPが実用的な本命。さらに小さくしたいならAVIFですが、読めない環境向けの逃げ道が要ります。メール添付・商品一覧・ブログのメイン画像など、よくある場面ごとの選び方と、すぐ使える変換ページへのリンクをまとめました。

略語より、まず「誰が見るか」

古いタブレットでメールを開く家族に旅行写真を送るなら、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にしても、表示幅に合わせて縮めなければ重いままです。先に表示サイズへリサイズしてから形式を決めてください。

形式と寸法が決まったら、圧縮で最後の一押しができることもあります。非可逆で出すときは原本を残し、同じファイルを何度も再圧縮しないように。

公開前に圧縮する

形式が決まったら、[[image-compressor|画像圧縮]]で容量とプレビューを比べてから、CDNや本番へ上げましょう。

画像圧縮を開く

形式についてのよくある質問

このサイトで形式を変換できますか?
できます。JPG→WebPPNG→AVIFWebP→JPGを使うか、画像圧縮で出力形式を選んでください。
変換すると画質は落ちますか?
非可逆どうしの変換や、同じファイルを何度もエンコードすると、ブロックノイズなどが目立つことがあります。きれいな原本から一度だけ変換し、プレビューで自分の目で判断してください。
SVGはこの比較のどこに入りますか?
SVGはアイコンや単純なイラスト向けのベクターで、写真形式の代わりにはなりません。マークやUIアイコンはSVG、写真はJPG/WebP/AVIF、という使い分けです。
iPhoneのHEIC写真は?
HEICは端末内の保存には向きますが、WebやWindowsでは扱いづらいです。公開前にJPGかWebPへ。Windowsで開けないときはWindowsでHEICをどうぞ。
JPGのまま透過を保てますか?
いいえ。JPEGに透過はありません。PNGかWebPを使うか、JPGにする前に透過PNG→JPGで背景を塗ってください。

変換してみる