PNG・JPG・WebP・AVIF — どれを選ぶべきか

決め手になる質問

写真はゆるやかで細かく揺れる変化でできています。JPG・WebP・AVIFといった非可逆形式はまさにそのために作られていて、目が追えない細部を捨てることで小さくなります。

スクリーンショット・ロゴ・図・文字の入った画像は正反対です。広い単色の面とくっきりした境界でできています。非可逆圧縮は文字の縁に見えるノイズを残しますし、そもそも捨てるノイズが少ないので容量もあまり減りません。そこがPNGの居場所です。

JPG — どこでも開くもの

三十年以上前からあり、これまで作られたほぼすべてのソフトが読め、写真用としては今でも十分です。透明を扱えず、品質を下げすぎると四角い跡が見えます。

自分が管理できないソフトが開く場合に選んでください — 印刷所、役所の提出フォーム、同僚の古いノートパソコン。

PNG — 可逆で透明、そして写真には向きません

PNGは画素を一つも捨てず、透明も完全に扱えます。ロゴ・スクリーンショット・アイコン、あとから編集し直す画像に向きます。

写真の入れ物としては不向きで、ここで多くの人が行き詰まります。写真の入ったPNGを圧縮ツールに通してもほとんど減りません。可逆圧縮は写真のノイズから捨てるものを見つけられないのです。PNGの写真が8MBなら、どのPNG最適化ツールもそれを小さくはできません — JPGやWebPに変えれば小さくなります。

WebP — ウェブなら無難な既定値

WebPは両方をこなします。写真は非可逆で、図は透明つきの可逆で収め、アニメーションもできます。同程度の画質でおおむねJPEGより25〜35%小さくなります。

現行のブラウザはすべて表示します。それでも避ける理由が残るとすればブラウザの外です — 古いデスクトップアプリや印刷の工程では、まだ.webpを開けないところがあります。

AVIF — 最小、最も遅く、まだ全部ではありません

AVIFはAV1動画コーデックを使い、同じ画質では四つの中でたいてい最も小さくなります。写真や低ビットレートでは特にそうです。ただしエンコードが遅く、まとめて処理すると体感できます。

知っておくべき落とし穴が一つあります。ブラウザがAVIFを表示できることと作れることは別です。エンコードの対応はデコードより狭く、対応していない形式を作れと言われたブラウザは黙ってPNGを返します。当サイトの変換機が対応表を信じず、試験画像を実際にエンコードして返ってきたものを照合して形式の一覧を作っているのはそのためです。

短くまとめると

判断の流れ図ではなく目安が欲しい場合はこうです。

• ウェブに載せる写真 → WebP。エンコード時間より容量が大事ならAVIF。
• どこでも開く必要のある写真 → JPG。
• スクリーンショット・ロゴ・図、文字の入った画像 → PNG。
• 透明が必要 → PNGかWebP。JPGは絶対に違います。
• すでにJPGで大きすぎる → 品質スライダーより先に縦横を縮めることです。幅を半分にすれば画素数は四分の一になります。